UX-UI-App-Design: Meistere High Fidelity-Mockups und Prototypen

1. Willkommen beim UX UI App-Design-Kurs: Hallo alle zusammen. Wenn Sie planen, mit der UY UX Design Journey zu beginnen und Ihre UY-UX-Designfähigkeiten zu verbessern, ist dieser Kurs Ihre Startrampe Mein Name ist Akaanka und ich bin ein UY-UX-Designer, der gerne benutzerorientierte Apps und Websites erstellt Wir sprechen nicht nur über die UY-UX-Designtheorie, hier geht es darum Ihre Vision in die Realität umzusetzen, Pixel von Fixel Das Hauptaugenmerk dieses Kurses liegt darauf, zu lernen, wie man benutzerorientierte Designs für mobile Apps erstellt benutzerorientierte Designs für mobile Apps , die einfach zu bedienen sind und fantastisch aussehen Stellen Sie sich vor, Sie würden Farben auswählen , ohne dass die App Probleme mit der Barrierefreiheit hat. Wählen Sie Telefone, die die Lesbarkeit verbessern und den richtigen Ton für Ihre App vermitteln Erkunden Sie die Welt der Icons und ihre Rolle bei Erstellung intuitiver und visuell ansprechender Benutzeroberflächen Halten Sie alles organisiert, wie beschriftete Toolbox, und wenden Sie UX-Prinzipien und Verluste auf UI-Designs an Und Apps zu entwickeln, die Gus nutzt, und Lösungen für ihre Probleme zu finden. Wir werden nicht nur schöne Benutzeroberflächen entwerfen, sondern uns auch darauf konzentrieren, benutzerzentrierte Apps zu entwerfen , indem wir U X auf das UI-Design anwenden. Wir werden all das und noch mehr tun. Wir werden Freqma verwenden, um unsere App-Markups zu entwerfen und sie dann in funktionierende Prototypen umzuwandeln Ich bin hier, um dich Schritt für Schritt zu führen. Deshalb werden wir zusammenarbeiten, um eine Foot-Order-App zu entwickeln und UX-Designprinzipien und Best Practices zu erläutern, die Ihnen helfen, jede Art von App so zu entwerfen, dass Ihnen helfen, jede Art von App so zu entwerfen, Sie Ihr UX-App-Design verbessern können. Lass uns gehen. Wir sehen uns in der Klasse. 2. Farben mit Farbpsychologie auswählen: Es gibt viele Möglichkeiten, etwas über Farbpsychologie zu lernen und die beste Farbe für Ihre App oder Ihre Marke zu finden . Ich werde mit der allgemeinsten Methode beginnen und Ihnen die, meine persönliche Methode, mit der ich Farben auswähle, zeigen . Zuallererst werde ich zu Google gehen und nach Farbpsychologie suchen. Jetzt werde ich viele Artikel sehen. diese Artikelrichtlinien befolge, kann ich mir ein besseres Bild von kann ich mir ein besseres Bild Farbpsychologie machen und erfahren, wie man die Farbpsychologie anwendet , um die richtige Markenfarbe zu finden. Das Blau steht für Vertrauen, Loyalität und Sicherheit und hat etwas mit der Bankenbranche zu tun. Wenn Sie die beliebtesten Marken im Bankwesen bevorzugen, werden Sie feststellen, dass Blau eine der beliebtesten Farben ist , die die meisten Marken verwenden. Die erste Methode besteht darin, diese Art von Artikeln zu lesen. Die zweite Methode besteht darin, generierte Details zu verwenden. Sie können Google Brat und GPT verwenden , um Fragen zur Farbpsychologie zu stellen und die beste Farbe zu finden Meine Lieblingsmethode ist der Color Emotion-Leitfaden. Hier ist ein Artikel über Farbpsychologie im Logodesign. Ich folge gerne diesem Leitfaden zu Farbemotionen und wähle die Farbe aus. Der Grund, warum ich diesen Leitfaden für Farbemotionen verwende , ist, dass ich überprüfen kann , welche Band beliebt ist und welche Farbe sie für die Erstellung ihrer Logos verwendet haben. In unserem Fall werden wir eine App für die Lieferung von Lebensmitteln erstellen, und zwar für eine Bäckerei. Das Gefühl und die Bedeutung von Backwaren sind Gesundheit, Begeisterung und schnelle Lieferung. Wenn wir also die Logos entsprechend oder unter diesem Abschnitt „Optimismus, Klarheit und Vermit“ überprüfen , werden wir die Logos sehen, die sich auf Liefermarken und Passketten wie McDonald's und Subway beziehen Liefermarken und Passketten wie McDonald's und wie McDonald's Wenn wir uns diesen Abschnitt über friedliches Wachstum und Gesundheit ansehen , können wir auch einige Logos sehen, können wir auch einige Logos sehen die mit Lebensmitteln zu tun haben. In dieser App möchte ich diese grüne Farbe verwenden. Wenn Sie, wenn Ihre App in einer anderen Nische oder Marke ist, können Sie dieser Farbemotion folgen , diese Logos überprüfen und das Logo finden, das am besten zu Ihnen passt. Der erste Teil ist fertig, jetzt haben wir unsere Farbe Grün, aber ich habe keine spezifische grüne Farbe, also muss ich die spezifische grüne Farbe finden. Und dann muss ich die Sekundär- und Akzentfarbe finden. In der nächsten Lektion werden wir das Farbrad verwenden und unsere Primärfarbe optimieren. Und dann werden wir etwas über die 603010-Regel lernen und die Zweit- und Akzentfarbe für unsere Kunst herausfinden die Zweit- und Akzentfarbe für unsere Kunst herausfinden 3. Auswahl einer Primärfarbe: Okay, jetzt haben wir unsere Markenfarbe als Grün ausgewählt. Und Sie wählen Ihre Markenfarbe entsprechend Ihrer App aus. Jetzt können wir also die Optionen sehen , die wir in unserer App verwenden können. Versuchen wir also, die Farbe zu finden , die zu unserer App und unserer Marke passt. Dazu gehe ich zu Coolers.com und klicke auf Explore Trending Okay, jetzt suche ich in der Suchleiste grün, oder ich kann einfach auf dieses Farbtag klicken Und jetzt bekommen wir verschiedene Arten von Farbpaletten. Und mit diesen Farbpaletten können wir die beste Farbe für unsere App finden Lassen Sie uns die beste grüne Farbe oder die beste Farbe für Ihre App herausfinden , die Primärfarbe Ich mag diese grüne Farbe sehr, also klicke ich einfach darauf. Und wenn ich darauf klicke, wird der Farbcode kopiert. Dann gehe ich auf die Startseite der Kühler und klicke auf Generator starten Jetzt klicke ich hier auf diesen Farbcode, um die Farbe auszuwählen Also werde ich die Farbe einfügen, die ich ausgewählt habe. Und jetzt werde ich auf dieses Localicon klicken. Jetzt haben wir die Grundfarbe. In der nächsten Lektion werde ich Ihnen die 603010-Regel vorstellen 4. Die 60-30-10-Regel: 603010-Regel ist eine Richtlinie für die Innenarchitektur , anhand derer Designer Farbpaletten erstellen Die 603010-Regel ist beste Methode, um die Farben im gesamten Design ausgewogen zu gestalten Die 603010-Regel hat drei Farben, wobei jede Farbe einen bestimmten Prozentsatz des Gesamtdesigns ausmacht einen bestimmten Prozentsatz des 60% ist die dominante Farbe, was bedeutet, dass 60% des Gesamtdesigns verwendet werden und 30% die Sekundärfarbe sind Und diese Farbe wird zu 30% des Designs verwendet und zu 10% ist die Cent-Farbe. Und diese 10% werden verwendet, um die wichtigsten Teile des Objekts auf dem Design hervorzuheben. Wenn wir diese 603010-Regel befolgen, können wir Farbpaletten erstellen, die sowohl harmonisch als auch optisch ansprechend sind sowohl harmonisch als auch Obwohl die Regeln für Innenarchitektur gelten, können wir sie für I designed to anwenden . Wenn wir über UX oder Benutzererfahrung sprechen, gibt es ein Prinzip, das als Schlüssel bezeichnet wird. Okay, ich verdopple, was bedeutet, halte es einfach, dämlich. diese 163010-Regel befolgen, können wir die Einfachheit beibehalten und den wichtigsten Teil des Designs mit Farben hervorheben wichtigsten Teil des Designs mit Deshalb ist es wichtig, diese 60, 30-Regel auch als Anfänger zu verwenden . Dies ist die beste Methode, um die richtige Farbe auszuwählen Denn wenn Sie Farben verwenden , die viele Farben enthalten, wird das Ihr Design ruinieren. Wenn Sie wie ich nicht gut darin sind, die richtigen Farben auszuwählen, hilft Ihnen diese 603010-Regel dabei, dies zu erreichen Lassen Sie uns einige Beispiele für die 603010-Regel herausfinden, die in der Innenarchitektur verwendet wird Danach zeige ich Ihnen zwei Websites, die die 603010-Regel verwenden , um ihre Farben auszuwählen. Also hier ist das erste Design. Bei diesem Design macht die dominante Farbe also 60% des Innenraums aus und wir haben diese braune Farbe auf dem Boden und die Akzentfarbe in der grünen Dekoration. Und schauen wir uns ein anderes Beispiel an. Okay? In diesem Beispiel haben wir Licht als Farbe, als dominante Farbe. Und es sind 60%. Und wir haben Sekundärfarbe wie diesen Lack, Holzfarbe. Und wir haben 10% Akzentfarbe. Aber wenn Sie sich dieses Design ansehen, werden Sie deutlich sehen, dass die Akzentfarbe mehr als 10% beträgt. Dafür gibt es also einige Gründe. Wie ich bereits sagte, ist 603010 eine Regel Es ist kein Prinzipiengesetz. Damit wir diese Regeln brechen können. Okay? Ich werde es noch einmal sagen. Wir können die 603010-Regel brechen, was bedeutet, wenn wir etwas ändern müssen oder etwas, das wir mit Farben zu tun haben, und es ist völlig in Ordnung, diese 603010-Regeln zu brechen was bedeutet, wenn wir etwas ändern müssen oder etwas, das wir mit Farben zu tun haben, und es ist völlig in Ordnung, diese 603010-Regeln zu brechen. Dies ist nur eine Regel und wir verwenden diese Regel, um unser Design einfach zu halten und einfach die besten Farben zu finden Lass uns zum nächsten Design gehen. Bei diesem Design sind die Wandfarben weiß und die Flussfarbe braun. Und wir haben dieses Dunkel als Farbe für Licht und Chaos. Also lass uns zum nächsten gehen. Und in diesem Design können Sie sehen, dass die 603010-Regel Und manchmal ist es nicht einfach, die 603010-Regeln zu verstehen, wenn wir Sogar sie verwenden die 603010-Regel für die Innenarchitektur. Sie können verschiedene Arten von Farben verwenden, und wie ich bereits sagte, ist dies eine Regel, und wir können Regeln brechen Okay, jetzt gehen wir zum Beispiel aus dem wirklichen Leben. Und jetzt bin ich auf Netflix.com. Auf Netflix kann man deutlich 60% der dunklen Farbe im Hintergrund erkennen dunklen Farbe im Hintergrund Und hinter dem Hintergrund können wir die neuesten Filme und Fernsehserien sehen, aber es ist immer noch dunkel Und wir können deutlich erkennen, dass 30% Farbe auf dem Text und diesem Text P verwendet wurden . Jetzt ist es die lustige Leiste. Sie können deutlich erkennen, was der Aufruf zum Handeln ist. Katze. Call to Action ist das umsetzbare Element, mit dem Benutzer klicken und zum nächsten Schritt übergehen können In diesem Fall ist CTA so groß rot. Hol den Startknopf. Und der Zweck von Netflix ist es Peebles Mitgliedschaften zu geben und sie zu ihrer Datenbank hinzuzufügen und Geld von ihnen zu verlangen Wenn ein Benutzer also auf diese Seite kommt , sieht er deutlich die Nachricht, die er sehen möchte, und den Aufruf zum Handeln, dass er die Aktion ergreifen möchte Das ist also ein gutes Beispiel. Wenn ich hier nach unten scrolle, habe ich immer noch eine dunklere Farbe als 60% und 30% der weißen Farbe und es gibt nur wenige verschiedene Farben. Wenn wir das Gesamtdesign überprüfen, können wir deutlich erkennen, was die Farben sind und was die 603010-Farben sind Gehen wir zum nächsten Beispiel und E Slack.com In Slack kannst du deutlich lila Hintergrund sehen und es die 60%. Dann werden wir 30% des Y sehen. Und wir können diese orange Farbe als die 10% sehen . Du denkst vielleicht, was ist die blaue Farbe auf dieser Anmelde-Schaltfläche Wie ich bereits sagte, ist 603010 eine Regel, die wir verwenden, um eine Farbpalette leicht zu erkennen und Und wenn ich jetzt runtergehe, haben wir 60% dieser hellcremefarbenen Farbe und 30% schwarze Farbe, und wir haben diese Links in blauer Und wenn ich wieder nach unten gehe, haben wir weiße Farbe als Schwarzbraun und es sind die 60% Dann haben wir 30% schwarze Farbe und 10% violette Farbe. Also ändern sie von Abschnitt zu Abschnitt die Farbkombination, die sie wählen, und sie fügen auch weitere Farben hinzu. Das ist also die Realität. Obwohl wir drei Farbpaletten auswählen, möchten Kunden vielleicht, dass sie dem Design verschiedene Farben hinzufügen In diesen Zeiten müssen wir unsere Anforderungen je nach Kunde ändern unsere Anforderungen je nach Kunde Jetzt kennen Sie die 603010-Regel. Und in der nächsten Lektion werden wir unsere Farbpalette erstellen Wie wir es getan haben, haben wir bereits die Dominant- oder Primärfarbe und müssen jetzt die Sekundär- und Akzentfarbe auswählen. Wir sehen uns in der nächsten Lektion. 5. Die Farbpalette erstellen: Hallo alle zusammen. Jetzt bin ich bei Cool's Dot Go und wir sind bereit, dieses Apfelgrün als unsere dominante Grundfarbe auszuwählen unsere dominante Grundfarbe Und jetzt haben wir vier weitere Farben, aber wir brauchen nur drei Also werde ich diese unnötigen Farben entfernen. Okay, jetzt habe ich diese drei Farben und ich sperre diese Primärfarbe, weil wir nur die Sekundär- und Akzentfarbe wählen müssen . Es gibt also ein paar Möglichkeiten, die Sekundärfarbe auszuwählen. Die eine Methode, Farbpaletten zu nehmen. Ich gehe zu den Kühlern und erkunde Trendpaletten und Und Sie können diese Art von Farbpalette sehen. Und wir verwenden das, um die Farbe zu isolieren. Und Sie können es verwenden, um die passenden Farben zu trennen. Aber es gibt mehr Möglichkeiten, es zu tun, mehr bessere Möglichkeiten Wir haben bereits unsere Grundfarbe, und diese Farbe ist dunkel. Jetzt brauchen wir die Lichtfarbe. Um die Farbe zu überprüfen, die zu dieser grünen Farbe passt. Ich klicke einfach hier und drücke die Leertaste auf der Tastatur du die Leertaste drückst , siehst du dann eine andere Farbe Wenn du die Leertaste drückst , siehst du dann eine andere Farbe. Auf diese Weise können Sie die richtige Farbe auswählen oder sich die Farbe ausdenken , die Sie verwenden möchten. In diesem Fall würde ich gerne Weiß als Sekundärfarbe verwenden. Und dann klicke ich auf dieses Schloss und sperre die Farbe. Jetzt müssen wir die Akzentfarbe finden. Diese Akzentfarbe wird die Farbe sein, die wir für den Text verwendet haben. Ich mag diese Art von dunkler Farbe. Und wenn ich will, kann ich einfach mehr nachschauen, aber ich mag diese dunkle Farbe wirklich. Jetzt habe ich also die drei Farben. Deshalb möchte ich Sie daran erinnern, gemäß der 603010-Regel diese Farben gemäß der 603010-Regel entsprechend den Abschnitten geändert werden Das heißt, wenn die Hintergrundfarbe des Abschnitts weiß ist, können wir diese weiße Farbe als 60% verwenden und wir werden diese dunkle Farbe als 30% verwenden und wir werden diese grüne Farbe als 10% verwenden . Ich werde sie Ihnen auf dem Design zeigen Ich möchte nur , dass wir diese Farben entsprechend den Abschnitten verwenden. Wenn zum Beispiel ein Abschnitt die Hintergrundfarbe des Apfelbaums hat , verwenden wir die Textfarbe als Y. Ich hoffe du verstehst es, jetzt haben wir diese drei Farben Aber wir sind noch nicht fertig, weil wir die Barrierefreiheit berücksichtigen müssen, was bedeutet, dass wir den Kontrast dieser Farben überprüfen müssen den Kontrast dieser Farben überprüfen Falls Sie sich mit der Barrierefreiheit in U X nicht auskennen, lautet die einfache Erklärung Wenn wir ein Design für Benutzer erstellen, sollten wir es so gestalten, dass jeder es problemlos verwenden kann. Wenn Sie ein Produkt sind, das von Menschen mit Behinderungen wie Farbbindung oder Menschen mit eingeschränktem Sehvermögen verwendet Behinderungen wie Farbbindung wird, sollten wir sicherstellen, dass jeder diese App nutzen kann. Und wir erstellen nicht nur eine schöne Benutzeroberfläche, wir denken auch über UA nach. Und wir müssen den Benutzer in den Mittelpunkt stellen und das Design für die Benutzer erstellen. In der nächsten Lektion werde ich Ihnen zeigen, wie Sie den Kontrast überprüfen können. 6. Überprüfung der Farbzugänglichkeit: Jetzt ist es an der Zeit, die Barrierefreiheit zu überprüfen, also müssen wir den Kontrast überprüfen. Um das zu tun, gehe ich zu colortadobby.com. Wenn Sie die Adobcolor-Website aufrufen, werden Sie diese Art von Registerkarte und die Tools zur Barrierefreiheit sehen zu colortadobby.com. Wenn Sie die Adobcolor-Website aufrufen, werden Sie diese Art von Registerkarte und die Tools zur Barrierefreiheit sehen. Ich klicke einfach darauf. Und jetzt habe ich das Contrast Checker Tool. Außerdem habe ich auch ein Tool für Farbenblinde. In diesem Fall klicke ich auf Contrast Checker, gebe dann hier zu und überprüfe das Kontrastverhältnis Ich wähle diese Farbe aus und gehe hierher, dann füge ich die Farbe hier Danach werde ich auch diese Sekundärfarbe auswählen. Wenn wir den Kontrast überprüfen, ist das Kontrastverhältnis sehr niedrig und der Test war nicht erfolgreich. Das heißt, ich muss die hintere Farbe verwenden, denn wenn ich eine Schaltfläche mit dieser grafischen Komponente für Farbschaltflächen erstelle dieser grafischen Komponente für Farbschaltflächen und die hintere Farbe, ein Weiß, verwende , wird das für Missbraucher ein Problem sein Ändern Sie die Textfarbe auf Weiß und die Hintergrundfarbe diese grüne Farbe, trotzdem erhalten wir ein faires Ergebnis Gehen wir nun zur Farbpalette und schauen uns an, wie das mit der Akzentfarbe funktioniert. Ich werde den Text in der Akzentfarbe einfügen und jetzt wird der Text übergeben. Lassen Sie uns die Text - und Hintergrundfarbe ändern. Wenn die Hintergrundfarbe schwarz ist, funktioniert das gut. In unserem Fall müssen wir jedoch die Textfarbe als Schwarz und die Hintergrundfarbe als grüne Farbe hinzufügen . Was wir jetzt tun können, ist diese braune Farbe zu ändern. Ich kann diesen Filter verwenden, um ihn zu ändern, oder ich kann diesen Kontrastvorschlag so anwenden. Okay, es scheint, dass diese Farbe gut funktioniert. Und lassen Sie uns die Geschmacksfarbe auf Grün und die Hintergrundfarbe auf Schwarz ändern . Und es funktioniert gut. Und der Kontrast Precio ist wirklich gut und jetzt müssen wir ihn mit dieser weißen Farbe überprüfen Lassen Sie uns das überdecken und fügen wir die Hintergrundfarbe als weiße Farbe Und in diesem Fall scheitern wir immer noch. Was wir hier also tun sollten, ist mein Vorschlag, ich verwende die Hintergrundfarbe Schwarz. Ich mache die Hauptfarbe oder Grundfarbe, unsere Markenfarbe ist dunkleres Grün. Also werde ich diesen Filter anwenden. Und dann wird Weiß die Hintergrundfarbe sein. Sie können dieses Weiß also anpassen, wenn Sie möchten. Dann lassen Sie uns die Hintergrundfarbe in die Textfarbe ändern. Und in meiner App funktioniert es gut. Handlungsaufforderungen wie Schaltflächen werden grün und der Text dieser Schaltfläche weiß angezeigt. Und das ist die grüne Farbe , die ich auswählen muss. Und lass uns zur Farbpalette gehen und das entsperren. Dann werde ich diese Farbe ändern. Kopieren wir jetzt diese dunklere Farbe. Und ich werde diese Farbe als Textfarbe verwenden. Aber wenn ich diese Textfarbe verwende, werden meine Hintergründe so weiß sein. Wenn wir also diese Methode verwenden, werden wir keine Probleme mit dem Farbkontrast haben. Und wir werden unseren Barrierefreiheitstest bestehen. Spielen Sie also mit diesen Stufen und erzielen Sie das beste Kontrastverhältnis. Okay, jetzt haben wir unsere Farbpalette gefunden. In der nächsten Lektion werden wir darüber sprechen, wie Sie die passende und beste Typografie für die Website finden die passende und beste Typografie für die Website 7. Bonus-Lektion - Einfache Möglichkeiten, Farben auszuwählen: Okay, lassen Sie uns sehen, wie Sie auf einfache und schnelle Weise die richtigen Farben für Sie finden können. Wir können Farben finden oder uns von unseren Konkurrenten inspirieren lassen sodass wir ein Moodboard erstellen und das Design unserer Konkurrenten sammeln können das Design unserer Konkurrenten sammeln Und lassen Sie sich von Websites wie Dribble Bas und Painters vom Design inspirieren Websites wie Dribble Bas Also lass es uns tun. Zuallererst werde ich einen Rahmen auf Figma erstellen und den Rahmen vergrößern Das wird mein Moodboard sein, also werde ich es in Moodboard umbenennen Aber wenn Sie keine Erfahrung mit Fikma haben, machen Sie sich keine Sorgen. Ich werde dir in den nächsten Lektionen zeigen, wie man Sikma benutzt. Beobachten Sie vorerst einfach, was ich mache. Jetzt mache ich mich auf die Suche nach meinen Konkurrenten. Meine Konkurrenten sind also andere Apps für Lebensmittellieferungen und Bäckereien. Ich kann also Place Stow gehen und nach der App für die Lieferung von Lebensmitteln suchen. Okay, jetzt bin ich bei meiner Rechenschaft. Also werde ich nach der App für die Lieferung von Lebensmitteln suchen App für die Lieferung von Lebensmitteln und diese Art von Ergebnis sehen. Sie müssen jedoch die Apps finden, die auf Ihre Nische oder Ihre App beziehen. Das bedeutet , dass Ihre Konkurrenten dann das Bewertungskonto überprüfen und die Designinspiration finden. Wenn ich zum Beispiel auf Apply this gehe und hier den App-Bildschirm überprüfen kann. Ich kann es auch auf meinem Handy installieren und auf diese Weise den Bildschirm überprüfen. Als Nächstes können wir die Designinspirationen auf Websites wie Dribble überprüfen Designinspirationen auf Websites wie Dribble Jetzt bin ich auf Dribble.com und Sie können ganz einfach ein Vorkonto auf Bleble erstellen , einer Website , auf der Designer ihre Arbeit teilen Wenn ich also hierher gehe und nach der App für die Lieferung von Lebensmitteln suche und das Handy auf dem Feld auswähle , werde ich diese Art von Apps sehen Lassen Sie uns einige davon öffnen. Okay, nachdem ich diese App geöffnet habe, werde ich einen Screenshot bekommen. Drücken Sie Chief Command und Poll Mac. Und unter Windows können Sie das Ni Pin-Tool verwenden. Also werde ich den Screenshot oben drauf machen. Lass uns den Screenshot tatsächlich hier drin haben. Wir haben die Farbe, die der App-Hersteller für die Gestaltung der App gewählt Lassen Sie uns also diese Details herausfinden. Wenn wir Designinspirationen wie Dribble finden, erhalten wir meistens unrealistische Designs. Das heißt , wenn wir Designs mit diesen Vorlagen erstellen , so wie sie sind, kann es eine gute Benutzeroberfläche sein, verwenden Sie eine Aber manchmal sind die meisten dieser Designs kompliziert und bieten keine gute In diesem Fall verwenden wir diese Designs jedoch, um uns von Farben inspirieren zu lassen. Wir können diese Designs aber auch verwenden , um uns vom Design inspirieren zu lassen. Aber wenn wir versuchen, uns vom Design inspirieren zu lassen, müssen wir die Benutzerfreundlichkeit überprüfen und die Erfahrung dieser Designs nutzen. Aus diesem Grund sollten wir eine Konkurrenzanalyse durchführen und die Stärken und Schwächen unserer Konkurrenten herausfinden und uns Ideen und Inspiration von unseren Mitbewerbern holen . Okay, jetzt gehe ich zum Figma-Konto und füge all diese Screenshots in das Moodboard ein. Wählen Sie einfach Early Screenshot und klicken Sie auf diese Weise Und jetzt werde ich sie auf den Rahmen legen. Bevor ich das mache, klicke ich auf den Rahmen und ändere die Feldfarbe auf „Gefällt mir“, sodass es dunkler wird. Wir werden die Inspiration, die wir sammeln, leicht finden. Okay, lass uns sie so ansehen. Wenn wir das Moodboard erstellen, versuchen Sie immer, mindestens 20 Designinspirationen So wird es leicht sein, die richtigen Farben zu finden oder sich vom Design inspirieren zu lassen , wenn wir diese überprüfen Außerdem sehen wir deutlich, dass es Farben wie Orange, Hellrot und Grün für die Farben gibt. Das sind die Markenfarben. Und Schwarz ist die Textfarbe und die Hintergrundfarbe ist Weiß. Dies ist also der einfachste Weg , sich von Farben inspirieren zu lassen. Wenn Sie keine Ahnung von Farben haben, können Sie diese Methode verwenden , um Farben auszuwählen. Aber ich kann nur empfehlen, die Farbpsychologie zu bevorzugen und diesen Weg einzuschlagen. Nachdem Sie die Farbe ausgewählt haben und mit der Farbauswahl fertig sind, erstellen Sie jedoch einen Rahmen wie diesen. Und wenn Sie darauf drücken, öffnet die Farbauswahl und ich möchte die grüne Farbe hinzufügen Klicken Sie also auf die grüne Farbe. Und dann möchte ich die braune Farbe der Rückseite hinzufügen. Es ist weiß. Also werde ich das duplizieren, indem ich Alt drücke und es nach rechts ziehe und es auswähle. Drücken Sie dann und wählen Sie die braune Farbe der Rückseite als Weiß aus. Okay, und duplizieren Sie es auch und drücken Sie dann, wir müssen die Textfarbe finden. Die Textfarbe wird diese sein. In Ordnung, jetzt haben wir drei Farben. 8. Grundlagen der Typografie: Die Wahl der richtigen Typografie für die App ist der wichtigste Teil des Designs von UY US Das Verständnis der Grundlagen der Schriftklassifizierung, des Schriftbildes und der Schrift ist unerlässlich, um ein Design zu erstellen, das effektiv kommuniziert und Benutzer problemlos einbezieht Benutzer Lassen Sie uns also über die Typklassifizierung sprechen . Typklassifizierung hat mehrere Kategorien, einzigartige Merkmale. Es gibt zwei wichtigste Typklassifizierungen Serif und San Serif In der Serifenklassifikation hat es kleine dekorative Linien am Ende der Zeichen Diese Schriftzeichen vermitteln einen traditionelleren und formelleren Auf der anderen Seite haben wir die Einteilung nach dem Sunserif-Typus Und die Typenklassifizierung nach Sun Serif hat keine Zeilen am Ende der Zeichen. Diese Telefone sind sauber und modern, was sie für digitale Schnittstellen beliebt macht für digitale Schnittstellen beliebt Dann müssen wir die Schrift und die Schriftart wählen. Lassen Sie uns den Unterschied zwischen Schrift und Schrift herausfinden. Eine Schrift ist ein Design der Zeichen, während eine Schrift der spezifische Stil und die Größe dieses Designs ist der spezifische Stil und die Größe dieses Designs Aerial ist zum Beispiel die Schrift. 42 fix bold ist die Schrift. Sehen wir uns ein anderes Beispiel an. In diesem Fall ist der Typ Face Roboto und der Vorderteil ist 50 Weekel Regular 9. Botschaft und Emotion in der Typografie: Lassen Sie uns herausfinden, wie Sie die richtige Typografie für Ihre App auswählen In dieser Lektion gebe ich Ihnen die grundlegenden Informationen. Und in der nächsten Lektion werden wir das Wissen, das wir in dieser Lektion gesammelt haben , einsetzen um die Typografie auszuwählen , die für unsere App geeignet Und wir werden Websites wie Google Phone verwenden, um das beste Telefon für jede Art von App oder Website zu finden Jede App oder Website hat eine Botschaft und spezifische Emotionen, die den Nutzern Gefühl für den Zweck des Produkts vermitteln. Diese Emotionen und Botschaften sind entscheidend für die Auswahl einer effektiven Typografie Wenn wir die Botschaften betrachten, können wir sie in drei Teile Die sind seriös, war verspielt, modern, der traditionellste Luxus war lässig. Lassen Sie uns über jede dieser Botschaften sprechen. Bei seriösen Nachrichten können wir Klassifizierungen auswählen. Als Beispiel für Play Pool könnten wir zum Beispiel eine serifenlose Klassifikation wählen . Die Eisenbahn ist, wie ich bereits sagte, das beste Beispiel. Im nächsten Video erfahren wir, wie Sie die Phase der Typografie auf Websites wie Google Phone überprüfen der Typografie auf Websites wie Google Phone Dann haben wir die moderne traditionelle Kategorie. Die moderne Kategorie hat eine minimalistische Einteilung in den Sanseriffont-Typ Traditionell haben wir eine Serifenklassifikation und dann haben wir Luxus und Casual Bei Luxusnachrichten können wir elegante Serifenklassifizierungsschriften für Cashewal verwenden, wir können Schriftklassifizierungen wie handgeschriebene oder skriptartige Schriften wir können Schriftklassifizierungen wie handgeschriebene oder skriptartige handgeschriebene Außerdem können wir die richtige Typografie auswählen , die den Emotionen entspricht, die in der App ausgelöst Hauptsächlich gibt es drei Arten von Emotionen. Diese Verletzungen waren energisch, die Schrift schwerwiegend und formell informell. Ich werde Ihnen die Dokumentation , auf die Sie sich beziehen können, zur Verfügung stellen und mehr darüber erfahren , welche Art von Typklassifikation wir entsprechend den Emotionen auswählen können. Nachdem wir die Typklassifizierung unserer App oder Website verstanden haben, müssen wir der Lesbarkeit Priorität einräumen Unabhängig von der Lesbarkeit Ihrer Marke sollten Sie stets oberste Priorität Wählen Sie eine Schrift und Schriftgröße , die für das Auge angenehm sind, insbesondere bei längeren Texten den meisten Fällen werden Sons Phone aufgrund ihrer Klarheit und guten Lesbarkeit auf Bildschirmen häufig für digitale Inhalte bevorzugt aufgrund ihrer Klarheit und guten Lesbarkeit auf Bildschirmen häufig für digitale Inhalte ihrer Klarheit und guten Lesbarkeit auf In der nächsten Lektion werden wir unser Verständnis der Typografieauswahl nutzen , um den perfekten Punkt für unser App-Design auszuwählen den perfekten Punkt für unser App-Design 10. So verwendest du die Google Fonts-Website: Lassen Sie uns herausfinden, wie Sie eine Schriftart für unser Projekt auswählen. Es gibt also nur zwei Möglichkeiten. Die erste Methode besteht darin, die Emotionen und die Botschaft der Marke zu berücksichtigen . Und wählen Sie eine Schriftart entsprechend der Nachricht aus. Und die zweite Möglichkeit besteht darin eine Konkurrenzanalyse durchzuführen und die besten direkten und indirekten Wettbewerber zu finden . Überprüfen Sie dann die Typografie , die sie für das Design verwenden. Lassen Sie uns beide Methoden anwenden. Lassen Sie uns zunächst herausfinden, wie man eine Typhografie entsprechend der Marke auswählt entsprechend Nehmen wir also unser Beispiel als eine Anwaltskanzlei. Die Botschaft einer Anwaltskanzlei ist serifenhaft, was bedeutet, dass es sich um eine Serifenschrift handeln sollte Auch in Bezug auf Emotionen sollte die Botschaft oder das Gefühl ernst sein Das heißt, wir können die fett gedruckte San Serif-Typografie verwenden. Wir haben also zwei Möglichkeiten. Lassen Sie uns zunächst die Typografie zur Klassifizierung von Serifen herausfinden Typografie zur Klassifizierung von Serifen Also gehe ich zu Font.Google.com und Font.Dooogle.com oder Google Font hat eine Sammlung oder Google Font hat eine Sammlung von Schriften, die wir für unser Projekt verwenden können. In der Google-Schriftart haben wir eine Suchleiste. Wenn Sie eine bestimmte Schriftart kennen, können Sie hier so nach Kitten suchen . Also lass uns sehen Wir wollen die Schrift finden, Core Roboto. Als ich danach gesucht habe, ich das Roboto-Telefon bekommen Okay, ich werfe es weg und dann können wir hier etwas eingeben, das in der Textvorschau erscheint Jetzt können wir hier die Größe des Telefons ändern. Danach haben wir Filter. In unserem Beispiel müssen wir die Serif-Typklassifizierung finden Also wähle ich Serif. Bei der Auswahl habe ich diese Art von Punkten bekommen, die sich auf die Klassifikation der Leibeigenen beziehen Wenn wir das Telefon checken, sollte das ernst sein. Scrollen Sie auf den Google-Telefonen herum und suchen Sie den Punkt. In diesem Fall möchte ich diese Art von Pont auswählen. Lass uns auf das Telefon klicken und es öffnet sich so. Hier haben wir den Telefonnamen. Hier haben wir die Telefoncharakteristik. Jetzt kann ich zur Typprüfung gehen. Im Typtest kann ich die Vorschau des Textes in den Überschriften und im Absatztext sehen . Für die Kopfzeile wird das wirklich gut sein, aber für den Haupttext oder den Absatztext wird es nicht gut passen, wird es nicht gut passen weil die Lesbarkeit nicht so gut ist Aber wir können die Schriftgröße und den Buchstabenabstand anpassen und es dann testen, ob es funktioniert oder nicht Wenn ich die Schriftgröße auf 14 Pixel verringere und die Zeilenhöhe auf das Doppelte erhöhe, sieht das vielleicht besser aus, aber ich würde gerne diesen Schriftkopf auswählen und wir müssen eine andere Schrift für den Haupttext finden. Wenn Sie die Schriftart auswählen, sollten Sie außerdem immer den About-Text lesen und sich über Einzelheiten dieser Typografie informieren Weil diese Schrift meistens Eigenschaften hat und der Entwickler dieser Schrift oder der Designer dieser Schrift sie im Abschnitt Über uns erwähnt Also lasst uns die Schrift für den Text finden. Also, um das zu tun, gehe ich auf die Startseite. Okay, jetzt gehe ich wieder zur Google-Schriftart für Seite. Und dieses Mal werden wir Text für den Körper finden. Wenn wir Text für den Hauptteil oder für die Absätze finden, müssen wir der Lesbarkeit Priorität einräumen Die Klassifizierung vom Typ Sansi eignet sich am besten für den Haupttext. Ich klicke auf diesen Sansori-Filter und erhalte diese Jetzt werde ich die Größe auf sagen wir 21 reduzieren. Und jetzt wollen wir herausfinden, welche Schriftart für das Design von Body of the Law Firm geeignet ist. Hier haben wir eine professionell aussehende Typografie. Ich werde darauf klicken und dann kann ich mir das Aussehen der Typografie ansehen Gehen wir also zum Typtest. Und hier haben wir die Vorschau des Absatztextes und ich werde ihn hervorheben. Dann setzen wir die Zeilenhöhe auf 1,25 und dann können wir die Breite der Schrift ändern Lass uns das Was 300 machen, okay. Das ist eine klarere Schrift, also haben wir jetzt zwei Schriften. Zur Auswahl. Die Schrift, wir können einfach das Telefon finden, nach dem wir suchen, und das ist die Typografie Und das ist das Telefon, mit dem es 300 ist. Dann klicke ich auf diese Auswahltaste und hier haben wir alle Details des Telefons. Außerdem, wenn ich zu der Schriftart gehe , die ich zuvor für die Überschrift ausgewählt habe, und wir zum Typtest gehen. Und wir wählen die Größe als 40. Eigentlich ist 40 A wirklich viel für die App, also machen wir es auf 40 und es werden 400 sein. Dann haben wir hier schnell die Details dazu. Und jetzt haben wir die Schriftart, die ausgewählt ist. Und auf Figma können wir diesen Text in den Schriftbereich eingeben und die Typografie auswählen In zukünftigen Lektionen werde ich Ihnen zeigen, wie Sie diese Schriftarten im Figma-Design verwenden, und in der nächsten Lektion werden wir die Schriftart für unsere Essensliefer-App auswählen 11. Schriftarten für eine neue App zum Lieferservice auswählen: Okay, lassen Sie uns die Typografie für unsere App für die Lieferung von Lebensmitteln auswählen. Die Botschaft der App für die Lieferung von Lebensmitteln ist also modern, was bedeutet, dass wir uns für eine minimalistische Klassifikation ohne Serifen entscheiden müssen minimalistische Klassifikation ohne Serifen entscheiden Wenn wir also die Emotionen dieser App für die Lieferung von Lebensmitteln überprüfen, sollte sie voller Energie sein Die Klassifizierung des energetischen Typs lautet also San Serif. Gehen wir also zum Google-Telefon und klicken auf Filter. Wählen Sie dann Sanserif. Und hier haben wir die Schrift . Wählen wir also die Schriftart für unsere App aus. Mein Plan ist, ein Telefon oder eine Typografie für die gesamte App auszuwählen Sie bei der Auswahl eines Punkts immer daran, einen oder zwei Punkte auszuwählen Sie müssen sich an die Schlüssel erinnern, an das UX-Design-Prinzip, was bedeutet, es einfach zu halten Blödes UF-Design niedrig. Ich mag dieses schicke Telefon. Öffnen wir es in einem neuen Fenster und scrollen wir nach unten, um andere Optionen zu finden Ich möchte ein Telefon, das modern aussieht. Ich mag dieses M plus eine Schrift, also lass uns zwei draufklicken. Und lass uns zum Typtester gehen. Und im Typtest werde ich die Größe der Kopf-Typografie auf 32 ändern, und die Absatzgröße wird 16 Pixel und die reguläre 400 Pixel betragen Ich denke, das passt zusammen. Also lass es uns auswählen. Und dann müssen wir, wir sind bereit, zwei auszuwählen. Und jetzt gehen wir zu diesem Molis-Schrift - und Typtest im Type Tester, ändern die Schriftgröße auf 32, 16, das Gewicht ist vorbei Okay, lass uns das auch auswählen. In Ordnung, jetzt haben wir hier die Schriftarten, die wir ausgewählt haben. Um diese Schrift herauszufinden, klicken Sie einfach auf diese Car Ton. Und hier findest du die Schrift. Gehen Sie auch zum Abschnitt Über uns, und hier können Sie die Informationen über uns sehen. Diese Schriftart ist eine minimalistische Sensorschrift sowohl für Display - als auch für Texttypografie entwickelt wurde Und hier sind Details. Also ich mag dieses Telefon wirklich und wir werden dieses Telefon benutzen, den Header- und Absatztext in unserer App zu testen. So wähle ich das Telefon aus. Es gibt Premium-Telefone und auf Google-Handys finden Sie kostenlose und professionelle Telefone. Ich muss sagen, dass es keinen richtigen oder falschen Weg gibt , einen Punkt auszuwählen Das einzige, was Sie beachten sollten, ist die Lesbarkeit. Priorisieren Sie immer die Lesbarkeit und Barrierefreiheit. Sogar du findest eine tolle Schrift und fügst sie deinem Design hinzu Dann stimmt der Kontrast nicht überein und Benutzer können die Botschaft, die Sie sagen, nicht leicht erkennen, sie können sie nicht lesen. Das heißt, versuche immer die Schrift entsprechend der App anzupassen. Sie können die Schriftgröße, die Schriftbreite und den Zeilenabstand erhöhen , damit Benutzer die Schrift und den Absatz leichter lesen und die Nachricht verstehen können. 12. Ikonografie: Stellen Sie sich eine Welt ohne Sprachbarrieren vor. Eine Welt, in der jeder dieselbe Sprache spricht. Eine Sprache der Symbole. Das ist die Macht der Ikonographie. Ikonen sind mehr als nur Bilder. Sie sind ein leistungsstarkes Tool, das Benutzer anleiten, Informationen vermitteln und Ihr Design ansprechender gestalten kann . Durch die effektive Verwendung von Symbolen können Sie das Benutzerverständnis verbessern. Klar und konsistent. Icon kann Benutzern helfen, sich Ihrer Benutzeroberfläche zurechtzufinden und sie zu verstehen Funktionalität, auch wenn sie die Sprache des Designs nicht sprechen Steigern Sie das Engagement. Ein gut gestaltetes Symbol kann das Design visuell interessanter machen und Benutzer dazu anregen, verschiedene Funktionen zu erkunden und Platz zu sparen. Icon kann viele Informationen auf kleinem Raum vermitteln und eignet sich daher ideal für Websites und mobile Apps, daher ideal für Websites und da der Platz auf dem Bildschirm begrenzt ist. Lassen Sie uns herausfinden, wie Sie die richtigen Symbole auswählen. Die Verwendung der richtigen Symbole ist für die Maximierung ihrer Effektivität unerlässlich . Hier sind einige Dinge, die Sie bei der Auswahl des Symbols für Ihr Projekt beachten sollten Auswahl des Symbols für Ihr Projekt Klarheit, der wichtigste Faktor ist, dass das Symbol von Ihrer Zielgruppe leicht verstanden wird. Es sollte einfach, vertraut und leicht interpretierbar Kohärenz. Verwenden Sie Symbole aus demselben Set oder Bibliothek, um einen einheitlichen visuellen Stil in Ihrem gesamten Design beizubehalten . Auf diese Weise fühlen sich die Benutzer mit Ihrem Benutzeroberflächenkontext kompatibel und vertraut. Berücksichtigen Sie den Kontext , in dem das Symbol verwendet werden soll. Die Bedeutung des Symbols kann sich je nach den umgebenden Elementen ändern. Barrierefreiheit: Stellen Sie sicher, dass Ihre Symbole Benutzer mit Behinderungen zugänglich sind. Das kann bedeuten, schnelle Farben zu verwenden, LT- oder alternative Textbeschreibungen bereitzustellen und sicherzustellen, dass die Symbole groß genug sind, damit sie gut zu sehen sind. Jetzt denkst du vielleicht, dass wir nach Symbolen suchen müssen. Es gibt viele Orte, an denen Sie hochwertige Icons für Ihr Designprojekt finden können . Hier sind einige beliebte Prätionen: Das sind Pontosm, Google Material Icons, das Substantiv Project. Hier einige kostenpflichtige Versionen. Ich kann eine Stockfotografie-Website wie Do Stock und Hutto finden wie Do Stock und Hutto Sobald Sie Ihre Symbole ausgewählt haben, ist es wichtig, sie effektiv in Ihrem Design zu verwenden Hier sind ein paar Tipps. Überladen Sie Ihr Design nicht mit Symbolen. Zu viele Symbole können Benutzer überfordern und verwirren. Kombinieren Sie das Symbol mit Text. Wenn Sie ein unbekanntes Symbol verwenden, ist es hilfreich, es mit einer Textbeschriftung zu kombinieren , um es zu erklären Das heißt, verwenden Sie den Hover-Status. Wenn der Benutzer den Mauszeiger über ein Symbol bewegt, kann ein Tooltip erscheinen, der seine Funktion erklärt Testsymbole. Es ist wichtig, dass Sie Ihre Symbole mit Benutzern testen , um sicherzustellen, dass sie klar und verständlich sind. diese Tipps befolgen, können Sie Symbole oder Grafiken verwenden, um ein benutzerfreundlicheres und ansprechenderes Design zu erstellen . 13. Design-System: Stellen Sie sich ein Designsystem als Werkzeugkasten für Ihr UF-Design vor. Es ist eine Sammlung wiederverwendbarer Komponenten wie Schaltflächen, Symbole, Layouts und Designrichtlinien Alles, was Sie für ein visuell einheitliches und benutzerfreundliches Erlebnis Warum sollten Sie also Zeit investieren , um mehr über das Designsystem zu lernen? Hier sind ein paar wichtige Gründe. erhöht es die Konsistenz Stellen Sie sich eine Website vor, der die Schaltfläche auf jeder Seite anders aussieht Es ist verwirrend und frustrierend für Benutzer. Designsystem, stellen Sie sicher, dass Ihre Markenidentität in allen Faktenformen konsistent bleibt in allen Faktenformen konsistent Und auf diese Weise Vertrauen und Anerkennung aufzubauen , ist effektiv. das eigentliche Designsystem nicht mehr im Voraus erfinden. Sie sparen wertvolle Zeit und Mühe, indem Sie vorgefertigte Komponenten bereitstellen , die Sie einfach anpassen und in Ihr Projekt integrieren können anpassen und in Ihr Projekt integrieren Unterstützen Sie die Zusammenarbeit und vergessen Sie Kommunikationsausfälle. Designsysteme dienen als zentrale Informationsquelle. Förderung eines klaren Verständnisses und der Zusammenarbeit zwischen Designern, Entwicklern und anderen Interessengruppen Sie hervorragende, in den USA vertraute Benutzeroberflächen mit individuellen Komponenten und Erstellen Sie hervorragende, in den USA vertraute Benutzeroberflächen mit individuellen Komponenten und einem konsistenten Layout, die Benutzern die Navigation und Interaktion mit Ihrem Produkt erleichtern Benutzern die Navigation und Interaktion mit Dies führt letztendlich zu einer großartigen, unterhaltsamen und ansprechenden Benutzererfahrung Jetzt denken Sie vielleicht darüber nach Ihr eigenes Designsystem von Grund auf neu zu erstellen. ist zwar eine Option, erfordert jedoch viel Zeit und Ressourcen. Erwägen Sie stattdessen, die vielen verfügbaren Konstruktionssysteme zu erkunden die vielen verfügbaren Konstruktionssysteme , von denen jedes seine eigene Stärke und Eigenschaften aufweist. Hier sind einige beliebte Beispiele: Google Material Dieses vom Google Material Design-System entwickelte Designsystem bietet eine umfassende Reihe von Komponenten und Richtlinien für die Integration moderner und schöner Benutzeroberflächen. Apple-Richtlinie für Benutzeroberflächen, Apples HIG, enthält detaillierte Spezifikationen für die Gestaltung Apps, die sich innerhalb des CO2-Designsystems des Apple-Ökosystems wohlfühlen. Das Carbon Design System von IBM konzentriert sich auf Barrierefreiheit und Inklusivität und stellt sicher, dass Ihre Produkte von allen genutzt werden können Wenn Sie mehr über diese bestehenden Designsysteme und deren Funktionsweise erfahren, können Sie nicht nur Ihre X-Kenntnisse verbessern, sondern auch wertvolle Einblicke in bewährte Verfahren und 14. UX-Prinzipien und Gesetze: Beim Erstellen einer mobilen App geht es nicht nur über das Aussehen und die Funktionalität der App nachzudenken, auch darum, den Benutzer zu verstehen. Und stellen Sie den Benutzer in den Mittelpunkt, was bedeutet, dass wir die Bedürfnisse der Benutzer priorisieren müssen Und gestalten Sie unsere App so, Lösungen für die Probleme der Benutzer bietet. Um dies zu tun, haben wir Ux-Prinzipien. In dieser Lektion lernen wir das X-Prinzip kennen. Das erste Prinzip ist nutzerzentriertes Design. Stellen Sie sich eine Welt vor, in der Websites und Apps unter Berücksichtigung Ihrer spezifischen Bedürfnisse und Vorlieben entworfen werden. Das ist die Essenz von nutzerzentriertem Design. Diese Philosophie stellt uns in den Mittelpunkt jeder Entscheidung. So funktioniert es. Zunächst müssen wir uns in den Benutzer hineinversetzen, was bedeutet, dass wir in der Lage des Benutzers arbeiten und seine Bedürfnisse, Ziele, Frustrationen und mentalen Modelle durch Recherche und Beobachtung verstehen Ziele, Frustrationen und mentalen Modelle durch Recherche und Beobachtung Dann müssen wir frühzeitig und regelmäßig Nutzerforschung betreiben. Warten Sie also nicht bis zum Ende des Projekts. Holen Sie sich während des gesamten Designprozesses Feedback , um Ihr Produkt kontinuierlich zu verfeinern und zu verbessern. Dann müssen wir Prototypen erstellen und sie mit echten Benutzern testen. Diese Feedback-Schleife hilft uns Probleme mit der Benutzerfreundlichkeit frühzeitig zu erkennen und zu beheben. Dann müssen wir uns auf die gesamte Reise konzentrieren. Jeder Berührungspunkt ist wichtig und wurde nicht nur für einzelne Funktionen konzipiert , sondern für die gesamte Erfahrung Benutzer mit Ihrem Produkt haben. Das zweite Prinzip ist Konsistenz. Es hilft uns, Vertrauen und Vertrautheit mit allen aufzubauen. Stellen Sie sich vor, Sie gehen in ein Restaurant , in dem sich das Layout bei jedem Besuch ändert Es wäre frustrierend, oder? Konsistenz in UX ist wie ein vertrautes Layout Ihres Lieblingsrestaurants Es fördert ein Gefühl von Vertrauen und Vertrautheit. Erleichtern Sie Benutzern die Navigation und Interaktion mit Ihrem Produkt. Hier ist ein wichtiger Aspekt der Konsistenz, der erste ist das visuelle Design. Achten Sie auf die Konsistenz von Schriftarten, Farben, Layout und Symbolen auf allen Benutzeroberflächen. Dann sollten wir uns mit der Navigation befassen. Halten Sie also die Navigationsstruktur auf verschiedenen Seiten und Abschnitten konsistent. Dann Terminologie. Verwenden Sie einheitliche Terminologie und Fachjargon , um Klarheit und Verständnis zu gewährleisten. Jetzt haben wir Prinzipien der Barrierefreiheit Barrierefreiheit trägt dazu bei, inklusives Design für alle zu schaffen . Stellen Sie sich eine Welt vor , in der Sie unabhängig von Einschränkungen auf die digitale Welt zugreifen und sie genießen können. Barrierefreiheit in UX stellt sicher, dass das Produkt für alle nutzbar und inklusiv ist, auch für Menschen mit Behinderungen. Hier sind die wesentlichen Aspekte der Barrierefreiheit. Wcag-Konformität Folgen Sie den Webinhalten. Die Richtlinien zur Barrierefreiheit sind kurzfristig. Mithilfe der WCAG-Richtlinien können Sie sicherstellen, dass Ihre Website oder App Nutzer mit unterschiedlichen Fähigkeiten und klarer und einheitlicher Sprache zugänglich ist und klarer und einheitlicher Vermeiden Sie Fachjargon und Fachausdrücke . Verwenden Sie eine einfache und unkomplizierte Sprache , die jeder verstehen kann Alternativer Text für Bilder, geben Sie beschreibenden Text für Bilder an. Dann haben wir Gist-Prinzip Stellen Sie sich eine Website vor, Informationen zersplittert Es wäre schwer nachzuvollziehen und zu verstehen, warum Sie mithilfe dieser Prinzipien eine benutzerfreundliche, visuell ansprechende Oberfläche erstellen können mithilfe dieser Prinzipien eine benutzerfreundliche, visuell ansprechende Oberfläche Im US-amerikanischen Design gibt es drei Hauptprinzipien in den Gita-Prinzipien Diese sind Ähnlichkeit, Nähe und gemeinsame Region. Ähnlichkeit bedeutet gruppenbezogene Elemente , die Merkmale wie Farbe, Größe, Formen, die die Klarheit verbessern, und die Organisation gemeinsam wie Farbe, Größe, Formen, die die Klarheit verbessern, und die Organisation Nähe bedeutet, verwandte Elemente nahe beieinander zu platzieren , um sie visuell miteinander zu verbinden und die Aufmerksamkeit der Nutzer zu lenken Der gemeinsame Bereich besteht aus zusammenhängenden Elementen innerhalb einer gemeinsamen Grenze, um eine eigene Gruppe zu bilden und den Fokus zu erhöhen. Durch die Kombination von nutzerzentriertem Design , Konsistenz, Barrierefreiheit und Gstar-Prinzipien können Sie eine UX schaffen, die nicht nur funktional und effizient ist, sondern auch für alle unterhaltsam, ansprechend und inklusiv Denken Sie daran, dass das ultimative Ziel von UX darin besteht , das Leben der Benutzer einfacher und angenehmer In zukünftigen Lektionen werden wir diese Prinzipien für unser Design anwenden und die Erfahrung machen , wie uns diese Prinzipien bei realen Projekten helfen werden. 15. Informationsarchitektur (IA): schon einmal Schwierigkeiten haben, Informationen auf einer Website zu finden, oder eine gute Informationsarchitektur macht es Benutzern leicht, das zu finden, was sie benötigen, es zu verstehen und zu verwenden. Es ist eine sichtbare Kraft hinter einer großartigen Benutzererfahrung. Stellen Sie sich die AO-Informationsarchitektur als Landkarte vor. Sie müssen sich an einem neuen Ort zurechtfinden. Es sollte klar, bewusst und leicht nachzuvollziehen sein. Sonst wirst du dich verirren und frustrieren. Deshalb ist eine gute KI wichtig. Auffindbarkeit: Benutzer können leicht finden, was sie benötigen, egal ob es sich um einen versteckten Blockpost für ein Produkt oder um Kundensupport Informationen zur Verständlichkeit sind klar bewusst und logisch strukturiert Verwendung in der Sprache Jeder grafisch, benutzerfreundlich , die Navigation ist intuitiv So können sich Benutzer wirklich bewegen und relevante Informationen ohne Frustration finden Hier sind also die wichtigsten Prinzipien von Gut Es ist klar und einfach. Verwenden Sie nur einfache Sprache und vermeiden Sie Jargon. Es ist eine hyderartische Struktur , was bedeutet, Informationen logisch zu gruppieren, vom Board aus zu beginnen und sich aus der spezifischen Nutzbarkeit und Auffindbarkeit heraus zu verzweigen , was bedeutet, Informationen logisch zu gruppieren, vom Board aus zu beginnen und sich aus der spezifischen Nutzbarkeit und Auffindbarkeit heraus zu verzweigen. Priorisierung von Such- und Filterfunktionen in Tools Konsequenz und Vorfreude, was bedeutet, dass während des gesamten Entwurfs ein einheitlicher Stil und ein einheitliches Layout beibehalten gesamten Entwurfs ein einheitlicher Stil und ein einheitliches Layout Und hier ist der Weg, um eine effektive Informationsarchitektur aufzubauen eine effektive Informationsarchitektur der Art und Weise basiert auf der Art und Weise basiert, wie Benutzer sie speichern . Evaluieren Sie vor dem Testen, wie sich Benutzer in der Informationsstruktur zurechtfinden Lagepläne bieten einen visuellen Überblick über die Struktur der Wellenstandorte. Nutzerresonationen definieren Ihre Zielgruppe und deren Informationsbedürfnisse Prüfung von Inhalten, Analyse vorhandener Inhalte auf Relevanz, Richtigkeit und Organisation 16. Vor- und Nachteile von Figma und Erstellen eines Figma-Kontos: Okay, lassen Sie uns ein Konto bei Figma erstellen. Klicken Sie also auf den Link Beschreibung und Sie gelangen zu Figma.com. In Figma klicken Sie auf Und in diesem Popup können Sie Ihre E-Mail-Adresse verwenden und Google übergeben oder weitermachen Ich werde auf Weiter mit Google klicken. Hier wähle ich mein Gmail-Konto aus. Okay. Ich bin hier drin, ich kann den Namen hinzufügen. Also füge ich meinen Namen hinzu und klicke dann auf Weiter. Hier muss ich auswählen, welche Art von Arbeit ich mache. Also klicke ich auf Design und dann auf Weiter. Wählen Sie einfach die erforderlichen Optionen aus und fahren Sie fort. Hier kann ich andere Mitglieder oder meine Teammitglieder einladen. In diesem Fall klicke ich auf die Schaltfläche Überspringen. Jetzt haben wir eine Frage. Was führt dich heute nach Fima? Also klicke ich auf Andere und dann auf Weiter. Klicken Sie so und klicken Sie auf Weiter. Und hier klicken Sie auf Starter und dann auf Weiter. Ich werde diesen Teil überspringen. Hier erstellen wir unser Fima-Konto. Jetzt werde ich ein Design erstellen. Klicken Sie dazu auf diese Designdatei und dann auf Entwurf. In Ordnung, hier können wir das Design erstellen, das wir wollen. Zuallererst werde ich diesem Design einen Namen geben. Um das zu tun, klicken Sie auf diesen Dateinamen. Derzeit ist es ohne Titel. Ich werde es umbenennen. Schauen Sie zuerst, drücken Sie die Eingabetaste, und jetzt haben wir hier Optionen , um das Design zu erstellen. Wir nennen diesen Teil also die Leinwand, oder wir können ihn Zeichenfläche nennen Und hier haben wir Optionen, um Elemente wie Rahmen, Formen und Linien mit Bleistiften auszuwählen und zu erstellen Formen und Linien mit Bleistiften auszuwählen und Und hier haben wir Texte. Und wir haben auch die Schaltfläche „ Ressourcen“. Und wir haben Handwerkzeuge. Und hier haben wir die Befehlstaste. Lassen Sie uns also einen Rahmen erstellen. Ich klicke einfach hier und wenn ich darauf klicke, erhalte ich die vorgefertigten Rahmengrößen. In diesem Fall wähle ich die Größe iPhone 13.14 und das ist der Rahmen Wenn wir also unsere App erstellen, bauen wir sie auf diesem Frame auf Also werde ich diesen Frame in Home umbenennen. Und jetzt werde ich ein Rechteck erstellen. Um das zu tun, klicke ich hier, dann das. Wenn ich hier ein Rechteck erstelle, habe ich die Eigenschaften des Rechtecks. Also können wir die Breite hier und hier so ändern . Und wir können die Füllfarbe ändern, bumm hier. Wir können also Konturen hinzufügen und wir können Schatten hinzufügen. Und es gibt viele Möglichkeiten. Also erstelle ich jetzt einen Text. Um das zu tun, klicken Sie auf dieses Symbol und dann hier. Dann lass uns verdammt nochmal Text hinzufügen. Okay, und jetzt werde ich so zentrieren. Dann kann ich hier die Schrift ändern. Ich werde es wie Poppins ändern und die falsche Größe wird 45 sein. Dann mach es halbfett. Und machen Sie den Text mittig richten Sie ihn in der Mitte Und hier können wir die Farbe ändern. Hier können wir also andere Arten von Formen wie diese auswählen. Und in dieser Hand können wir die Leinwand überprüfen. Wenn diese Leinwand viele Rahmen hat, können wir einfach auf und ab gehen und sie nach Belieben überprüfen. Jetzt haben wir also diese Kommentaroption. Fima ist ein kollaboratives Tool. Wenn Sie ein Team haben und etwas erwähnen möchten, können Sie einfach auf diesen Kommentar klicken und einen Kommentar abgeben Ich möchte hier einen Kommentar hinzufügen. Also klicke ich hier und füge den Kommentar hinzu, also tausche das Feld gegen den Test ein und trete zuerst ein. Und wenn Sie mit der Maus darüber fahren, können Sie den Kommentar sehen , den Sie hinzugefügt haben Und es kann auch das Teammitglied Ihres Teams sehen. Sie können Teammitglieder auch auf diese Weise erwähnen und bei Signieren darauf klicken und die Benutzer unter dem Namen Ihres Teammitglieds hinzufügen . In diesem Fall haben wir keine Teammitglieder, ich werde mich selbst so erwähnen. Dann können wir Bilder hinzufügen und auch Bilder hochladen. Spielen Sie einfach damit. Und auf Ihrer linken Seite können Sie den Rahmen und die Elemente sehen , die erstellt wurden. Wir haben also diese Assert-Panels, und in zukünftigen Lektionen werden wir viele dieser Abschnitte und Details durchgehen . Jetzt habe ich diese Schaltfläche „Mehr“ und hier haben Sie eine Schaltfläche „Präsentieren“. Wenn Sie darauf klicken, wird das Design in Figma so geöffnet Wir können diese Markups oder Designs auch in Prototypen umwandeln , und wir werden in zukünftigen Lektionen sehen, wie sie funktionieren Außerdem haben wir die Möglichkeit, das Design zu teilen, wenn ich auf die Schaltfläche „Teilen“ klicke. Dann erhalte ich einen Link zu diesem Design, den ich teilen kann erhalte ich einen Link zu diesem Design, den ich teilen kann Das sind also die grundlegenden Dinge , die Sie über Figma wissen müssen Und in Zukunft werden Sie die Figma beherrschen und in der Lage sein, das Figma-Design auf einfache Weise zu erstellen 17. Gitter-Layout: Okay, machen wir uns jetzt mit Gittern vertraut. Also werde ich diesen Formularrahmen entfernen und drei Frames erstellen. Also werde ich diese Kommentare entfernen, löschen. Und jetzt werde ich Frames erstellen. Also klicke ich zuerst auf den Rahmen und erstelle einen Rahmen in Formulargröße. Und dann erstelle ich einen weiteren Rahmen, und dieser wird die Größe eines Tablets haben. Auf einem Tablet wird ein Rahmen in dieser Größe und auch ein Rahmen in Desktop-Größe erstellt. In Ordnung, jetzt haben wir drei Frames. Wenn wir unser UI-Element entwerfen, sollten wir darüber nachdenken, wie wir diese Objekte so ausrichten können, dass wir das Layoutraster für die Ausrichtung verwenden können . Zunächst klicke ich auf den Rahmen und dann auf dieses Layout Grid Plus. Und jetzt haben wir diese Art von Rasterlayout. Lass uns die Größe erhöhen. Hier klicke ich auf diese Rasterlayout-Einstellung. Hier klicke ich von oben nach unten und klicke auf Spalte. Dies ist ein Telefon zwischen den Stützpunkten. Ich wähle die Spaltenanzahl auf fünf und füge den Rand etwa 20 hinzu, was bedeutet, dass wir einen Abstand von 20 Pixeln haben. Okay. Und Dachrinne ist die Größe zwischen zwei Elementen Also werde ich sagen, Dachrinne bis 50, so. Und lass es uns mit dem iPad Mini machen Und wählen Sie den iPad Mini-Tablet-Rahmen aus. Und klicken Sie auf Layout Grid und klicken Sie hier. Wählen Sie dann Spalten aus. Hier stelle ich die Anzahl der Spalten auf sechs und den Rand auf 30 und den Abstand auf 15 Okay. Sie können diese Leerzeichen nach Ihrem Design ändern. Auf diese Weise habe ich das Layout erstellt. Gehen wir zu Desktop Frame. Klicken Sie auf Layoutraster. Klicken Sie hier, Spalte festlegen. Im Desktop-Layout sind es dann 12 Spalten und der Rand beträgt 140. Aber ich werde 20. Das ist also das Aussehen des Designs. Wenn ich also zur Desktop-Version gehe und jetzt ein Rechteck erstelle, kann ich es nach diesen Rastern wie diesem ausrichten Aus diesem Grund sollten wir in Betracht ziehen, ein Rasterlayout zu erstellen , um die Ausrichtung unseres Designs zu verstehen In der nächsten Lektion werden wir herausfinden, wie Sie das automatische Layout verwenden und unser Design einfach erstellen können. 18. Grundlagen des automatischen Layouts: Als ich anfing, das automatische Layout zu verwenden, war ich verwirrt. Die Verwendung des automatischen Layouts bietet jedoch viele Vorteile. Der größte Vorteil ist , dass Sie Zeit sparen können , indem Sie das automatische Layout auf Ihr Design anwenden. Denn wenn wir kein automatisches Layout verwenden, müssen wir die Positionen manuell anpassen. wir nach der Erstellung eines Designs Wenn wir nach der Erstellung eines Designs Inhalte oder mehr Elemente zu einem Abschnitt des Rahmens hinzufügen möchten , müssen wir dafür nur den gesamten Rahmen verwenden. Aber wenn wir das automatische Layout verwenden, können wir einfach Elemente hinzufügen, wie wir wollen und das Layout passt sich den Elementen an. Außerdem können wir mit dem automatischen Layout ein ansprechendes Design erstellen , das sich erstreckt. Wenn wir die Bildschirmgröße ändern, werden die Elemente je nach Rahmen kleiner oder größer Okay, fangen wir an, ein Design mit automatischem Layout zu erstellen. Also werde ich diese Rahmen entfernen und einen Rahmen für das Telefon erstellen. Also werde ich diesen iPhone 15 Pro Frame auswählen. Okay, fügen wir diesem Rahmen ein Layoutraster hinzu , damit wir die Ausrichtung leichter überprüfen können. Stellen Sie sicher, dass die Anzahl der Spalten fünf, Rand 15 und der Zwischenraum 15 beträgt Okay, als ersten Schritt, um die Leistungsfähigkeit des automatischen Layouts zu verstehen, werde ich zwei Schaltflächen erstellen Für die erste Schaltfläche werde ich die Option für das automatische Layout nicht verwenden. Und mit der zweiten Taste werde ich das automatische Layout verwenden. Also lass uns die erste Schaltfläche erstellen. Dazu klicke ich auf das Rechteck und erstelle eine Flasche wie diese. Okay? Und lassen Sie uns die Füllfarbe auf Rot ändern. Und fügen wir Ecken wie 15 hinzu. Dies ist der Hintergrund der Schaltfläche. Und jetzt klicke auf den Text. Und lass uns den Text hinzufügen. Klicken Sie auf OK. Jetzt können wir Text wie Roboto hinzufügen. In Roboto Naked Medial wird die Größe 30 Okay, jetzt lege ich diesen Text auf das Rechteck und lass uns die Füllfarbe ändern Warum diese beiden Texte hervorheben? Und drücken Sie den Befehl G, um es zu gruppieren. Dann klicke ich auf diesen Text und eine Zeile in der Mitte. Und klicke auf Text, eine Linie als horizontale Linienmitte. Und jetzt klicke ich auf den Button. Und lass es uns so machen. Und nehmen wir an, wir müssen die obere Polsterung 15 und die untere Polsterung 15 hinzufügen Um das zu tun, werde ich diesen Text auf 15, 15 anpassen. Und dann nehmen wir an, dass wir die rechte und linke Polsterung 50 hinzufügen müssen rechte und linke Polsterung 50 hinzufügen Um die Polsterung zu überprüfen, können Sie auf das Element klicken, das Sie überprüfen möchten Und drücken Sie hier alles so rein. Wir müssen daraus 50 machen. Um das zu tun, müssen wir es manuell so anpassen. Neun. Okay, hier sind 15 und wir müssen das Gleiche tun. Okay, jetzt haben wir hier eine Flasche. Lassen Sie uns also dieselbe Flasche mit automatischem Layout erstellen. Dazu klicke ich auf den Test und erstelle einen Test mit dem Namen Click Me. Jetzt klicke ich auf Shift A. Shift A ist eine Abkürzung, um ein automatisches Layout zu erstellen. Okay? Text wird einfach zum automatischen Layout. Wenn wir auf der rechten Seite nachsehen, sehen wir diesen Abschnitt zum automatischen Layout. Und in diesem automatischen Layout können wir die Textposition nach Belieben ändern. Okay, im automatischen Layout können wir nach Belieben Polsterung hinzufügen Klicken Sie einfach auf diese individuelle Polsterung und wir müssen die linke und rechte Polsterung als 15 hinzufügen Und die obere Polsterung, mal sehen, obere Die obere Polsterung wird 15 sein. Bevor ich das mache, muss ich es so machen. Und jetzt rote obere Polsterung, 15, 15. Okay, jetzt fügen wir die Füllfarbe hinzu. Die Füllfarbe wird stimmen und die Textfarbe wird schwarz sein. Okay, jetzt an den Ecken, also werden die Ecken 15 sein. Hier sind die beiden Knöpfe, okay? Dann klicke ich auf den Text und klicke hier und mache ihn zum Inhalt. Und erstelle auch diesen Inhalt, was bedeutet, dass die Größe entsprechend dem Text geändert wird . Lassen Sie uns diesen Text so ändern, dass er eins nach dem anderen gefällt. Holen Sie sich eins nach dem anderen kostenlos. Holen Sie sich eins gratis. Okay. Lass es uns jetzt so ausdrücken. Und wenn wir hier dasselbe machen wollen, machen wir es wie bei eins, bekommen ein kostenloses C, wir müssen den Inhalt manuell so anpassen. Deshalb sage ich das automatische Layout wirklich mächtig ist und nicht so. Wenn wir die Polsterung und den Rand ändern wollen. Lassen Sie uns also den linken Abstand auf 30 setzen. Wir müssen nur hier klicken und wir können es einfach so anpassen Oder wenn wir darauf klicken, erhalten wir diese Art von Pop-up. Und hier können wir die Größen hinzufügen. Wir können hier hingehen und es von hier aus hinzufügen. Okay? Okay. In diesem Fall müssen wir es manuell so anpassen, wenn wir es tun wollen . Dies ist nur ein einfaches Beispiel. Aber in Zukunft werden Sie die wahre Stärke des automatischen Layouts sehen . Lassen Sie uns diesem Frame auch ein automatisches Layout hinzufügen. Wählen Sie dazu den Rahmen aus und Sie können direkt diese Plus-Schaltfläche des automatischen Layouts auswählen. Oder Sie können die Umschalttaste drücken. In diesem Fall klicke ich einfach auf diese Plus-Schaltfläche. mal sehen, wir wollen diese beiden Schaltflächen auf Horizontal setzen. Klicken Sie dazu einfach auf die Schaltfläche Horizontales Layout, und diese beiden werden zu Horizontal. Und wenn wir vertikal wollen, können wir einfach auf Vertikal klicken. Und lassen Sie uns die Größe zwischen diesen beiden Objekten so ändern . Lassen Sie uns 20 davon ausgehen, dass wir diese beiden Designs an den Rahmen anpassen wollen . Klicken Sie dazu auf das Objekt und anschließend auf den Schälbehälter mit horizontaler Größenänderung. Jetzt sehen Sie, dass unsere Schaltfläche über das Randraster hinausgeht. Um das Problem zu beheben, können wir einfach die Polsterung links und rechts ändern. Klicken Sie hier, wir können es wie 15 hinzufügen und es wird automatisch 15. Wenn wir jetzt die Position ändern müssen, können wir auf das Layout klicken und die Position wie folgt ändern. Dies ist eine wirklich leistungsstarke Methode, um einen Bot zu erstellen und zu entwerfen, und das ist der Vorteil des automatischen Layouts. In Zukunft werden wir mehr über das automatische Layout erfahren und App für die Lieferung von Lebensmitteln mit dieser automatischen Layoutfunktion erstellen . Und ich werde all diese Optionen durchgehen. Recherchieren Sie in der Zwischenzeit oder spielen Sie einfach mit diesen Optionen herum und lernen Sie, wie sie funktionieren. Wie ich bereits sagte, war das für mich sehr kompliziert, als ich anfing. Aber wenn ich versuche, die Optionen des automatischen Layouts anzupassen, wird es einfach, das Design zu erstellen , an dem ich arbeite. Lassen Sie uns eine weitere Option erstellen. Also klicken Sie einfach hier und ändern Sie es auf 60. Lassen Sie uns in dieser Zeit einen Rahmen erstellen und die Farbe des Rahmenfeldes in Blau ändern. Machen wir 15 als Ecken. Jetzt werde ich diesen Rahmen so duplizieren. Drücken Sie also Strg C, tut mir leid. Wählen Sie einfach den Rahmen und steuern und steuern Sie. Okay, ändere jetzt die Farben auf Grün und diese wird gelb sein. Okay, nehmen wir an, wir wollen diese drei Boxen horizontal platzieren. Wählen Sie dazu all diese Objekte aus und drücken Sie Chief, und es wird einfach zum automatischen Layout hinzugefügt. Und jetzt kann ich auf das horizontale Layout klicken und es horizontal machen. Lassen Sie uns den Abstand zwischen diesen Tasten auf 15 ändern, lassen Sie uns den Abstand auf 30 ändern Nehmen wir an, wir müssen die Größe dieser Boxen ändern. Klicken Sie dazu auf diese Felder, um sie zu gestalten , und ändern Sie sie, um sie auszufüllen. Wählen Sie nun all diese Rahmen aus und machen Sie sie zu Füllcontainern. Siehst du, jetzt können wir es dem Design entsprechend anpassen. Wenn wir nun ein weiteres Rechteck wie dieses hinzufügen möchten, können wir einfach ein rechteckiges quadratisches Desn erstellen und es so platzieren könnten wir einfach eines dieser Rechtecke kopieren und so einfügen Dann lass uns die Farbe ändern , um zu kämpfen. Und das ist die Stärke des automatischen Layouts. Ich hoffe, Sie verstehen die Grundlagen des automatischen Layouts. Und in Zukunft werdet ihr noch viel mehr über das automatische Lay erfahren und wir sehen uns in der nächsten Lektion. In der nächsten Lektion werden wir lernen, wie man einen Stickerbogen erstellt. Und versteh, was ein Aufkleberbogen ist und wie wir ein Stickerblatt verwenden , um unser Design zum Leuchten zu bringen. Wir sehen uns in der nächsten Lektion. 19. Entwerfen eines Markenlogos: Jetzt haben wir Farben und Typografie nach unseren Wünschen. Wir haben also kein Markenlogo, wir haben nur diesen Text namens Sweet Food Lassen Sie uns diesen Text also in ein Markenlogo umwandeln. Dazu mache ich einfach eine Kopie und gehe zum Aufkleberbogen. Auf dem Aufkleberbogen setze ich einfach die Reihenfolge, dann dupliziere ich diese Farbe und setze diesen Abstand auf etwa 90. Und hier ändere ich das in Logo, und jetzt kann ich Text in Kopf ändern . Dann fügen wir diese erste Teilfarbe zur grünen Farbe und die zweite Teilfarbe zu dieser dunklen Farbe hinzu. Wenn wir möchten, können wir vor diesem Text einige kleine Symbole hinzufügen . Um das zu tun, müssen wir das Symbol finden. Also werde ich auf eine Website gehen, ich finden kann, um ein kostenloses Symbol zu finden. Jetzt bin ich auf Iconfinder. Hier werde ich nach einer Bäckerei suchen. Dann haben wir diese Art von Ikone. Lassen Sie uns also etwas Minimalistisches auswählen und auf diesem Design gut aussehen In diesem Filter klicke ich einfach auf Call Free und lass uns das kostenlose Symbol herausfinden Lass uns Cupcake wie diesen hinzufügen. Also werde ich diesen Cupcake herunterladen. In Ordnung Jetzt gehe ich zum Design und hier werde ich das Cupcake-Symbol Dann werde ich die Größe des Kuchens verringern . Und lassen Sie uns diese beiden Texte auswählen. Drücken Sie im automatischen Layout die Umschalttaste und machen Sie es dann mittig links. Okay, dann lassen wir dieses Symbol fallen. Doppelklicken Sie einfach auf das Symbol. Und Sie werden diese Art von Panel hier sehen , lassen Sie es zuschneiden. Und jetzt können wir so kopieren. Okay, es ist größer, lass es uns ein bisschen kleiner machen. Und jetzt fügen wir hier eine Polsterlinie hinzu. Dies ist nur eine minimalistische Ikone. Okay, das ist das Design. Ich denke, ich werde diese Pka-Farbe in grüne Farbe ändern Und so werde ich diese Cpk-Farbe in diese dunkle Farbe oder die grüne Farbe ändern diese Cpk-Farbe in diese dunkle Farbe oder die grüne Farbe Ich denke, diese dunkle Farbe wird großartig sein. Also werde ich einfach auf das Symbol klicken. Und jetzt klicke ich auf diese Portflasche. Und hier vergrößere ich die Eier um zwei. Also das ist die Port-Option. Und wählen Sie die Symbole und den G Clk-Port aus. Und jetzt öffne ich Potoshop und ändere einfach die Farbe. Okay, ändere einfach die Farbe. Jetzt doppelklicke ich auf das Bild und klicke auf dieses kleine Pfeilsymbol. Dann klicke auf Bildvideo platzieren. Und es wird meinen Dateieditor öffnen. Und hier werde ich das Symbol sehen , den Tie-Editor. Okay, dann klicke ich hier, um es einzufügen. Okay, es wird eingefügt und das ist der Globo, den wir gerade erstellt Jetzt haben wir die Farben, Logo und die Typografie Auch hier haben wir eine Drahtrahmenplatte. Und im nächsten Level werden wir das High-Fidelity-Markup erstellen 20. Stickerbogen: Sticker Sheet ist eine Sammlung von vordefinierten UI-Elementen wie Schaltflächen, Menüs, Symbolen und anderen Komponenten Sticker Sheet ist also wie ein Spickzettel für Designer. Es hilft Designern, schnell und einfach konsistente und benutzerfreundliche Benutzeroberflächen zu erstellen konsistente und benutzerfreundliche Benutzeroberflächen schnell und einfach konsistente und benutzerfreundliche Benutzeroberflächen zu Lassen Sie uns also herausfinden, wie man ein Aufkleberblatt erstellt und welche Vorteile ein Aufkleberbogen hat. Das ist unsere Figma-Datei. Ich gehe zur Markup-Seite. Und hier werde ich einen neuen Rahmen erstellen. Klicken Sie hier und vergrößern Sie den Rahmen dann wie folgt. Jetzt werde ich diesen Frame-Namen in Tika She ändern. Okay. Wie ich bereits sagte, ist Tika Sheet eine Sammlung vorgefertigter Designs. Derzeit haben wir Farben für unsere Designs und Schriftarten für unser Design. So können wir die Farben und die Schrift auf dem Tika-Blatt definieren. Wenn wir mit dem Entwerfen der App beginnen, können wir diese Komponenten entsprechend dem Design hinzufügen. Und wenn wir neue Komponenten und Elemente erstellen, können wir die Kopie dieser Elemente zum Aufkleberbogen hinzufügen. Beginnen wir also mit dem Hinzufügen von Farben und Typografie. Hier drücke ich, um einen Text zu erstellen. Ich habe ähnliche Farben hinzugefügt und dann die Größe auf 50 erhöht. Ändere die Form zu Poppins. Ich mag den Fpin will sehr, deshalb verwende ich immer Wir können ein einfaches Rasterlayout so erstellen, dass es leicht ausgerichtet werden kann und der Rand 60, die Dachrinne 20 beträgt Ordnung. Richten Sie es jetzt so aus. In Ordnung, jetzt schauen wir uns die Farbpalette an. Ich habe einen Bildschirm aus der Farbpalette. Also werde ich die Farbpalette einfach hierher ziehen und dort ablegen . Das ist also die Farbpalette. Und jetzt werde ich drei Rechtecke erstellen , weil wir drei Farben haben Also klicken Sie hier und klicken Sie auf ein Rechteck, die Größe wird 150 mal 150 sein Und jetzt klicke ich auf das Rechteck und ändere die Füllfarbe in diese grüne Farbe. Und dann verpflichte ich diese Rechtecke. drücke alle zehn Dragon und lass es so fallen Okay, lass uns die Position anpassen. Und jetzt wird das weiß sein und das wird die dunkle Farbe sein. Okay? Nun, die weiße Farbe war auf dem Design nicht sichtbar, also ändern wir diese Füllfarbe auf ein bisschen dunkleres Licht wie folgt. Okay, jetzt können wir Variablen für die Farben erstellen. Und wir können diese Variablen für unser Design verwenden und das wird uns helfen, die Konsistenz zu erreichen. Also klicke ich auf dieses Rechteck und hier haben wir die Farbe. klicke ich auf dieses Stilikon. Und jetzt klicke ich auf dieses Plus-Symbol und es wird eine Variable erstellt. Hier kann ich den Namen hinzufügen, also füge ich Grün hinzu. Und hier können wir eine Beschreibung hinzufügen. Ich lasse es leer. Dann klicke ich auf Create Style. Und jetzt klicke ich auf das zweite Rechteck und ich mache den gleichen Namen, wie es sein wird. Und ich mache es für die dritten 12. Okay. Wir haben auch den Punkt für unsere App ausgewählt, also werde ich diesen Text duplizieren und hier einfügen. Machen wir den Abstand zwischen diesen, 260. Dann werde ich diesen Text in Typografie ändern. Dann klicke ich auf Kontext und erstelle neuen Text. Nennen wir diesen Text eine Kopfzeile. Und ich markiere den Text, indem ich Strg oder Befehl für Befehl drücke. Und dann gehe ich zum Text und das Telefon, das wir ausgewählt haben, ist plus eins. Also hier ist das Telefon, ich habe die Schriftart ausgewählt. Dann werde ich diese Schrift in Semibol ändern. Die Schriftgröße wird 350 sein , okay? Das wird die Kopfzeile sein, Telefon fünf, machen wir daraus eine Linienmitte. Und jetzt werde ich die Details dieses Telefons hinzufügen. Die Details werden zuerst der Typ-a-Name sein, es ist M plus eins und ein Schrägstrich wird eingegeben Dann wird die Breite halbfett und das Si wird 35 Pixel groß sein Okay, jetzt können wir Text erstellen, vier Absätze, ich verpflichte es einfach Und lassen Sie uns den Absatztext Si 16 machen. Und lassen Sie uns den Text ausrichten. So links. Und lassen Sie uns Text zu einer Zeile dieses Kopfzeilentextes machen. Um dann die Halbwelt auf normal umzustellen und das wird der Absatztext sein. Lassen Sie uns jetzt die Details ändern, regulär 16. Okay, hauptsächlich benötigen wir zwei Schriftarten für unsere App. Jetzt hat das Stickerblatt einen wiederverwendbaren Inhalt, aber derzeit definieren wir nur die Details, die wir unserer App verwenden, um diese Farben und den Text wiederzuverwenden. Wir können Variablen für jede einzelne Eigenschaft erstellen , die wir für die Farben und den Geschmack verwenden. Lassen Sie uns zunächst einen Stil für diese Hauptfarbe erstellen. Wir können es Stil oder Variable nennen. Um es zu erstellen, wähle ich das rote Dreieck aus, gehe dann zur Füllfläche, klicke darauf für Punkt und dann klicke ich auf diesen Plus-Zyklus. Hier kann ich den Namen hinzufügen. Der Name wird grün sein. Und dann klicke ich auf Variable erstellen. Dann gehe ich zu dieser Farbe, sie ist weiß. Und mach dasselbe. Klicken Sie hier, klicken Sie auf den Plus-Zyklus und erstellen Sie ihn. Warum? Dann klicken Sie auf die Variable. Eigentlich habe ich die Variable bereits erstellt, das ist der Grund, warum ich sie nicht erstellen kann. Aber in deinem Fall kannst du sie erstellen. Gehen Sie dann zu dieser dunklen Farbe und klicken Sie hier, klicken Sie auf Plus, wechseln Sie. Fügen Sie dann den Namen hinzu und klicken Sie auf Variable erstellen. Okay, jetzt haben Sie Variablen für all diese Farben. Lassen Sie uns nun eine Variable für die Tybografie erstellen. Um das zu tun, wählen Sie einfach das Tag , das Sie erstellen möchten, Abs, und hier sehen Sie den Text Klicken Sie auf diesen Stil und dann auf diesen kreativen Stil plus Ck. Und hier fügen Sie den Namen hinzu. Also werde ich die Überschrift Namen hinzufügen. Und wenn ich will, kann ich eine Beschreibung hinzufügen. Dann klicke ich auf Create Style. Dann klicke ich auf den Absatztext und mache dasselbe. Klicken Sie hier, klicken Sie auf diesen Plan und fügen Sie einen Absatz hinzu. Klicken Sie dann auf Creative Style. In Ordnung, jetzt haben wir wiederverwendbare Farben und Tybografie. Lass mich dir zeigen, wie man dieses Zeug wiederverwendet. Um das zu tun, gehe ich zum Wireframe und zum Prototyp. Und hier werde ich einfach ein Rechteck wie dieses erstellen. Und wenn ich jetzt diese rechteckige Farbe in die grüne Farbe ändern möchte diese rechteckige Farbe in die grüne Farbe , die wir in der App verwenden, kann ich einfach hier klicken und so auf die Farbe Und wenn ich die weiße Farbe verwenden möchte, kann ich einfach so oder so klicken. Dann lass uns den Text erstellen. Fügen wir also Text wie Hallo hinzu. Okay, und mach es mittig. Jetzt ändern wir den Text in eine Überschrift. Hier ist der Überschriftentext, den wir erstellt haben. Wenn wir es also in einen Absatz ändern möchten, können wir einfach hier klicken und auf den Absatz klicken. In jedem Fall können Sie auf dieses separate Stilsymbol klicken, wenn Sie einige Details ändern müssen . Und jetzt können Sie hier die Eigenschaften, die Sie ändern möchten, wie folgt ändern. diese Weise können Sie ein Aufkleberblatt erstellen und die Details auf dem Aufkleberblatt verwenden. Wenn wir Komponenten wie Schaltflächen, Suchleisten, Karten und andere Elemente erstellen , fügen wir die Komponenten, die wir erstellen, dem Design hinzu und konvertieren sie in kostenlose, verwendbare Komponenten. In zukünftigen Lektionen werde ich Ihnen zeigen, wie das geht. 21. Was wir entwerfen werden und wo man Ressourcen finden kann: Wir werden eine App für die Lieferung von Lebensmitteln entwerfen. In der von QY Ux entworfenen Wireframes - und Prototyping-Klasse erstellen wir dieses Wireframe-Set und Wenn Sie diesen Teil nicht gesehen haben, können Sie ihn auf Skillshare ansehen Ich werde diesen Link in die Beschreibung aufnehmen. Wir sehen uns im Bereich für visuelles Design. 22. Den Header entwerfen: Jetzt haben wir eine saubere Zeichenfläche und das Wireframe-Set, also ist es an der Zeit, High-Fidelity-Maga zu erstellen Fangen wir mit der Startseite an. Ich klicke auf die Startseite und kopiere das Wireframe. Dann füge ich es auf der Maga-Seite ein. Erhöhen wir es, indem wir die Befehlstaste drücken und das Mausrad wählen Auf dem Mac erstelle ich jetzt einen Kinderwagen, klicke auf den Rahmen wähle dann das Prey Mass iPhone 13.14 Okay, jetzt benenne ich diesen Rahmennamen in Home um Und jetzt werde ich ein Raster hinzufügen. Wenn wir also ein Layoutraster hinzufügen, ist es einfach, die Ausrichtung am Rand beizubehalten. Ich füge es als 15 hinzu und die Dachrinne wird 50 sein. Okay, fangen wir jetzt mit diesem Kopf an. Also zuerst haben wir dieses Hamburger-Menü. Um einen Hamburger zu erstellen, klicke ich einfach auf das Rechteck und verwende das Rechteck, oder wir können Symbole verwenden, aber in diesem Fall können wir einfach ein Hamburger-Menü mit dem Dreieck erstellen klicke ich einfach auf das Rechteck und verwende das Rechteck, oder wir können Symbole verwenden, aber in diesem Fall können wir einfach ein Hamburger-Menü mit dem Dreieck erstellen. Ich mache es so, dann füge ich hier die Breite als 50 und die hohe Steuer A hinzu. Jetzt ist es Mal sehen, das ist das Design und die Ecken werden 15 sein. Und lassen Sie uns die Feldfarbe auf diese grüne Farbe ändern. Okay, jetzt werde ich es duplizieren. Drücken Sie Old Dragon einfach auf einen Gegenstand wie diesen. Jetzt werde ich diese beiden Rechtecke hervorheben. Drücken Sie Shift A und klicken Sie auf dieses Plus-Symbol, um ein automatisches Layout hinzuzufügen. Markiere es. Drücken Sie dieses Plus C. Okay, jetzt mache ich eine Linie oben in der Mitte, und das vertikale Layout wird ausgewählt. Machen wir Leerzeichen drei. Okay, klicken Sie jetzt auf das Dreieck und dublieren Sie es, indem Sie Strg und Strg drücken . Okay, das Hamburger-Menü ist erstellt. Und dann müssen wir diesen Titel erstellen. Wir haben bereits den Titel erstellt, das Logo erstellt. Ich benutze einfach dieses Logo. Bevor ich es verwende, können wir dieses Logo tatsächlich in eine Komponente umwandeln. In den nächsten Lektionen werden Sie die Komponente genau verstehen. Im Moment werde ich einfach auf dieses Symbol klicken , um eine Komponente zu erstellen. In den nächsten Lektionen werde ich die Vorteile der Komponente aufzeigen und erläutern, warum wir eine Komponente verwenden müssen. Ich werde diesen Komponentennamen in Logo umbenennen. Okay, jetzt komme ich her und wähle den Rahmen aus. Dann gehe ich zu diesem***-Menü. Und im bewerteten Menü haben wir bei mehr Tassen diese Komponente. Ich werde es einfach so ziehen und ablegen. Es ist größer, also reduzieren wir die Größe. Um es zu verkleinern, drücke ich einfach die Strg-Taste, um es auszuschneiden, und höre die Strg-Taste, um es hier einzufügen. Auf diese Weise können wir die Änderungen einfach vornehmen. Als ersten Schritt werde ich einfach die Größe dieses Logos verringern, kann es 25, 25 machen, okay. Dann müssen wir die Größe des Textes ändern. Um es zu ändern, können wir die Textvariable ändern. Um die Textvariable zu ändern, fügen wir hier die Header-Textvariable hinzu. Klicken Sie einfach darauf und klicken Sie hier. Wenn wir die Aufkleber erstellen, zeige ich Ihnen, wie man diese Art von Variablen erstellt, und ich hoffe, Sie erinnern sich daran. Passen wir die Textgröße an. Machen wir es etwa 30, aber etwa 25 bis 22. Ich denke, diese Größe ist besser als zuvor. Um es richtig zu testen, klicken Sie auf den Rahmen und dann auf dieses aktuelle Symbol Es öffnet sich ein neues Fenster. Es sieht so aus. Ich denke, wir können das ändern, nur diesen Text auf 25. 25 werden es sein, sieht gut aus auf dem Design. Okay, jetzt haben wir ein Logo und hier habe ich dieses Logo einfach ausgeschnitten und wieder auf das Aufkleberblatt geklebt. Wenn du es nicht verstanden hast, mach dir keine Sorgen. Ich zeige Ihnen , wie Sie Komponenten erstellen, und gebe Ihnen ein umfassendes Verständnis der Komponente. Okay, jetzt können wir diese beiden Logos hinzufügen, also die Autotonne und das Vata-Symbol Um Logos hinzuzufügen, können wir Library Pontosum verwenden. Fontosum ist eine Ikonenbibliothek. So können wir das Google Material Design System und die Symbole im Google Material Design Ich denke, Sie werden sich an die Lektion erinnern , in der wir über das Designsystem sprechen. In diesem Fall verwenden wir jedoch Fontosm. In dieser Community gibt es eine Community, andere Designer haben ihre Ressourcen der Community zur Verfügung gestellt, und Designer wie wir können diese Ressourcen nutzen Um diese Ressourcen zu nutzen, können wir einfach auf dieses Ressourcensymbol klicken und hier nach dem Ressourcenelement suchen. In diesem Fall sind es Plugins. In Plugins werde ich danach suchen. Schriften. Hier ist das Phontosum-Symbol Klicken Sie darauf und es wird auf dem Figma-Konto installiert. Und es wird sich so öffnen. Ich habe das Phontosum-Symbol bereits auf der Figma installiert, daher zeige ich Ihnen, wie Sie das Plugin installieren Klickt einfach hier und lasst uns welche installieren. Ich kann genau solche Icons einbauen, falls du das Ponto nicht installiert Wenn Sie mit der Maus über das Ponto fahren, sehen Sie es so und Sie werden diese Schaltfläche und Sie werden Klicken Sie einfach auf die Schaltfläche Ausführen und sie wird als Plug-In in Ihr Break Ma-Konto geladen Um dieses Plugin zu finden, können Sie hier klicken, und hier haben wir den Plugin-Bereich. Im Abschnitt Flagge haben wir alle Plug-ins, die wir installiert haben. Wir können auch hier klicken und hier können wir auf die Plugins klicken. Und in den Plugins haben wir das Plug-In, das wir installieren. Klicken Sie auf das Telefon oder einige Symbole. Und hier müssen wir die Karte finden, Ticon, ich suche einfach nach der Karte Und hier haben wir das Kartensymbol. Also werde ich auf diese Kartonage klicken und sie wird zu diesem Design hinzugefügt, also brauche ich sie auf der Startseite, also ziehe ich sie einfach auf die Startseite. Und wir brauchen auch ein Avatar-Symbol. Holen wir uns also das Avatar-Symbol. Benutzer. Okay, hier haben wir ein Benutzersymbol. Okay, jetzt werde ich diese Größe auf 30 mal 30 erhöhen. Klicken Sie einfach auf diese enthaltene Eigenschaft und machen Sie daraus 30. Und sie wird automatisch an das Gewicht angepasst, wenn wir dieses Symbol „Proportionen einschränken“ hinzufügen In diesem Fall machen wir also 30. Okay, jetzt haben wir zwei Icons. Also werde ich die Farbe dieses Symbols auf Grün ändern. Ich denke, Sie werden sich an die 603010-Regel erinnern. In diesem Fall verwenden wir 60 als weißen Hintergrund und 30 als grüne Farbe und zehn als Fußsymbol Okay, jetzt haben wir ein Design, das wir dem Header hinzufügen sollten. Jetzt werden Sie sich an das automatische Layout erinnern, also fügen wir das automatische Layout hinzu. Um das automatische Layout hinzuzufügen, markiere ich all diese Abschnitte und drücke Chief Drücke dann auf dieses Plus-Symbol im automatischen Layout wie folgt. Und jetzt müssen wir das horizontal machen, also so. Um es horizontal zu machen, können wir auf dieses horizontale Layout klicken und es wird horizontal. Ich werde zu den Ebenen gehen. Okay, jetzt siehst du, dass es ein Problem gibt. Im Autosymbol haben wir einen Rahmen, aber im Benutzersymbol haben wir diesen Rahmen nicht. Der Grund dafür ist, dass es sich einfach vom Rahmen löst. Erstellen wir also einen Rahmen, indem wir mit der rechten Maustaste darauf klicken und auf Rahmenauswahl Okay, jetzt passte dieses automatische Layout nicht perfekt zum Design. Lassen Sie uns dafür sorgen, dass es zum Design passt. Um das zuerst zu tun, müssen wir dem Rahmen ein automatisches Layout hinzufügen. Klicken Sie dazu auf den Rahmen und dann auf Automatisches Layout. Okay, im Rahmen benötigen wir vertikales Layout, was bedeutet, dass wir den Fußabschnitt vertikal wie folgt gestalten müssen . Lassen Sie uns jetzt die Details vorerst anpassen. Fügen wir den vertikalen Abstand als zehn hinzu. Und das linke und rechte Muster werden 15 sein. Weil wir den Rand als 15 hinzufügen, was bedeutet, dass die Elemente zwischen zwei Ecken einen Abstand von 15 haben zwischen zwei Ecken einen Abstand von 15 Obendrein werde ich die Polsterung auf zehn festlegen. Okay, jetzt werde ich in diesem Header-Bereich den Namen in Header ändern Und dann fügen wir den Inhalt als Füllung hinzu. Und die Vertikale ist drin, werde sein, jetzt mache ich sie zu einer Linie in der Mitte links, so wie hier. Und jetzt fügen wir diesen beiden Schaltflächen ein Maut-Layout hinzu , weil es die drei Spalten hat. Die erste Spalte ist das Hamburger-Menü, die zweite Spalte ist das Logo und die dritte Spalte ist der Karton. Avata-Symbol Wählen Sie diese beiden Symbole aus und drücken Sie dann die Umschalttaste . Hier ändere ich den horizontalen Abstand auf 15. So wie das. Stellen Sie es dann auf Füllen und Enthalten ein. Okay, jetzt klicke ich auf das Hamburger-Menü und ändere es horizontal, Größe in den Füllbehälter und gehe auch zum Logo und mache dasselbe Und gehe zu den Avatar-Symbolen und setze sie auf den Feldcontainer Und jetzt wirst du es so sehen. Jetzt ist es wirklich einfach zu machen. Zuerst klicke ich auf das Hamburger-Menü und es sollte sich in einer Zeile links und einer Linie in der Mitte links befinden Dann sollte dieses Avatar-Symbol eine Linienmitte sein, oder? Und dieses Logo sollte eine Linienmitte sein. Jetzt haben wir also das Design , das richtig zentriert ist. Wenn Sie es auf dem Rahmen überprüfen, wird es so aussehen. Es ist weit, schwach ausgerichtet Und hier drin, das Avatar-Symbol, ein bisschen größer. Also lasst uns die Größe ändern und es dem Autosymbol ähnlich machen. Okay, jetzt sieht es so aus. Und fügen wir den oberen Rand als 15 hinzu. Derzeit sind es also zehn. Einfach hier klicken und 15 draus machen. Ordnung, in der nächsten Lektion werden wir etwas über Komponenten lernen und diesen Header in eine Komponente umwandeln und mit dem Design fortfahren. 23. Den Header verbessern: Wenn wir dieses Design überprüfen, ist der Titel nicht genau mittig angeordnet, also machen wir ihn zentriert. Um das zu tun, müssen wir die Parameter des Autos anpassen. Zuerst klicken wir auf die Haupt-Autoa. Setzen Sie dann diesen horizontalen Abstand zwischen dem Element auf Null. Und als nächstes werden wir auf das Logo klicken. Und das Logo wird Inhalt sein. Und klicken Sie auch auf dieses Autosymbol, und das Avata-Symbol macht es zum Inhalt. Und im Hamburger-Menü machen Sie es zu In Ordnung, jetzt ist das Logo nur noch perfekt zentriert. Wir müssen den Abstand zwischen diesen beiden Abschnitten anpassen. Wählen Sie dazu die Kopfzeile aus und passen Sie die Größe wie folgt an. Erhöhen Sie das Design auch hier. Alles klar, wenn wir das überprüfen, ist das Logo exakt zentriert, es gibt also viele Möglichkeiten Änderungen am Design mithilfe des automatischen Layouts vorzunehmen Es wird also immer empfohlen, mit den Einstellungen des automatischen Layouts herumzuspielen 24. Alles über Komponenten: Okay, lassen Sie uns jetzt eine Komponente erstellen. Bevor wir eine Komponente erstellen, sollten wir uns mit dem Namen vertraut machen, damit es sich bei der Komponente um ein wiederverwendbares Element handelt , das wir im gesamten Design wiederverwenden können . Lassen Sie uns diesen Header also in eine Komponente umwandeln. Um das zu tun, wähle ich einfach den Header aus. Und dann wirst du hier ein Symbol sehen. Und es ist eine Komponente erstellen, also klicke ich einfach darauf. Okay, jetzt wird dieser Header zu einer Komponente. Wenn es zu einer Komponente wird, ändert sich der Elementname und die Farbe des Elements ändert sich in die hellviolette Farbe. Okay, lassen Sie uns nun die Vorteile dieser Komponente sehen. Bevor ich etwas mache, schneide ich einfach diesen Bipasin-Befehl aus, ein X und füge ihn auf das Aufkleberblatt Das Aufkleberblatt und füge es so ein. Dann werde ich es hier hinstellen. Lassen Sie uns diesen Abschnitt als Elemente bezeichnen. Okay, jetzt ist hier die Komponente. Dies ist die erste Komponente , die wir erstellt haben. Wir nennen Component, oder wir nennen diese erste Komponente als Master-Komponente , weil wir mit dieser Master-Komponente viele Instanzen erstellen können . Lassen Sie uns einen Instant oder eine Kopie erstellen. Um eine Kopie zu erstellen, isolieren Sie die Startseite unserer App. Dann gehe ich im Asserts-Bereich zu ***, wir können alle unsere Komponenten sehen Erinnerst du dich, dass wir bereits eine Komponente für unser Logo erstellt eine Komponente für unser Logo Hier ist die neue Komponente und ihr Name trägt die Überschrift. Ich klicke darauf, und wenn ich darauf klicke, wird angezeigt, dass wir zum Beispiel auf die Schaltfläche „Instanz einfügen“ klicken können, oder wir können sie einfach per Drag-in-Drop auf die Startseite ziehen. Das ist jetzt eine Instanz der Komponente Wenn wir also diese Hauptkomponente ändern, ändert sich auch das Design dieser Instanz. Das ist einer der Vorteile , die wir haben, wenn wir eine Komponente erstellen . Klicken Sie zum Beispiel einfach auf dieses Hamburger-Menü und ändern Sie die Farbe Jetzt habe ich auf die Master-Komponente geklickt, also ändern wir die Farbe auf Schwarz Und wenn ich es ändere, ändert sich auch die Instanz dieser Komponente Wenn wir die Komponente auswählen, werden die Eigenschaften dieser Komponente hier aufgelistet. Hier haben wir die Details der Komponente. Wenn wir auf dieses Symbol klicken, haben wir die Möglichkeit, die Instanz zu trennen, wenn wir sie trennen Und wenn wir jetzt das Design der Hauptkomponente ändern, das keine Auswirkungen auf die Komponente, die wir Wir können auch Varianten dieser Komponente erstellen. Lassen Sie uns als Beispiel eine andere Seite erstellen. Ich werde diese Seite einfach duplizieren und diese Instanz der Komponente entfernen. Wenn wir jetzt in Search Foods die Wireframes- und Fototyp-Seite aufrufen, haben wir nicht das Logo in Search Food, sondern den Titel Kopieren wir also die Search Food-Seite und hier. Und jetzt ändern wir diesen Titel in Search Food. Und jetzt ist hier die Startseite und hier ist Search Food. Der Unterschied besteht darin, dass wir hier den Titel Search Food haben, was bedeutet, dass wir dieses Logo ersetzen und den Such-Fußtitel hinzufügen müssen . Fußseite durchsuchen. Wenn wir einfach zu Asserts gehen und diesen Header hier hinzufügen, ist dies nicht der Header , den wir hinzufügen möchten Für die Fußseite der Suche benötigen wir den Text „ Search Food“. Lass es uns machen. Es ist wirklich einfach, weil wir Varianten der Master-Komponente erstellen können . Variante erstellen, Masterkomponente auswählen . Hier sehen Sie eine Schaltfläche, die als Variante bezeichnet wird. Klicken Sie einfach darauf und Sie werden sehen können, wie diese Art von Variante die Größe dieses Variantenrahmens erhöht. Und ich werde es einfach hier hinstellen , um es richtig zu weben. Gehen wir zum Ebenen-Panel. Und ich werde dieses Logo entfernen, weil wir hier den Titel brauchen. Um den Titel zu erstellen, klicke ich auf Kontext und dann hier. Jetzt hier drin werde ich das als Seitentitel benennen. Okay, im Seitentitel werden wir den Text als Kopfzeile verwenden. Jetzt müssen wir diesem Titel ein Maut-Layout hinzufügen. Ich werde einfach zuerst A umschalten, dann werde ich das so ändern , dass es sich so anfühlt. Und jetzt haben wir die Variante dieser Komponente. Anstatt diese Master-Komponente zu verwenden, können wir jetzt diese Variante mit den ähnlichen Funktionen der Master-Komponente verwenden. In diesem Fall werde ich nur die Textilien des Titels reduzieren. Dazu klicke ich auf den Titel und entferne die Stile des Headers Und lassen Sie uns den Titeltext auf etwa 21 setzen, so, dass er mittig ist und dass der Text mittig Okay, jetzt gehen wir zu unserer Fußseite für die Suche. Hier drin. Wenn wir zu den Asserts gehen, werden wir den Header sehen Also klicke auf den Header. Und hier haben wir die Möglichkeit, die Masterkomponente oder -variante auszuwählen die Masterkomponente oder , da wir sie dem Design hinzufügen möchten. In diesem Fall möchten wir die Variante hinzufügen. Also einfach hier klicken und die Variante auswählen und auf Einfügen klicken. Und jetzt werden wir diese Art von Design sehen. Und das ist die Variante. Entferne das einfach. Wenn wir es einfach so ausdrücken, können wir die Eigenschaften der Instanz dieses Headers sehen. Und hier können wir die Variante auswählen und sie wird so aussehen. diese Weise können Sie eine Variante erstellen und sie den einzelnen Seiten hinzufügen. Jetzt kann ich einfach Tee drücken und diesen Text ändern, um nach solchen Lebensmitteln zu suchen. Das ist der Vorteil der Nutzungskomponente. Wenn wir keine Komponenten verwenden würden, müssten wir die Designs für jeden einzelnen Abschnitt wiederholt erstellen . Deshalb müssen wir Komponenten verwenden. Auf der Vorderseite des Prototyps können wir diese Komponente verwenden, um unseren Prototyp einfach zu erstellen. Ich werde es im Prototyp-Bereich zeigen. Hier hatten wir das gleiche Problem , dass dieser Text nicht richtig ausgerichtet war. Um dieses Ausrichtungsproblem zu korrigieren, können wir diesen Text auf die linke Seite verschieben und den Abstand zwischen dem Hamburger-Menü und dem Text hinzufügen Um das zu tun, gehe ich zur Master-Komponente. in dieser Variante wähle ich die Texte mit automatischem Layout aus und mache daraus eine Zeile links. Und ich werde den Text auswählen und den Text auch zu einer linken Zeile machen. Die Hauptkomponente, ich werde das automatische Layout, den horizontalen Abstand, auf 15 ändern , wie folgt. Und wenn wir jetzt das Design überprüfen , sieht es so aus und wir können das Problem mit dem Textzentrum beheben. 25. Das Suchfeld entwerfen: Okay, lassen Sie uns diese Suchleiste erstellen. Bevor ich sie erstelle, werde ich diesen Such-Fußrahmen ausblenden , da wir auf der Startseite noch einiges zu erledigen haben. Wählen Sie also die Such-Fußseite und ich werde sie hier sperren, was bedeutet, dass ich das Design nicht bearbeiten kann. Und dann klicke ich auf dieses Symbol und es wird verschwinden. Und das Gleiche werde ich auch mit dem Drahtrahmen machen. Okay, lassen Sie uns das Suchbuch erstellen. Um ein Suchbuch zu erstellen, klicke ich dort auf conret Tangle Klicke auf den Rahmen. Und jetzt werde ich die Höhe des Rec-Dreiecks auf 45 einstellen. Und dann werde ich das in automatisches Layout umwandeln, Shift und A drücken. Dann stelle ich die Größe als Feldcontainer ein. Ich werde die Trang-Größe auf Feldcontainer ändern. Okay, jetzt werde ich diese Feldfarbe auf Weiß ändern. Und lassen Sie uns den Schatteneffekt hinzufügen. Um die Schatteneffekte hinzuzufügen, klicken Sie einfach auf das Rechteck im Effekt. Klicken Sie hier, klicken Sie auf das Pluszeichen. Dann klicken Sie auf dieses Sonnensymbol. Und jetzt mache ich y zu Null. Lass uns das erhöhen. Und jetzt ändere ich Unschärfe auf Licht 15. 15 ist zu viel, machen wir es zu a und erhöhen die Opazität auf Licht 50. Okay? Jetzt füge ich Ecken hinzu. Fügen wir Ecken zu Licht 25 hinzu. Okay? Und die Schatten sind zu schwarz, also ändern wir die Deckkraft auf 25. Okay? Wenn wir es jetzt anhand des Designs überprüfen, wird es so aussehen. Und wenn wir wollen, können wir einen Strich um das Suchfeld herum hinzufügen, aber im Moment ist das gut. Und wenn es Probleme mit dem Kontrast oder der Barrierefreiheit gibt, werden wir das Design ändern. Okay, jetzt müssen wir dieses Suchfeld hinzufügen. Dazu gehe ich zur Fontosum- und Infontosal-Suche Hier habe ich gerade das Suchfeld hinzugefügt und wir müssen es in diesen Container einfügen Dazu wähle ich das Suchfeld aus und drücke den Befehl X, um es auszuschneiden, und hier drücke ich Command we, um es einzufügen. Okay, jetzt wählen wir dieses Rechteck als horizontales Feld aus, sodass kein Platz mehr vorhanden ist, um dieses Suchfeld hinzuzufügen. Deshalb befindet sich dieses Suchfeld unter dem Textfeld. Also, wenn ich das Layout als horizontales Layout mache, wird es so aussehen. Aber wir müssen dieses Suchfeld in die Suchleiste einfügen. Dazu wähle ich das Suchfeld aus und dann kann ich diesen Inhalt hier zur absoluten Position machen. Das heißt, wir können dieses Suchsymbol an einer beliebigen Stelle im Design platzieren dieses Suchsymbol an einer beliebigen Stelle im Design . Weil es nicht mehr von diesem automatischen Layout abhängt. Wir können die Position dieses Suchfeldes frei anpassen. Lass es uns hier anziehen. Und so werde ich es dann in Teamfarbe ändern. Wenn ich also darauf klicke, wird nur auf das automatische Layout geklickt. Wenn ich nur auf dieses Suchfeld klicken möchte, muss ich hier doppelklicken, aber es gibt eine Abkürzung, die Abkürzung besteht darin, die Befehlstaste zu drücken und einfach auf das Symbol zu klicken , das Sie auswählen möchten. Wenn ich zum Beispiel dieses Logo auswählen möchte, wenn ich es so auswähle, wird das gesamte Layout ausgewählt. Aber wenn ich die Befehlstaste drücke und es auswähle, um das unterste Element im Mac-Befehl in Windows zu markieren, sollte es meiner Meinung nach Steuerung sein Spiel einfach mit den Tasten. Okay, jetzt klicke ich auf dieses Vektorsymbol und wähle die dunkle Farbe wie folgt aus. Okay? Bei U x ist ein negativer Abstand wirklich wichtig, denn wenn wir einen guten negativen Abstand haben, hilft das den Benutzern, ihn richtig zu lesen und den Pliativ des Designs zu verstehen Um den negativen Abstand hinzuzufügen, können wir ihn direkt zum automatischen Home-Layout hinzufügen Also klicke ich auf den Home-Frame. Und hier füge ich einen negativen Abstand hinzu, oder ich füge den vertikalen Abstand 60 hinzu. Wenn ich jetzt das Markup überprüfe, wird es so aussehen. Okay. 26. Den Kategorie-Abschnitt entwerfen - Teil 01: Jetzt müssen wir diesen Kategorienabschnitt erstellen, um diesen Schwerpunkt zu , und einen Text mit dem Namen Kategorienkategorien erstellen , dann als Überschrift ausgewählt wird. Und die Farbe wird die dunkle Farbe sein. Und jetzt haben wir das Bild und die Beschreibung des Bildes. Das erste Bild wird Daily Special sein, erste Kategorie ist Daily Special, zweite Paste und drittens Getränke. Lassen Sie uns diese Kategorien erstellen. Um sie zuerst zu erstellen, müssen wir das Bild erstellen. Im Moment verwende ich ein Rechteck wie dieses, und dann brauchen wir einen weiteren Text Lassen Sie uns also einen Text erstellen. Der Text wird Tagesangebote sein. Okay, jetzt ändern wir den Text in einen Absatz. Eigentlich ist es besser, ein größeres Telefon zu haben. Lassen Sie uns also eine andere Variante des Telefons erstellen, um diese zu duplizieren und den Stil zu trennen Dann lassen wir dieses Medium hier klicken, schnell konkretisieren. Lassen Sie uns das als Subheading Concrete style bezeichnen. Ordnung, jetzt gehen wir zu unserem Design. Klicken Sie hier und ändern Sie den Text in diesem Stil in eine Unterüberschrift Okay, jetzt wähle ich diese beiden Elemente aus und drücke Shift A. Dann setze ich es in die Mitte, und der Abstand ist 15. Und jetzt klicken Sie auch auf diese beiden Abschnitte. Drücken Sie Shift A, um es zu kategorisieren. Hier fügen wir das negative Leerzeichen als 20 Hier haben wir vier Abschnitte. Um vier Abschnitte zu erstellen, müssen wir die Kategorieelemente auswählen und Shift A drücken. Dann stelle ich das Layout als horizontales Layout ein. Und wenn ich jetzt die einzelne Kategorie auswähle, drücke sie dubligieren. Einfach so ziehen und seilen. Wenn du das ankreuzt, müssen wir die Größe reduzieren, weil wir vier Elemente benötigen , um die Größe zu reduzieren, bevor wir die Größe reduzieren. Wenn wir eine Komponente verwenden, die in einem einzigen Kategorieelement verwendet wird, ist es einfach, das Design zu ändern , denn wenn wir die Master-Komponente ändern, wirkt sich dies auch auf die Instanz der Master-Komponente aus. Ich werde die Komponente entfernen , die wir nicht verwenden werden, und hier werde ich eine Komponente konvertieren und diese Komponente als Kategorieelement benennen. Jetzt können wir die Größe anpassen Passen wir diese Größe auf 72 mal 72 an. Deshalb müssen wir die Größe dieses Textes reduzieren. Dazu klicke ich einfach auf den Text und zwar im Con-Detach-Stil Und reduzieren wir die Schriftgröße auf, sodass der Abstand auf s gesetzt wird. Okay, jetzt gehen wir zu Asserts und schauen uns die Komponente an , die wir Und fügen wir es hier hinzu. Und lassen Sie uns vier davon hinzufügen. Dies ist die Hauptkomponente. Erstellen Sie zum Beispiel. Und ich werde die Master-Komponente ganz oben platzieren. Und wählen Sie all diese Komponenten aus. Und drücken Sie hier die Umschalttaste , um das Layout hinzuzufügen. Und lassen Sie uns ein horizontales Layout daraus machen. Und hier müssen wir die Größe etwas weiter reduzieren. Machen wir 65 draus. Lassen Sie uns nun den Abstand zwischen diesen beiden Optionen reduzieren. Lass uns 15 draus machen. Okay, machen wir den Platz hier auf 12. Und jetzt können wir dieses Rechteck vergrößern. Drücken Sie die Befehlstaste und wählen Sie das Gewirr aus. Und lassen Sie uns die Größe auf 80 erhöhen und 80 daraus machen. Okay, jetzt haben wir vier Kategorien. Und jetzt werde ich die Hauptkomponente ausschneiden. Dann füge es so auf das Aufkleberblatt hinzu. Dann können wir hier eine Bewertung vornehmen und eine Komponente hinzufügen. Ich werde aus diesem Feld 15 machen, okay. Wenn wir das Moca überprüfen, wird es so aussehen Und jetzt müssen wir Bilder finden und diese Bilder hinzufügen. Dann müssen wir den Text jedes Kategorieelements ändern. 27. Den Kategorie-Abschnitt entwerfen - Teil 02: Okay, jetzt müssen wir diese Titel ändern. Also lass uns sie ändern. Der zweite Titel wird „Füge das hier ein“ sein. Also klicke ich hier, drücke dann die Befehlstaste und wähle diesen Text aus, um ihn zu kopieren. Dann gehe ich hierher und füge es so ein. Eigentlich muss ich es ohne Stil einfügen. Also werde ich zuerst den Text hier einfügen. Dann drücke ich die Strg-Taste, um ihn auszuschneiden und in unsere Kategorie einzufügen. Gehen Sie als Nächstes zu Getränke und drücken Sie die Befehlstaste und wählen Sie die Elemente aus. Kopieren Sie es dann und fügen Sie es in die URL-Leiste ein, denn wenn wir Strict in der URL-Leiste platzieren , können wir den gesamten Stil als Beispielfiguren entfernen. Hier wird Beispielfiguren entfernen. Hier der Text zum anderen Text geändert Unser Originaltext ist plus eins. Deshalb setzen wir strikt auf die URL-Leiste und platzieren den Text hier. Okay, jetzt ist es Zeit , Bilder hinzuzufügen. Dazu drücke ich die Befehlstaste und wähle dieses Rechteck aus. Und wir werden dieses Rechteck durch Bilder ersetzen. Um das zu tun, gehe ich zu Shape to und klicke hier. Klicken Sie dann auf Bilder platzieren & Video. Jetzt haben wir die Bilder. Also werde ich diese Bilder zur Beschreibung des Ressourcenbereichs hinzufügen . Und wenn wir das Bild auswählen, können wir es so platzieren, und es ist das pastöse Bild, das Getränkebild und schließlich das helle Bild Okay, wenn wir jetzt das Design überprüfen, haben diese Bilder keine abgerundeten Ecken, also reduzieren wir die Ecken dieser Um das zu tun, können wir unsere Master-Komponente verwenden. Klicken Sie also auf das Bildrechteck auf der Master-Komponente. Und lassen Sie uns abgerundete Bilder als 15 abgerundete Ecken bei 15 hinzufügen . Und wenn wir hören, dass die Ecken gerundet sind, sieht es besser aus. Jetzt müssen wir den fokulären Fußabschnitt und den empfohlenen Fußabschnitt erstellen den fokulären Fußabschnitt und den empfohlenen Fußabschnitt 28. Beliebte Lebensmittel entwerfen - Teil 01: Okay, lassen Sie uns den beliebten Fußbereich erstellen. Zuerst müssen wir den Titel hinzufügen. Also drücke ich und erstelle diesen Titel als Popular Foods. Jetzt wähle ich den Textstil als Head aus. Jetzt haben wir hier vier Lebensmittel hintereinander. Aber wenn wir der App vier Lebensmittel hinzufügen, wird es nicht besser aussehen. Und wir werden Probleme mit der Barrierefreiheit haben. Fügen wir also zwei Lebensmittel für eine Reihe hinzu und fügen wir sie zwei mal zwei hinzu. Für diesen beliebten Lebensmittelbereich habe ich vor, Elemente zu erstellen , die ein größeres Bild des Lebensmittels und dann einen Namen haben . Dann werden wir den Preis über dem Namen haben. Und zum Preis werden wir die Bewertung in Zahlen haben. Also versuchen wir es zuerst, ich werde ein Rechteck erstellen. Dieser Recranger wird ein Abbild des Essens sein. Lass es uns vorerst so machen. Und dann werden wir den Namen und den Preis des Essens haben. Lassen Sie uns neuen Text erstellen und ihn wie einen Namen als Etikett hinzufügen . Dann werde ich diesen Text duplizieren und daraus zwei Dollar machen. Okay, jetzt füge ich diesen beiden Elementen Auto hinzu und erstelle ein horizontales Layout. Und ich werde den horizontalen Abstand zwischen den Elementen 20 festlegen. Und dann werde ich dieses Rechteck auswählen und automatisch erstellen. Hier werde ich das ändern, 62 15. So, okay. Jetzt müssen wir diesen Fußnamen auf die rechte Seite setzen und den Dollarbetrag auf die Laborseite. Um das zu tun, werde ich die horizontale Größenänderung des Inhalts ändern, um den Behälter zu füllen. Dann füge ich eine horizontale Lücke zwischen Punkt 22 hinzu. Okay, jetzt hat es sich so geändert. Und jetzt können wir den Namen des Essens hinzufügen, wie wir wollen. Es gibt also mehr Anpassungen. Wir werden es tun, nachdem wir den gesamten Abschnitt abgeschlossen haben. Lassen Sie uns also vorerst die Struktur erstellen. Und über diesem Fuß, Titel und dem Preis können wir eine Sternebewertung hinzufügen. Um das zu tun, kopiere ich einfach einen Stern von hier. Holen wir uns den Stern von unserem Plug In. Gehen wir also zu Schriften und so. Star, hier haben wir einen Stern. Also lass es uns ausschneiden und in dieses automatische Layout einfügen . Es wird so nach oben gehen. Dann lassen Sie uns die Größe auf acht mal acht ändern. Dann füge ich das automatische Layout hinzu. Und jetzt werde ich Text in dieses automatische Layout einfügen. Dieser Text wird fünf sein, okay? Jetzt ändere ich die Füllfarbe auf dunkel. Lassen Sie uns jetzt die Füllfarbe auf dunkel ändern. Dann werde ich die automatische Ausgabe auf das horizontale Layout umstellen. Hier müssen wir die Größe des Pont ändern. Machen wir ein. Und zuerst können wir unser Telefon zu diesem Text hinzufügen Lassen Sie uns den Stil herausnehmen und ihn zu einem, machen wir ihn zu einem Medium In Ordnung, jetzt haben wir diese beiden Dinge dazwischen. Wir haben Lückengröße zehn, aber ich werde sie auf zwei reduzieren. Dann werde ich es so zentrieren lassen. Aber wir haben es immer noch nicht richtig ausgerichtet. Also klicke ich auf Erweiterte automatische Layouteinstellungen und dann auf die Grundlinie „ Text ausrichten“. Nimm es so, jetzt richten wir es richtig aus. Okay, jetzt werde ich diesen Raum auf etwa sechs reduzieren. Und jetzt schauen wir uns das Design in der Vorschau an. Und es wird so aussehen. Ich denke, wir sollten den Stern und diesen Text vergrößern , lassen Sie uns 16 daraus machen. Und lassen Sie uns diesen Text in den Text der Unterüberschrift ändern. Was ist damit? Es ist größer. Ich denke also, das Tool wird perfekt sein. Okay, in einem Jahr gibt es ein Tool. Ich denke, 13 wäre perfekt. Und jetzt füge ich dazwischen Lücken wie sechs hinzu und jetzt wird es so aussehen. Okay, jetzt müssen wir die Einstellungen für diesen Fußnamen anpassen . Dazu klicke ich einfach auf den Fußnamen und füge den Textstil als Absatz hinzu. Dann füge ich diese Größe hinzu, Textgröße als Spading Okay, wenn wir jetzt überprüfen, ob das Design gleich ist, sieht das so aus. Also werde ich jetzt eine Kopie dieses Designs machen. Und lassen Sie uns die beiden automatischen Layouts hinzufügen sie so horizontal gestalten. Dann, wenn wir diese beiden hinzufügen. Automatisch. Und jetzt füge ich die Bildgröße 180 mal 180 hinzu. Und entferne das einfach, dann lass uns das duplizieren. Okay, jetzt haben wir ein Problem. Wenn ich die Lebensmittel dupliziere und sie als automatisches Layout erstellen und ein horizontales automatisches Layout hinzufügen, können wir nicht die richtige Größe verstehen , die wir dem Design hinzufügen sollten. Um das Problem zu beheben, erstelle ich einfach ein Rechteck wie dieses und vergrößere die Seiten auf diese Weise. Oder ich kann einfach auf Container füllen klicken. Und so mit dieser 360. Das ist jetzt die Breite von Elementen in voller Größe, aber wir müssen die halbe Größe dieses Rechtecks überprüfen. Um das zu tun, werde ich auf das Rechteck klicken. In der Breite werde ich die Breite durch zwei teilen. Dann habe ich die halbe Größe des Elements bekommen. Aber wir haben immer noch ein Problem. Lass es mich dir zeigen. Vorher vergrößere ich einfach den Rahmen. Klicken Sie einfach auf den Rahmen und drücken Sie die Befehlstaste auf dem Mac und ganz unter Windows. Dann ziehe es so. Okay, jetzt werde ich das duplizieren und automatisches Layout hinzufügen. Und füge es so hinzu. Dann entferne diese horizontale Lücke auf Null. Jetzt haben wir den Zwischenabstand nicht mehr. Wenn wir diese Elementgröße nur als Hälfte des Elements verwenden , um das Problem zu beheben, müssen wir einen Abstand von 15% zwischen diesen beiden Elementen hinzufügen. Wir können das ganz einfach tun, indem wir diese Lücke über 15 hinzufügen. Und klicken Sie auf Dirrangle, damit der Container gefüllt wird. Und klicken Sie auf dieses Rechteck und lassen Sie es den Container füllen. Auf diese Weise erhalten wir die richtige Größe. Lass uns das Gleiche dafür tun. Um das zu tun, müssen wir zunächst den Rahmen auswählen. Im Frame werde ich den TS-Feldcontainer hinzufügen und ich werde auch diesen Füllcontainer hinzufügen. Danach klicke ich hier und mache diesen Raum zwischen 215. Und jetzt müssen wir nur noch das Sektengewirr vergrößern . Um das zu tun, können wir einfach das Rechteck auswählen und es zu einem Container machen und wir können das Gleiche damit machen Okay. Auf diese Weise erhalten wir einfach eine perfekte Größe. Jetzt werde ich diesen Teil entfernen, dann müssen wir weitere Änderungen vornehmen. Zuallererst werde ich die Höhe dieses Lebensmittelbildes auf 200 erhöhen , und jetzt kann ich es in eine Komponente umwandeln und andere Änderungen vornehmen. Dazu klicke ich auf das Design und dann auf Concrete Component. Ich benenne das hier in Lebensmittel um. Okay. 29. Beliebte Lebensmittel entwerfen - Teil 02: Lassen Sie uns nun die Änderungen vornehmen. Zuerst werde ich diesen Stern in unsere Markenfarbe ändern. Die Markenfarbe ist Grün. Entschuldigung, ich markiere den Stern und den Text füge dann Farbe wie diese grüne Farbe hinzu. Und jetzt stellen wir uns vor, wenn wir einen größeren Namen haben, versuchen wir, einen größeren Namen hinzuzufügen. Und wenn wir einen größeren Namen hinzufügen, passt er nicht perfekt zusammen. Um das Problem zu beheben, können wir diesen Füllbehälter einfach erstellen und er passt sich jetzt an die Anzahl der Texte an. So wie das. Wenn wir den Preis erhöhen, wird er auch etwas kleiner , da wir diesem Text eine linke Spalte hinzufügen können Auf diese Weise haben wir einen Abstand zwischen diesen beiden Abschnitten Dazu drücke ich die Befehlstaste und wähle den Text aus. Und drücke die Umschalttaste, um ihn in ein automatisches Layout umzuwandeln. Danach füge ich Polsterung hinzu, die wie krank übrig geblieben ist, mache es umarmen und Wenn wir dann den Namen so hinzufügen, wird er sofort lebendig sofort Jetzt werde ich das als behoben mit einstellen. Dann drücke ich den Befehl X, um es auszuschneiden und es wie folgt auf ein Aufkleberblatt einzufügen. Okay, ich werde diesen auch entfernen. Jetzt werde ich diesen Fußgegenstand begutachten und schleppen und rauben. Dann drücke ich die Befehlstaste, um es zu duplizieren. Dann markiere ich diese beiden Objekte und drücke die Umschalttaste, um zum automatischen Layout zu gelangen. Dann mach es horizontal. Dann ändere diesen Abstand auf 15. Was passiert, wenn sie an der Reihe ist? Okay, jetzt würde es so aussehen. Jetzt haben wir das Grunddesign müssen auch die Ecken ändern. Um die Ecken zu ändern, gehe ich zur Masterkomponente und füge Ecken hinzu. Folie 50. Es hat nicht funktioniert. Okay, es funktioniert nicht, das Problem zu beheben Gehen wir zur Master-Komponente und fügen die Feldfarbe hinzu. Jetzt können wir die Ecken sehen. Außerdem müssen wir einige Polster hinzufügen , bevor wir Polster hinzufügen. Wenn wir die Ecken dieses Rechtecks reduzieren, können wir das Problem beheben Wir müssen nur die obere linke und die obere rechte Ecke reduzieren. Also lass uns sie 15 so machen. Ordnung, und dann müssen wir etwas Polsterung hinzufügen, um hier Polsterungen hinzuzufügen Ich mache die untere Polsterung auf 15. Und wir brauchen keine oberen Polster, aber wir brauchen eine linke und rechte Polsterung aber wir brauchen eine linke und rechte Also klicken Sie einfach hier und fügen Sie es als 15 oder so hinzu. Und das als 15. Eigentlich müssen wir nur für diese beiden Abschnitte eine Polsterung hinzufügen Um es hinzuzufügen, können wir diesen Abschnitt umschließen, ein weiteres automatisches Layout, und jetzt können wir das Pad wie folgt zu diesem automatischen Layout hinzufügen Ich denke, 15 sind zu viel. Fügen wir es etwa sechs hinzu. Und los geht's. Wenn wir es auf dem Design überprüfen, wird es so aussehen. Und jetzt können wir einen Schatteneffekt hinzufügen. Um das Hinzufügen von Schatteneffekten zu verbessern, gehen Sie zu Effekt. Und jetzt klicke auf das Sonnensymbol. Und lassen Sie uns zwei machen und die Unschärfe wird zwei sein. Okay, dann können wir diesen Schlagschatten speichern, indem wir hier klicken. Und klicken Sie auf dieses erste Symbol. Und lassen Sie uns den Namen als Food Item Effect hinzufügen. Okay, wenn wir es jetzt auf dem Design überprüfen, wird es so aussehen. Jetzt müssen wir nur noch einige Bilder hinzufügen und die Originaldetails ausfüllen. Außerdem müssen wir den Abstand zwischen diesen beiden Abschnitten zwischen beliebten Lebensmitteln und diesem Lebensmittel korrigieren zwischen diesen beiden Abschnitten zwischen beliebten Lebensmitteln und . wähle ich diese beiden Artikel aus und drücke Chef A. Dann können wir die Größe anpassen. Mal sehen, die Größe, die wir hier verwenden, ist 15. Und lassen Sie uns das auf 50 ändern. Okay, jetzt wird es so aussehen. Wir können also einfach diesen Frame auswählen und die Befehlstaste drücken, um ihn zu duplizieren. In der nächsten Lektion werden wir dem Lebensmittel echte Details hinzufügen. 30. Beliebte Lebensmittel entwerfen - Teil 03: Okay, jetzt müssen wir Details für jedes einzelne Lebensmittel hinzufügen . Also schnappe ich mir Namen von Lebensmitteln mit Pommes. Ich habe also ein Bildset, also habe ich jetzt alles, was ich brauche, um echte Lebensmittel herzustellen. Fangen wir mit diesem an. Zuerst werde ich den Fußnamen ändern. Gehen wir zu diesem Google-Dokument. Sie finden die Fußnamen und Bilder in der Beschreibung oder im Abschnitt Ressourcen. Ich kopiere den Namen und drücke die Befehlstaste und wähle den Text aus. Drücken Sie, um den Text zu markieren , und füge den Fußnamen hier ein. Wenn ich es einfüge, können Sie deutlich erkennen, dass wir ein Ausrichtungsproblem haben werden, was bedeutet, dass wir dieses zweite Fußelement vergrößern müssen , wenn das erste Lebensmittel größer wird. Also, wie man das behebt Als Erstes werden wir versuchen, diese Instanz anzupassen. Ich glaube, Sie erinnern sich, dass dies die Hauptkomponente für Lebensmittel ist die Hauptkomponente für Lebensmittel und dass dies die Instanzen dieser Komponente sind. Lassen Sie uns diesen anpassen. Und wenn wir dieses Problem behoben haben, können wir die Änderungen auf die Master-Komponente anwenden. Ich drücke die Befehlstaste und wähle das Lebensmittel aus. Dann haben wir ein Problem mit der aktuellen Höhe vertikalen Größenänderung. Aufgabe festlegen. Lassen Sie uns versuchen, es so einzustellen, als ob es sich Containerdaten handelt, es ist einfach behoben. Und versuchen wir, den Namen des Lebensmittels zu erhöhen. Drücken Sie die Befehlstaste und wählen Sie den hochroten Text aus. Drücken Sie dann Befehl C und Einfügen. Ein paar Mal so. Okay, jetzt passt sich das Essen dem anderen Lebensmittel an. Fangen wir mit den Details an. Ich werde die Details von hier und nach dem Befehl kopieren und den Text auswählen. Drücken Sie dann den Befehl „ Steuerung einfügen“. Wir kopieren dann den Preis. Klicken Sie so und fügen Sie es so ein. Lass uns zum nächsten gehen wie diesem. Einfügen, Preis kopieren. Fügen Sie den Preis ein. Gehen Sie also zur nächsten Zeile und machen Sie dasselbe. Okay, jetzt müssen wir die Rahmengröße erhöhen. Dazu klicke ich einfach auf dieses Verschiebewerkzeug und wähle den Rahmen aus. Drücken Sie dann Command auf dem Mac und Control auf Windows. Dann können wir die Rahmenhöhe anpassen , ohne das Co-Design zu ändern. Lassen Sie uns weitere Details hinzufügen. Okay, ich drücke auf Moto, jetzt haben wir die Details. Und hier müssen wir auch die vertikale Freezesize an den Feldcontainer anpassen Okay, jetzt sieht es gut aus. Also ist es Zeit, die Bilder hinzuzufügen. Das Hinzufügen von Bildern ist wirklich einfach dem Gesichtsbefehl und dem Flak Fang Image Fanger Hier können wir auf dieses kleine Dropdown-Symbol und dann auf das Slash-Video mit flachen Bildern klicken Und lass uns zum Bilderordner gehen. Okay, wählen Sie hier das Bild aus und klicken Sie auf das Rechteck. Es wird ein Bild, dann mache dasselbe zuerst mit dem Design Okay, wir haben diesen Teil erfolgreich abgeschlossen. Lassen Sie uns also eine Vorschau des Designs anzeigen. Lass uns in die Gegenwart gehen. Los geht's. Das ist das aktuelle Design. Und jetzt können wir die Sternebewertung nach Belieben ändern. Im nächsten Schritt müssen wir den zweiten Abschnitt hinzufügen, den Abschnitt mit empfohlenen Lebensmitteln. Im nächsten Video werden wir herausfinden, wie das geht. 31. Abschnitt „Empfohlene Lebensmittel“ entwerfen: Jetzt müssen wir den empfohlenen Fußabschnitt erstellen. Es ist wirklich einfach. Markieren Sie einfach den Bereich Ofular Food und drücken Sie Befehl C oder Controls Drücken Sie dann einfach Command oder Control, und schon erhalten Sie das Duplikat von Ofular Ich klicke auf den Rahmen und erhöhe die Größe des Kinderwagens, indem auf dem Mac die Befehlstaste oder auf Windows die Strg-Taste Lass es uns so machen. Okay. Und jetzt kann ich den Titel ändern. Gehen Sie einfach hierher und doppelklicken Sie hier, drücken Sie Befehl C, um es zu kopieren, und drücken Sie hier klicken und drücken Sie die Befehlstaste, um es so einzufügen. Es ist wirklich einfach. Jetzt haben wir also die beiden Abschnitte. Wenn Sie möchten, können Sie die Lebensmittel ändern. In diesem Fall konzentrieren wir uns jedoch hauptsächlich auf das Design, weshalb ich die Lebensmittel nicht ändern werde . Okay. In der nächsten Lektion werden wir den Bereich für die Suche nach Lebensmitteln entwerfen. 32. Suchseite gestalten - Teil 01: Okay, jetzt müssen wir diese Suche nach einer Seite gestalten. In einem unserer vorherigen Videos haben wir bereits den Header-Teil der Seitensuche entworfen. Aber fangen wir bei Null an. Zuallererst werde ich diese beiden Frames entsperren, und jetzt wähle ich die Suchseite und entferne sie, weil ich sie von Grund auf neu erstellen muss . Dann kann ich diesen Drahtrahmen von hier bekommen. Jetzt erstelle ich dafür einen neuen Rahmen, klicke auf den Rahmen und die Rahmengröße, die wir ausgewählt haben, war iPhone 13 und 14, in Ordnung. Und hier werde ich den Namen des Frames so ändern, dass er nach Forts sucht. Okay, dann füge ich mit Layout Es wird Spalte fünf sein. Die Marge wird bei 15 und die Spaltbreite bei 50 liegen. Tatsächlich haben wir das Raster , das wir bereits verwendet haben, und das ist das richtige Raster Als ersten Schritt füge ich diesem Rahmen nun eine automatische Ebene hinzu Ich kann einfach auf A drücken oder diesen Plus-Zyklus des automatischen Layouts drücken. Und jetzt muss ich die Einstellung ändern. Die horizontale Polsterung wird also 15 sein und die vertikale Polsterung wird ebenfalls 15 sein Dann kann ich mich nicht mehr an die Layouteigenschaften erinnern , die ich zu Hause verwendet habe Also klicke ich auf Home Frame und hier haben wir die Details. Der vertikale Abstand zwischen den Elementen wird also 60 sein, also machen wir ihn richtig. Jetzt müssen wir dieses Menü hinzufügen. Wenn Sie sich an das Video erinnern, das wir Variante unserer Hauptkomponente erstellen, erstellen wir eine Variante für diesen Header-Bereich. Wenn ich zum Sticker-Blatt gehe, ist hier die Header-Master-Komponente und hier ist die Variante. Okay. Jetzt kann ich direkt auf diese Komponente zugreifen, indem ich eine Instanz erstelle. Dazu klicke ich auf den Frame und gehe zu diesem Assert-Bereich. Hier kann ich den Header-Bereich sehen. Ich klicke einfach darauf und hier ändere ich die Eigenschaft auf Variante, und jetzt klicke ich auf diesen Inter Inter und füge ihn hier ein. Auch in diesem Komponentenbereich kann ich die Komponente ändern. Oder ich kann die Variante ändern . Okay. Jetzt drücke ich T und kopiere diesen Text, dann komme ich her und füge den Text so ein. Jetzt klicke ich auf das M-Tool. Jetzt ist unser Header-Teil fertig und jetzt müssen wir die Suchleiste hinzufügen. In der Suchleiste haben wir also einen Suchtext namens Burger. Wenn wir also diese Suchleiste in eine Komponente konvertieren und eine Variante erstellen, die wir für den Header erstellt haben, können wir diese Komponente direkt verwenden. Also lass es uns tun. Zuerst gehe ich zum Ebenenbedienfeld und wähle die Schrägstrich-Bar-Komponente aus. Dann drücke ich den Befehl x, um sie zu öffnen. Dann werde ich es auf das Aufkleberblatt legen. Lass es uns hinstellen. Hier, jetzt konvertiere ich es in eine Komponente. Wählen Sie einfach das Element aus und klicken Sie auf Komponente erstellen. Hier werde ich den Namen in Suchleiste ändern. Okay. Jetzt kann ich eine Variante dieser Komponente erstellen und dazu die Suchvorgänge hinzufügen . Ich wähle die Master-Komponente und klicke auf diese Variantenschaltfläche, und wenn ich möchte, kann ich die Variante jetzt umbenennen . In diesem Fall füge ich einen Begriff wie diesen hinzu. Und jetzt kann ich hier einen solchen Text hinzufügen. Lass uns einen Text kopieren und ihn hier hinzufügen. Quadrieren wir einen Text und der Textname lautet Burger. Okay. Jetzt können wir Kacheln hinzufügen. Wir haben also einen vorherigen Text, und in diesem Fall werde ich Parag-Text hinzufügen und ihn dann hier einfügen Jetzt muss ich diesem Text also die absolute Position zuweisen. Also klicke ich hier. Und jetzt kann ich es überall hinstellen, wo ich will. In diesem Fall werde ich es so platzieren. Jetzt gehe ich zur Seite mit der Suche nach Lebensmitteln und klicke auf Call Act. Hier in unserer Suchleiste wird die Suchleiste einfach so gelöscht. Okay. Jetzt habe ich ein Problem , denn wenn ich versuche, die Variante zu nehmen, die Variante hier nicht aufgeführt. Der Grund dafür ist, dass ich die Variante umbenenne. Wenn ich es umbenenne, entferne ich einfach unsere Eigenschaften. Um das Problem zu beheben, kann ich hier klicken und auf Neu hinzufügen Dann kann ich die Variante umbenennen. In diesem Fall benennen wir es mit dem Begriff um. Okay. Nun wollen wir sehen, was passieren wird. Klicken Sie auf den Instant und hier haben wir die Variante. In Ordnung, wir haben die Suchleiste erstellt. In der nächsten Lektion müssen wir die Artikelliste erstellen. Ebenfalls am Anfang dieses Videos entferne ich einfach die Suchleiste und mache sie zu einer Komponente. Lassen Sie uns also eine Instanz dieser Suchleiste erstellen und sie der Startseite hinzufügen. Ich gehe auf die Asarch-Seite und hier raube ich die Suchleiste wie folgt 33. Suchseite gestalten - Teil 02: Okay, lassen Sie uns mit dem Design fortfahren. Hier sollten wir einen Text mit dem Namen Suchergebnis für Burger haben . Dieser Burger-Text wird also entsprechend dem System geändert , nach dem wir hier suchen. Lassen Sie uns also ein Textfeld erstellen und so etwas wie Suchergebnisse für eingeben so etwas wie Suchergebnisse für Und wir werden Doppelcode hinzufügen. Und in diesem Fall werden wir den Text als Wort verwenden. Okay, jetzt werde ich den Text hervorheben und zum Textstil übergehen. Hier werde ich Test-Unterüberschriften wie diese sagen. Und jetzt werde ich das System hervorheben. Und lass es uns so auf grün ändern. Okay, jetzt müssen wir dieses Kartensystem oder das Ergebnissystem erstellen . Bei der Suche nach Lebensmitteln haben wir drei Aber wie ich bereits sagte , wenn wir drei Lebensmittel in das Suchergebnis aufnehmen, trägt das nicht zur Barrierefreiheit bei Lassen Sie uns also diese Art von Design erstellen. Jetzt haben wir bereits die Lebensmittelkomponente, was bedeutet, dass wir zur Bewertung gehen und einfach das Lebensmittel auswählen und es wie folgt hinzufügen können . Und jetzt wähle ich den Text und das Lebensmittel aus. Dann drücke ich Shift , um ein automatisches Layout zu erstellen. Okay, es gibt ein Problem, wenn ich das Lebensmittel hinzufüge , es wurde nicht in den Fußrahmen der Suche aufgenommen. Also lass es uns entfernen. Und ich werde diesen Text auch so zum Such-Fußrahmen hinzufügen . Und wir werden diesen Rahmen entfernen. Okay, jetzt fangen wir es wieder an. Zuerst gehe ich zu den Asserts und ziehe es einfach so per Drag-and-Drop es einfach so per Drag-and-Drop Dann werde ich das Lebensmittel und den Text hervorheben. Dann drücke ich Chief. Okay, und hier muss ich die Zwischengröße auf 15 reduzieren. Ich glaube, es ist 15. Ja, es ist 15. Ja, jetzt füge ich noch ein Lebensmittel wie dieses hinzu. Dann wähle ich diese beiden Lebensmittel aus und drücke Shift A, um sie horizontal anzuordnen. Okay, es scheint, dass wir ein Problem haben. Also habe ich gesagt, die Polsterung dieses Rahmens ist 15, aber im Hauptraster ist es anders Versuchen wir also, die Parameter des Hauptrasters zu überprüfen. Oh, wir müssen es auf 15 ändern. Lass es mich hier sehen. Ja, hier drin sind es 15, also ändern wir es auf 15. Oh, ich habe das Problem. Wir verwenden dieses Hauptraster-Layout für den Draht Pm, und auf dem High-Fidelity-Y-Layout haben wir ein anderes Layoutraster. Speichern wir also dieses Rastersystem und dann können wir es zur Suche hinzufügen Ford. Dazu klicke ich hier und klicke auf Plus Cycle. Dann werde ich hier High Five Hi Fi hinzufügen , was ein kurzfristiges High-Fidelity-Design bedeutet. Dann klicke ich auf Create This Style. Wenn ich jetzt auf „Ford suchen“ klicke und wir diesen entfernen, dann klicke ich hier. Dann haben wir das Hi-Fi-Grid-System wie dieses. Wenn Sie sich also nicht an das Netzsystem erinnern, können Sie sich das vorherige Video über das Netzsystem ansehen. Jetzt muss ich diesen Rahmen so duplizieren. In diesem Fall kann ich dieselben Lebensmittel für das Suchergebnis verwenden . Das heißt, ich muss die Arbeit nicht wiederholen, weil ich es bereits getan Ich werde diesen Rahmen kopieren und hier Daten hinzufügen. Zuerst werde ich diesen kopieren. Dann drücke ich Command Control C um zu kopieren. Und ich klicke einfach auf diesen Rahmen und es ist so. Okay? Dann wähle ich den Such-Fußrahmen aus und drücke die Befehlstaste und erhöhe die Framegröße wie folgt. Okay? Jetzt kann ich dieses leere Lebensmittel einfach entfernen. Wenn wir nun den Abstand zwischen der Suchleiste und den Suchergebnissen überprüfen , ist er größer und es gilt das Gesetz der gemeinsamen Region, ähnliche Artikel gruppiert werden. Das heißt, wir können diese beiden Abschnitte als einen einzigen Abschnitt zusammenfassen. Dazu klicke ich auf diesen Hauptrahmen des Suchergebnisses und dann auf die Suchleiste und drücke Chief um das automatische Layout zu aktivieren. Dann werde ich diesen Bereich auf 15 reduzieren. Es sollten 15 sein wie diese. Und jetzt haben wir eine Such-Fußseite. Lassen Sie uns die Rahmengröße verringern. Okay, jetzt können wir die Vorschau überprüfen. Es wird so aussehen. Und jetzt haben wir ein Problem. Lassen Sie uns das Problem beheben. Lassen Sie uns sehen, ob das Problem auf der Startseite so ist , dass das Taschentuch nicht auf der Startseite ist, was bedeutet, dass es nur auf der Suchseite ist. Es passiert, wenn ich ein automatisches Layout mit dem gesamten Abschnitt erstelle , um das Problem zu beheben. Lassen Sie uns einige Anpassungen vornehmen. Zuerst wähle ich diesen Rahmen aus und lass uns dafür sorgen, dass wir uns okay fühlen. Es wurde gerade repariert. Lass uns nochmal sehen. Okay, jetzt ist das Taschentuch weg Alles klar, in der nächsten Lektion werden wir zur nächsten High-Fidelity-Benutzeroberfläche übergehen , was Single Food Page bedeutet. 34. Pro-Tipp: Hier ist ein Prototyp, mit dem Sie Ihre UI-Designfähigkeiten verbessern und sich vom Design inspirieren lassen Wenn ihr also keine Designinspirationen habt oder nicht wisst, was ihr für die Liste wie diese erstellen sollt und wie sich die Kopfzeile schleifen soll oder ihr die Best Practices und Standards nicht kennt, könnt ihr euch immer die Designsysteme wie Google Material oder Apple Human als Beispiel ansehen Google Material oder Apple Human Gehen wir zu Material Design. Das ist also das offizielle Designsystem von Google. Hier können wir Komponenten an Komponenten überprüfen. Gehen wir zu den Schaltflächen und überprüfen wir die häufigsten Schaltflächen. Und hier finden Sie alle Details und Richtlinien, die Sie befolgen müssen , um eine Schaltfläche zu erstellen. Das sind also Standard-UY-Regeln oder UY-Designs. Deshalb sollten Sie dieser Art von Designsystem folgen , wenn Sie keine Designideen haben, wenn Sie ein Anfänger sind. Wenn wir zum Beispiel zu den Richtlinien gehen und hier die Details sehen, während der Bildschirm ausgeblendet ist. Das trägt zu unserem Design bei. Hier machen wir keinen Abschnitt und wenn wir dieser Art von Designsystem folgen , können Sie natürlich die benutzerfreundliche Oberfläche nutzen, auch wenn Sie keine UX-Designkenntnisse haben . In diesem Fall haben wir also das UX-Prinzip, halten Sie es einfach. Blödes Ux-Prinzip. Deshalb sollten Sie solche Designrichtlinien befolgen. Ein anderes Beispiel Wenn wir zu den Karten gehen und die Kartenliste bereits erstellt Wenn wir also hier hingehen, können wir die Richtlinien überprüfen, und hier haben wir die Dinge, die wir befolgen müssen. In dieser Serie werde ich vielleicht nicht alle Elemente der Benutzeroberfläche vervollständigen, aber Sie können diese Art von Designsystemen jederzeit überprüfen und verstehen , wie man ein perfektes Design erstellt. In diesem Fall können Sie, wenn Sie die verschiedenen Apps erstellen, die Richtlinien des Designsystems befolgen und Komponenten entsprechend Ihren Anforderungen erstellen . 35. Einzelne Lebensmittelseite gestalten – Teil 1: Wir haben die Startseite und die Suchfußseite erfolgreich gestaltet . Jetzt müssen wir die einzelne Fußseite entwerfen. Zuallererst kopiere ich diesen Drahtrahmen und füge ihn auf der Moke-Up-Seite ein Okay, jetzt werde ich einen neuen Rahmen erstellen. Die Rahmengröße wird also iPhone 13.14 sein . Lassen Sie uns nun den Frame-Namen umbenennen Okay, jetzt ich und Layout Grid. Klicken Sie einfach hier und hier ist das gespeicherte Layoutraster, dieser Stil. Okay. Jetzt müssen wir in diesem Header-Bereich, um das zu tun, wir können einfach zu Act gehen, und hier haben wir den Header-Bereich. Nur das kann es hierher bringen. Und lassen Sie uns die Eigenschaft auf Variante zwei ändern. Ich habe vergessen, diesem Rahmen ein automatisches Layout hinzuzufügen. Fügen wir also das hinzu, klicken Sie einfach auf den Rahmen und klicken Sie auf den Plus-Sinus bei Auto Layout. Und lassen Sie uns die Werte überprüfen. Okay, die Werte oben, unten, links, rechts, die Abstände sind 15 50 und der vertikale Abstand zwischen den Elementen beträgt 50. Okay, jetzt sollte der Titel des Leerzeichens in den Titel des Lebensmittelelements geändert werden In diesem Fall wähle ich mein Essen als dieses aus. Drücken Sie die Befehlstaste und wählen Sie den Text direkt aus. Drücken Sie im Seitentitel auf Wählen Sie es aus und geben Sie den Befehl zum Kaffee ein. Ich lasse einfach den Namen des Fußes hinter mir. Wenn ich es so einfüge, ändert sich der Schriftstil. Zuerst füge ich es in die URL-Leiste ein und füge es dann so ein. Okay, jetzt wähle ich Motto. Jetzt müssen wir dieses Karozel entwerfen. Das ist der Rocrozel. Lass es uns entwerfen. Zuerst erstelle ich ein Rechteck und lass uns das Rechteck vergrößern. Machen wir 300 draus, richtig, 200, okay. Dann dupliziere ich dieses Rechteck und wähle beide Rechtecke aus und drücke Chit Dann erstellt es ein automatisches Layout und dann ein horizontales Layout . Okay? Jetzt ist dieses zweite Rechteck nicht sichtbar. Um es sichtbar zu machen, kann ich auf diesen einzelnen Fußrahmen klicken. Und wenn ich darauf klicke, sehen wir das Kontrollkästchen für den Clip-Inhalt. Und es ist aktiviert, wenn ich es deaktiviere, werden die Elemente außerhalb des Rahmens sichtbar sein Okay? Nun, das ist ein Karussell, was bedeutet, dass es horizontal scrollen kann, okay? Jetzt werde ich diese Lücke auf 15 reduzieren , was bedeutet, dass dies das erste Kartenkarussell-Objekt ist und dies das zweite Karussell-Objekt und dies Okay? Jetzt werde ich den Abstand dazwischen auf 15 reduzieren, so wie hier. Dann kann ich so viele Karussellelemente hinzufügen, ich werde es nicht tun. Fügen wir vier davon hinzu. Vielleicht werden drei hier arbeiten. Lass uns auf dieses erste Rechteck klicken und es durch das Bild ersetzen. Dazu gehe ich zu Place Image, und hier habe ich drei Bilder. Fügen wir sie zu diesem Dreieck hinzu, solchen wie diesem. Okay, jetzt können wir mit dem Design beginnen. Zuerst werde ich die Ecken um 15 reduzieren. Und jetzt müssen wir den Titel hinzufügen. Füge den Titel hinzu. Ich drücke einfach darauf und dann hier. Dann Grad, füge Text wie diesen hinzu. Eigentlich können wir den Text von hier kopieren. Kopiere ihn hier vorbei. Und jetzt können wir den Textstil gewinnen. Jetzt wähle ich diesen Lebensmitteltitel und dieses Zero-Karussell aus und füge das automatische Drücken Sie Shift 10. Okay, jetzt werde ich das zwischen Tempo 15 ändern. Danach klicke ich auf diesen und füge den Eckenradius als 15 hinzu. Wir werden es auch für diesen machen. Okay, jetzt drücke ich einfach auf dieses automatische Layout und drücke die Befehlstaste. In Windows sollte es das alte Steuerelement sein. Dann werde ich die Größe auf diesen Wert reduzieren. Jetzt drücke ich auf Single Food und klicke auf Clip Content. Dann klicken Sie hier und klicken Sie auf Clip Content. In Ordnung, jetzt ändere ich diesen Fix in Fill Container. Jetzt fangen wir an, diesen Dollarbetrag und die Sternebewertung hinzuzufügen . 36. Einzelne Lebensmittelseite gestalten – Teil 2: Fangen wir an, diesen Dollarbetrag und die Sternebewertung hinzuzufügen . Also werde ich hier den Dollarbetrag und die Sternebewertung unter dem Titel hinzufügen . Also lass es uns tun. Zuallererst werde ich diese Titelgröße in die Header-Größe ändern , und hier fügen wir den Preis hinzu. Um das zu tun, drücke ich einfach weiter und erstelle Price Dollar Two. Okay, dann lassen wir sie automatisch anordnen. Es sollte ein horizontales Layout sein und die Breite sollte dem Füllcontainer entsprechen. Und lassen Sie uns einem Foto wie diesem eine horizontale Lücke hinzufügen. Dann ändern wir diese Farbe in Grün. Lass es uns so hinzufügen. Jetzt müssen wir hier eine Sternebewertung hinzufügen. Dazu kann ich diese Sterne von einem einzelnen Lebensmittel kopieren oder ich kann zu den Plugins in Plug in gehen. Gehe zu Fonts On Fonts. Hier haben wir einen Stern und lassen uns den Stern auswählen und ihn ein paar Mal duplizieren Und markiere die Sterne von hier aus. Und drücken Sie Shift A. Dann ändern Sie den horizontalen Abstand auf 15. Verkleinern wir die Größe dieser Sterne. Klicken wir auf Conc Strain Proportions und machen sie 14 okay Und wähle sie aus, die horizontale Lücke wird in Ordnung sein. Und die Hälfte des Sterns, das ändert seine Größe auf 14. Lege es in das automatische Layout. Und das, okay, jetzt haben wir Star. Fügen wir es dem Abschnitt mit einem Fuß so hinzu. Einfach ausschneiden und so einfügen. Dann müssen wir die Bewertung hinzufügen. Dazu drücke ich und erstelle ein Textfeld. Dann machen wir vier draus. Ändern Sie diese Textgröße auf 16 und heben Sie die Verknüpfung auf. Ändern wir es in, dann kann ich diesen Text in das automatische Layout einfügen Dann füge es so ein. Markieren Sie dann das automatische Layout, damit es links und mittig ausgerichtet , und wechseln Sie zu Erweiterte automatische Layouteinstellungen. Und klicken Sie auf diesen Stick , um die Taste Base Line auszurichten. Okay, jetzt werde ich diese Farbe in Themenfarbe ändern. In Ordnung, jetzt können wir das in dieses automatische Layout einfügen. Drücken Sie einfach Strg X oder Befehl X, um es zu schneiden. Dann befehlen Sie, es einzufügen. Okay, also können wir die Zwischengröße der Sterne reduzieren. Machen wir drei draus. Okay, wenn ich es in der Bewertung nachsehe, wird es so aussehen. Tatsächlich können wir das zwischen der Größe dieses Textes und dem Anfang verringern . Klicken Sie einfach auf Automatisches Layout starten zehn. Klicken Sie auf Automatisches Textlayout und fügen Sie ein weiteres automatisches Layout hinzu. Lassen Sie uns diese beiden reduzieren. Okay, es ist besser. Jetzt ist es an der Zeit, diese Schaltfläche und das Textbuch so zu gestalten , dass die Anzahl der Artikel ausgewählt Ich denke, das sieht besser aus , ohne eine Zeile oder eine Textgrundlinie hinzuzufügen Lassen Sie uns eine Linie entfernen, die Grundlinie testen. Okay. 37. Einzelne Lebensmittelseite gestalten – Teil 3: Okay, lassen Sie uns den Zählcontroller erstellen und die Schaltfläche mit zwei Karten hinzufügen. Zuallererst werde ich hier einen Rahmen wie diesen erstellen. Lassen Sie uns im Rahmen seine Größe so anpassen, 50 mal 14135 funktionieren wird Nun, dann werde ich die Ecken um 15 reduzieren . Lassen Sie mich vorerst etwas Füllfarbe hinzufügen. Okay, die Ecken 15. Jetzt füge ich den Est hinzu, klicke auf Tron und ändere die Strichfarbe auf diese Primärfarbe. Und jetzt werde ich die Füllfarbe entfernen. Okay, jetzt muss ich Pluszeichen und Minuszeichen hinzufügen. Gehen wir also zu den Ressourcen-Plug-ins, Phone Tosum, Old Phone Tosum Wir können uns diese Icons besorgen, Ole search plus. Ordnung, hier haben wir ein Pluszeichen und wir bekommen auch ein Minuszeichen. Okay. Jetzt füge ich die plus zehn hinzu, Minuszeichen im Rahmen. Und dann werde ich verkaufen, dann werde ich Steuern hinzufügen. Dieser Text wird einer sein. Und es gibt Textgrößen hinzufügen. Kopf auswählen, Kopf wird hinzugefügt. In Ordnung. Jetzt klicke ich auf den Frame und dann Shift, um das automatische Layout zu aktivieren. Danach werde ich die Mitte ausrichten. Dann füge ich diese horizontale Lücke zwischen zwei Autos hinzu. Fügen wir nun eine horizontale Polsterung mit 15 und vertikale Polsterung mit vier hinzu In Ordnung, jetzt werde ich diese Frames entfernen. Die Höhe wurde geändert, also nehmen wir die feste Höhe und fügen die Höhe 40 hinzu. Das. Okay, jetzt kann ich die Feldfarbe auf Grün ändern. Und jetzt haben wir den Zählcontroller. Jetzt ist es an der Zeit, eine Schaltfläche zu erstellen. Um eine Schaltfläche zu erstellen, erstelle ich einen weiteren Rahmen und es gibt nur eine Rahmengröße. Die Rahmenhöhe beträgt 50 und der Rahmen 135. Geben wir den Radius der Ecken auf 50 an. Eigentlich müssen wir den Eckenradius als Suchleiste anpassen , weil wir die beibehalten müssen Es wird also 25 sein, also machen wir 25 draus Dann füge ich eine Feldfarbe wie diese hinzu, Grün. Dann reduziere ich die Eckpunkte für die Pfundkontrolle auf 25. Okay, jetzt können wir das Textfeld zu diesem Schaltflächenrahmen hinzufügen und der Text wird Jetzt machen wir diesen Rahmen als automatisches Layout. Fügen wir nun die horizontale Polsterung mit 20 und die vertikale Polsterung mit 50 hinzu 15 ist zu viel. Lassen Sie uns die Größe dieser Suchleiste überprüfen. Lassen Sie uns die vertikale Polsterung automatisch einstellen. Lassen Sie uns dies als feste Breite festlegen. Und lassen Sie uns die Höhe als feste Höhe festlegen. Und die Größe wird passen. Lassen Sie uns nun diese Etikettengröße auf ein solches Unterfeld ändern. Dann machen wir daraus einen Linienmittelpunkt. Jetzt haben wir diesen Knopf. Lassen Sie uns eine Komponente erstellen. Und benenne die Komponente als Schaltfläche um. Okay, dann Einkaufswagen und geh zu unserem Aufkleberbogen. In das Aufkleberblatt werde ich es einfach so einfügen. Okay, jetzt holen wir uns die Instanz dieser Schaltfläche wie folgt. Dann ändern wir das Etikett in ein Auto mit zwei Autos. Okay, was wir jetzt tun können, ist die Größe dieser Details auf dem Zählcontroller zu reduzieren , denn wenn wir das mit der Taste vergleichen, sind es zwei große. Lassen Sie uns also zuerst die Größe der Unterüberschriften von Zahl zwei ändern. Und die Plus- und Minus-Taste eignet sich gut für diese Art von Design Wählen wir also diese beiden Rahmen aus und fügen sie zum automatischen Layout hinzu und machen das Layout horizontal. Danach ändern wir den Wert zwischen Größe und 15. Und jetzt haben wir einen perfekten Button zum Mitnehmen. können wir diesem Hauptrahmen diese Schaltfläche „At to card“ hinzufügen. Wählen Sie den Abschnitt Mit der Karte und drücken Sie den Befehl X, um ihn auszuschneiden, und drücken Sie den Befehl V, um ihn einzufügen. Okay, also werde ich die Höhe dieser Taste auf 50 ändern. Okay, dann wähle diesen Rahmen aus und richte ihn so links in der Mitte aus. Schauen wir uns das Design an, es wird so aussehen. In der nächsten Lektion müssen wir den Abschnitt Beschreibung und Überprüfung erstellen. 38. Einzelne Lebensmittelseite gestalten – Teil 4: Jetzt ist es an der Zeit, eine Beschreibung hinzuzufügen. Also werde ich das Textfeld bekommen, dann werde ich so etwas eingeben. Dann werde ich auf die Seite von Ifs gehen, um hier etwas Dummy-Text reinzubringen Ich werde einfach die Textzeile an dieser Stelle kopieren, die Textzeile Danach werde ich den Text zu einem Absatz machen. Sie müssen es auf diese Weise reduzieren und ich werde nur vier Zeilen beibehalten. Danach füge ich einen weiteren Text hinzu und das wird nur ein Linkaufruf sein, mehr lesen und die Details so ändern , dass keine Überschrift mehr angezeigt wird und die Füllfarbe auf diese grüne Farbe umgestellt wird. Dann legen wir beide Bereiche fest und drücken Shift A. Dann reduziere die Zwischengröße auf 15. Okay, wenn wir wollen, können wir hier Text namens Beschreibung hinzufügen, aber ich werde es so belassen. Nach diesem Text füge ich die horizontale Linie hinzu, um diese beiden Abschnitte voneinander zu trennen Es wird also eine Trennlinie sein Um einen Teiler zu erstellen, klicke ich auf Shape Tool und dann auf Line Und lassen Sie uns einfach eine Linie wie diese ziehen und Umschalttaste drücken, um sie korrekt zu einer Linie zu machen Jetzt hier drin werde ich diese Farbe auf dunkel ändern. Und machen wir diese Größe zu Nullpunkt A im Design. Es wird so aussehen. Wenn wir wollen, können wir diese dunklere Farbe wie folgt in eine dunkelgraue Farbe ändern . 39. Einzelne Lebensmittelseite gestalten - Teil 5: Jetzt müssen wir nur ein Review-Objekt erstellen, um sie zu erstellen Ich werde den Rahmen mit einem Fuß vergrößern Und hier werde ich einen neuen Rahmen erstellen. Und lassen Sie uns die Rahmengröße daran anpassen. Und lassen Sie uns die hohe Aufgabe 135 machen. Jetzt können wir Effekte hinzufügen. Eigentlich können wir dem Frame keine Effekte direkt hinzufügen. Was wir tun müssen, ist ein Rechteck um diesen Rahmen herum zu erstellen und es so zu gestalten. Dann lassen Sie uns die Farbe ändern. Jetzt kann ich eine Ebene erstellen und dann die Details hinzufügen. Zuerst müssen wir die Bewertungen hinzufügen. Dazu wähle ich diesen Bewertungsbereich aus und wandle ihn in eine Komponente um Dann benenne ich ihn in Review the Stars um. Dann schneide ich ihn von hier aus und füge ihn wie folgt in den Elementbereich ein. Dann kann ich hier die Designgröße ändern. Aber bevor ich es ändere, werde ich eine Variante erstellen. Und jetzt können wir die Größe dieser Variante ändern. Um das zu tun, werde ich alle Sterne hervorheben. Und lassen Sie uns mit 25 ändern, 25 ist zu viel. Machen wir es, denn 2020 wird perfekt sein. Und auch diese Textgröße wird 16 sein. Erhöhen wir die Primzahl der Variante. Okay, jetzt können wir zu unserem Design gehen und hier klicken. Gehen Sie dann zu Assets. Unter Vermögenswerte haben wir Bewertungssterne. Zieh es einfach hier an. Eigentlich sollte es hier drin sein, so, okay? Was wir jetzt tun können, ist hierher zu gehen und zu***** zu gehen und auf Versicherungen wie diese Okay. Wählen wir nun die zweite Variante dieses Bewertungssterns aus. Und jetzt lassen Sie uns dieses Problem beheben. Um das Problem zu beheben, klicke ich auf das Rechteck und dann hier, um es zur absoluten Position zu machen Das bedeutet, dass dieses Rechteck auf der anderen Seite dieses Testabschnitts nicht beeinträchtigt wird auf der anderen Seite dieses Testabschnitts nicht beeinträchtigt Lassen Sie uns das Rechteck also oben auf dem Bildschirm platzieren. Dann wähle ich den Rahmen aus und erhöhe die Rahmengröße. Tatsächlich müssen wir diese Breite auf 300 erhöhen, was bedeutet, dass wir das Rechteck zwei vergrößern müssen Danach werde ich den Effekt ändern, denn es wäre toll, wenn der Effekt rund um das Element wirkt, wie in diesem Suchfeld Um das zu tun, gehe ich hierher und lasse uns auf das Rechteck klicken und diese Effekte rückgängig Und klicken Sie hier. Dann mach Y zu Null und mach B acht. Und jetzt sieht es gut aus. Jetzt muss ich etwas horizontale und vertikale Polsterung hinzufügen Fügen wir die Masse 15 mal 15 hinzu. Okay, jetzt haben wir die Vorschau. Also fügen wir hier ein Textfeld hinzu. Lassen Sie uns vorerst Lehm hinzufügen, wenn Text wie folgt ist Verkleinern Sie den Lassen Sie uns dafür sorgen, dass die Aufgabe einen Container füllt. Okay, ändern Sie jetzt die Größe in Paraga. Wir müssen die Höhe dieses Designs erhöhen. Lass es uns auf 200 erhöhen . Erhöhen Sie das auch. Okay, lassen Sie uns diese Lücke auf 50 setzen. Jetzt müssen wir den Avata und den Namen hinzufügen. Dazu erstelle ich eine Lippe reduziere die Größe des Elifs auf etwa 40 mal 40. Was wir jetzt tun müssen, ist ein weiteres Lehrbuch hinzuzufügen und die Lehrbücher werden dann als Unterüberschrift erstellt und so platziert Markieren Sie dann diese beiden Abschnitte und konvertieren Sie sie in ein automatisches Layout oder schließen Sie sie mit dem automatischen Layout um ein automatisches Layout oder schließen Sie sie mit dem automatischen Layout , wiederholen Sie einfach die Umschalttaste A. Dann erstellen Sie ein horizontales Layout A. Dann erstellen Sie ein Hier müssen wir die Position ändern. Der Text wird unten und das Avata-Symbol oben sein. Dann machen wir dazwischen Größe zwei. Und lassen Sie uns eine Linie links in der Mitte machen. Jetzt können wir die Breite erhöhen. Drücken Sie diesen Frame auf den Befehl und vergrößern Sie ihn wie folgt. Lassen Sie uns diesen Wert auch auf die Rechtecke erhöhen , damit wir tatsächlich den Höheninhalt ändern können Hier haben wir 15 untere und obere Polsterungen. Es wird entsprechend dieser Bewertung angepasst. Jetzt haben wir das Bewertungsfeld, und hier können wir den Text mit dem Namen Bewertung hinzufügen. Um das zu tun, klicke ich darauf und lasse es die Größenüberschrift überprüfen und sie über diesem Rahmen und unter diesem platzieren und unter diesem Lassen Sie uns es zuerst so ausschneiden, dann diese beiden Elemente auswählen und zuerst A verschieben dann die Größe auf 50 einstellen Okay, jetzt werde ich dieses Überprüfungsfeld in eine Komponente umwandeln, sie auswählen und auf Komponente erstellen klicken. Dann werde ich es in Review Box umbenennen. Und jetzt werde ich es ausschneiden dann so auf das Aufkleberblatt kleben. Okay, jetzt kann ich auf den Frame klicken und zu Asserts gehen In Asserts haben wir das Bewertungsfeld. Lass uns Instant erstellen und es hier einbauen. Wenn ich zu Layout gehe und es ausschneide, können wir es so einfügen. Danach erstellen wir das zweite Bewertungsfeld. Um das zu tun, kann ich diesen einfach duplizieren. Und lassen Sie uns eine dritte erstellen. Dann werde ich diese drei Bewertungsfelder hervorheben und sie in das automatische Layout einfügen. Danach machen wir es horizontal. Dann klicken Sie hier und klicken Sie auf Clip Content. Und es wird so aussehen. Wir können also auf Clip Content klicken . Und hier sollte diese Bewertung nicht in der Polsterung erscheinen Wenn wir also hierher gehen, wird es so aussehen zu tun, klicke ich auf den Rahmen und drücke die Befehlstaste und passe das an. Das gefällt uns, dann klicken Sie einfach auf den Clip-Inhalt. In Ordnung, jetzt haben wir das Bewertungsfeld. Wenn ich also diesen Inhalt überprüfe, haben wir einen riesigen Abstand zwischen diesen beiden Abschnitten. Lassen Sie uns das also in Echtzeit überprüfen. Wenn Sie es sehen, scheint dieser Abstand zu groß zu sein, weil wir uns bereits am Teiler befinden. Wenn wir diesen Abstand also verringern, hat dies keinen Einfluss auf das Design Außerdem haben wir ein Problem mit dem Schlagschatten im Bewertungsfeld, um das Problem zu beheben Geh hierher, hier. Es wird okay aussehen. Aber ja, wir haben ein Problem. Ich denke, wir sollten, ja, wir müssen die Größe dieser automatischen Ebene erhöhen. Eigentlich können wir die Höhe als Container angeben. Dann fügen wir Padding 15 hinzu. Okay, es ist behoben. Außerdem müssen wir horizontale Polsterungen hinzufügen, etwa 15. Ich denke, 15 sind zu viel für die horizontale Polsterung, mach vier draus . Okay. Ich glaube, jetzt war das Taschentuch weg. In Ordnung. Jetzt markiere ich diese drei Abschnitte und drücke Shift A, um einen anderen Frame zu erstellen. Und jetzt können wir die Größe auf etwa 15 reduzieren und das überprüfen. Okay. Jetzt heißt es, schau. Okay. Auch hier haben wir ein anderes Problem. Weil ich die Polsterung bereits als 15 hinzufüge, muss dieser Wert Null sein Okay. Jetzt sieht es gut aus. Jetzt können wir Namen und Avas hinzufügen. Dazu kann ich auf diesen Frame klicken und den Klickinhalt entfernen Klicken Sie auch auf Single Wood. Dann klicke auf, klicke auf, und hier drücke ich jetzt Command und ciliate dieses Rechteck, Ciliate diese Dann klicke auf Bild platzieren. Hier haben wir Avatare. Klicken Sie also einfach auf diese Avatare und fügen Sie sie hinzu. Wir werden dasselbe mit dem Rest des Designs machen. Okay, jetzt wird es so aussehen. Also das karusselliert entweder Aktionen oder das horizontale Scrollen Wir werden im Prototyp-Bereich erstellt. Im Moment erstellen wir einfach das UY, klicken Sie auf den Einzelfußrahmen und dann auf den Clip-Inhalt. Dann klicken Sie hier und klicken Sie auf Click Content und fügen Sie das Kontrollkästchen hinzu. Und so sieht das Sofadesign aus. Jetzt werde ich diese Einzelfußrahmengröße so reduzieren. Jetzt haben wir drei Frames fertiggestellt und müssen diesen Einkaufswagen und diese Pop-Up-Box erstellen Lassen Sie uns das für die nächsten Videos machen. 40. Warenkorbseite gestalten - Teil 01: Jetzt müssen wir die Herzseite entwerfen. Also lass uns damit anfangen. Drahtrahmen-Set. Ich werde den Herzrahmen kopieren. Und lass uns hier auf die Moka-Seite gehen. Ich werde es so einfügen. Und jetzt werde ich einen neuen Rahmen erstellen. Entschuldigung, ich muss die Rahmengröße auswählen. Es ist iPhone 13.14 Lass uns den Rahmen schreien. Okay, jetzt können wir das rote Layout hinzufügen. Okay, was wir jetzt tun müssen, ist Kopf hinzuzufügen. Gehen wir also hierher, fügen wir den Header hinzu. Und der Header wird Variante zwei sein. Hier müssen wir diese beiden konvertieren oder wir müssen diesem Frame ein automatisches Layout hinzufügen. Wählen Sie dazu den Rahmen aus und klicken Sie auf Automatisches Layout. Und jetzt legen wir die Größen fest. vertikale Abstand zwischen dem Artikel beträgt 60 und der horizontale Abstand 15. Außerdem wird der vertikale Abstand 15 betragen. Okay, jetzt können wir diesen Text auf meiner Karte ändern, meinen Kartentext kopieren und hier einfügen. Jetzt ist es an der Zeit, das zu erstellen. Um es der ersten Generation zu erstellen, erstellen Sie ein Rechteck und dieses Rechteck wird das Bild eines Lebensmittels sein. Machen wir es also 80 mal 80. Ich denke, 100 mal 80 wären gut. Okay, jetzt sollten diese Ecken 15 sein, oder? Ja, die sollten 15 sein. Ja, so. Und jetzt müssen wir den Titel und den Betrag hinzufügen, dann diese Art von Zählsteuerung. Also lass es uns machen Zuerst werde ich einen Text erstellen, lass uns einige Texte wie diesen hinzufügen. Wählen Sie dann einen Textstil für Überschriften aus. Und jetzt kopieren wir den Namen. Kopieren wir diesen Namen. Füge es so ein. Eigentlich müssen wir nur den Text einfügen, und jetzt müssen wir diesen Zählcontroller hinzufügen. Dazu wähle ich den Zählcontroller aus. Gehen wir zum Layout. Okay, ich wähle einfach den Count-Controller aus, dann können wir ihn in eine Komponente konvertieren , auf Komponente klicken und sie in Count-Controller umbenennen. Okay, jetzt werde ich es von hier aus ausschneiden und auf unser Aufkleberblatt kleben. Lass es uns hier einfügen. Okay, jetzt werde ich mir diesen Frame genauer ansehen und lass uns zu Assist gehen und den Hound-Controller holen und ihn hier so platzieren Das ist also eine Instanz von Count Controller. Jetzt brauchen wir den Count-Controller hier. Also lass uns helfen. Und jetzt ziehen Sie diesen Zählcontroller so per Drag & Drop. Aber in diesem Fall müssen wir das kleiner machen. Dazu können wir also eine Variante erstellen. Bevor wir das tun, fügen wir den letzten Abschnitt hinzu. vier Artikel im Einkaufswagen Der Preis beträgt vier Artikel im Einkaufswagen. Fügen wir den Preis so hinzu. Okay, jetzt wähle ich all diese Elemente aus und drücke die Umschalttaste , um sie mit dem automatischen Layout zu versehen. Dann machen wir es horizontal. Klicken Sie hier und lassen Sie uns das Häkchen entfernen. Klicken Sie auf Inhalt. Jetzt können wir das Design sehen. Lassen Sie uns den Abstand zwischen den Objekten auf 15 reduzieren. Machen wir daraus eine Linie links in der Mitte. Jetzt können wir das Design anpassen. Lassen Sie uns zunächst von hier aus beginnen. Eigentlich können wir es einfach auf etwa 75 reduzieren . Und jetzt klicke auf diesen Text. Und lassen Sie uns diesen Text auf Absatztextgröße anpassen. Okay, lassen Sie uns jetzt eine Variante dieses Zählcontrollers erstellen und den Kick etwas kleiner machen. Also hier ist unsere Hauptkomponente von Count Controller. Klicken wir auf die Master-Komponente und dann unten auf diese. Und hier haben wir eine Variante. Jetzt ist es Zeit, die Größe zu reduzieren. Zuerst werde ich die Größe einfach so reduzieren. Machen wir es etwa 100 mal 30. lassen Sie uns die Größe dieses Pluszeichens ändern. Klicken wir auf diesen Einschränkungsvorschlag und dann auf die Größe Und machen wir es auf 60. Lass es uns auf 14 reduzieren. 14 sehen hier gut aus. Wir können das Gleiche tun. Okay, jetzt reduzieren wir die Polsterung auf der linken und rechten Seite. Lass es uns hier wie zwei zusammenfassen. Sag es auch wie zwei. Wir müssen die Textgröße nicht ändern, aber wenn wir möchten, können wir auf den Text klicken und ihn in einen Absatz ändern, aber das ist nicht notwendig. Okay, jetzt haben wir die unterschiedliche Größe des Zählcontrollers, also klicken Sie hier. Und hier können wir die Variante überprüfen und die Größe reduzieren, aber sie scheint immer noch größer zu sein. Was wir also tun können, ist mehr Inhalt zu produzieren. Lassen Sie uns zunächst die Größe zwischen den Objekten auf „Gefällt mir“ reduzieren , okay. Jetzt können wir diesen Text einfach auf die Größe reduzieren , die wir jetzt bei 125 haben. Also hier drin können wir das weiter reduzieren. Wenn ich zum Design gehe und das Design überprüfen lasse, wenn wir es weiter reduzieren, wird es nicht barrierefrei sein. Es gibt also eine Sache, die wir tun können, um es wie eine einzige Zeile zu halten , nämlich die Größe dieses Textfeldes zu reduzieren. Versuchen wir also, es zu reduzieren. Lass uns 110 draus machen. Okay. Wählen Sie das jetzt aus. Dann versuchen wir, dazwischen Lap Two Auto und Okay hinzuzufügen. Versuchen wir nun, diesen Text zu vergrößern. Okay, das ist gut. Versuchen wir, diesen Text zu vergrößern. Wenn wir ihn vergrößern, geht die Ausrichtung tatsächlich verloren. Wir müssen dieses Problem mit der Vordimensionierung beheben. Das heißt, wenn wir Zahlen zu dieser Menge hinzufügen, wird die Größe erhöht und das Design wird verschwinden. Lass es uns reparieren. Um das Problem zu beheben, werde ich es einfach auf 60 als Breite erhöhen. Wenn ich dann versuche, weitere Zahlen hinzuzufügen, wird es kein Problem geben. Das ist also der Weg, das Problem zu beheben. Und jetzt können wir die Warenkorb-Artikelkomponente erstellen. Lass uns auf die Komponente klicken. Und lassen Sie uns das in For Name umbenennen . Und der Preis wird so sein. Dann klicken Sie hier und klicken Sie hier auf Komponente erstellen. Lassen Sie uns das in Für Objekt ändern, okay, also müssen wir dazwischen eine Trennlinie hinzufügen Also, jetzt schneide ich diesen und lass uns hier weitermachen, ihn aufkleben Ja, so. Okay, jetzt komme ich zum Rahmen meines Einkaufswagens und gehe zu ***. In *** haben wir die Lebensmittelkomponente. Eigentlich haben wir jetzt zwei Arten von Lebensmitteln. Wir können es wie Lebensmittel im Einkaufswagen umbenennen. Also lass es uns wie am ersten Tag machen. Lass uns hierher gehen und hier klicken. Und lassen Sie uns diesen Lebensmittelartikel mit zwei Einkaufswagen umbenennen. Okay, wenn wir nur wenige Lebensmittel haben, müssen wir einen Teiler hinzufügen . Mit einem Teiler können wir diese Lebensmittel auf diese Weise trennen. Also lass es uns tun. Ich gehe zu Shape Tools und klicke auf Linie, drücke Shift und erstelle eine Linie wie diese. Dann ändern wir die Farbe in eine dunklere Farbe und setzen die Ecken auf eine runde Runde, reduzieren sich auf 0,7. Okay, jetzt kann ich diese beiden Objekte auswählen und Umschalttaste drücken, um das automatische Layout schnell zu gestalten. Und dann füge ich hier Paddinessi hinzu. Okay, jetzt versuchen wir, weitere Lebensmittel wie diesen in den Einkaufswagen zu legen. Sicherlich müssen wir das Innere dieses Rahmens hinzufügen. Okay? Dann klicken Sie auf diesen Teiler und fügen Sie ihn so ein Okay, jetzt sieht es gut aus. Und nur wir müssen es mit diesem, diesem duplizieren. Jetzt müssen wir unten die Zwischensumme addieren und die Summe der Lebensmittel zählt auch den Endbetrag der Bestellung Machen wir das also in der nächsten Lektion. 41. Warenkorbseite gestalten - Teil 02: Wir müssen das Design von „Meine Karte“ ändern , insbesondere die Designs für Lebensmittel. Denn für die Standardkartenseite sollte es eine Möglichkeit geben, Artikel von der Karte zu entfernen. In diesem Fall haben wir also keine Schaltfläche, um diese Elemente zu entfernen. Außerdem können wir im Bereich Meine Karte unter dem Namen des Lebensmittels eine Bewertung hinzufügen, die diese Artikel oder diese Lebensmittel haben . lass es uns zuerst machen. Ich gehe zur Masterkomponente und schneide sie aus dem Aufkleberbogen aus und füge sie auf die Kartenseite ein. In Ordnung, das ist jetzt wirklich einfach. Zuerst werde ich dieses Hoch für das Kartenobjekt erhöhen, also wenn ich es erhöhe, wirkt es sich auch auf diese Augenblicke aus. Also werde ich diese sofort entfernen und jetzt wird es perfekt sein Jetzt klicke ich hier und klicke auf eine Zeile mit Okay. Dann füge ich Top Gap Pass 15 hinzu, die Polsterung ist 15. Und dann klicke ich auf den Text und drücke Shift 102 im automatischen Layout Und machen Sie es in diesem automatischen Layout zu einem vertikalen Layout. Danach kann ich diesen Zählcontroller einfach ausschneiden und ihn so unter dieses automatische Layout legen . Lassen Sie uns vorerst diesen Abstand zwischen Zählung 15 ändern. Und jetzt muss ich die Anzahl der Rezensionen für diesen Artikel hinzufügen. Dazu kann ich diese Art der Anzahl der Bewertungen verwenden, sodass ich sie einfach von hier aus kopieren kann . Lass es uns zum Üben erstellen. Okay, geh hierher und lass uns zuerst zu den Plug-ins und zum Öffnen von Schriftarten hier gehen . Ich werde nach Sternen suchen. Fügen wir diesen Stern hier hinzu. Wählen Sie es aus diesem Layout aus und schneiden Sie es aus. Dann lege es in diesen Rahmen. Dann sollte es doch hier drin sein. Und jetzt legen wir die Größe auf 14 fest. Okay, jetzt drücke ich Shift und konvertiere es oder füge es in ein anderes automatisches Layout ein. Und ich drücke N hier, ich werde fünf drücken. Eigentlich sollte es 0,6 sein und jetzt ändern wir seine Größe auf A. Lassen Sie uns seine Größe von hier aus finden. Okay, was ist die Größe? Es sollte 13 sein und okay sein. Jetzt geh her, und das sollte 13 sein und die Größe M haben. Klicken Sie dann auf diese beiden Objekte. Drücken Sie dann Shift A und machen Sie das Layout horizontal. Hier drin wird es sechs sein. Und klicken Sie auf dieses erweiterte automatische Layout, das auf einer Linientext-Grundlinie eingerichtet ist. Okay, jetzt müssen wir die Farbe ändern. Okay, was wir jetzt tun können ist diese Lücke zwischen zwei zu entfernen. Wir können es also von hier aus überprüfen und dieselbe Einstellung anwenden. Ich glaube, wir fügen hinzu, ja. Okay. Nun können wir diesen Fußnamen hier um Größe zwei erhöhen. Und tatsächlich können wir das gesamte Autolay erhöhen . Das, okay. Jetzt kann ich Auto Lay anwenden. Eigentlich können wir noch einen Punkt erhöhen. Jetzt ist es perfekt. Und jetzt müssen wir den Papierkorb oder das Schließsymbol hinzufügen , um diesen Artikel von der Karte zu entfernen. Gehen wir also zu Plug Ins und den Call-Fontosm-Symbolen hier Ich werde den Müll durchsuchen. Ich wähle diesen Papierkorb und lass ihn uns auswählen. Klicken Sie hier, wir können das tatsächlich in ein automatisches Layout umwandeln. Klicken Sie auf diesen Text und drücken Sie Shift A. Und jetzt platziere ich diesen Papierkorb direkt im automatischen Layout. Klicken Sie nun auf das automatische Layout und legen Sie es als vertikales Layout fest. Jetzt werde ich die Ausrichtung auf und die horizontale Ausrichtung dazwischen einstellen . Die Größe wird bis sein. Dann stelle ich einen Pillenbehälter so auf, dass die beiden richtig ausgerichtet sind. Und lassen Sie uns die Farbe dieses Behälters in Grün ändern. Okay, jetzt haben wir eine perfekte Komponente für Lebensmittel im Einkaufswagen. Ändern wir die obere Polsterung und die untere Polsterung 7,5, weil wir die Trennwand hinzufügen werden auf 7,5, weil wir die Trennwand hinzufügen werden. Und in diesem Teiler können wir die horizontale Fettigkeit einstellen Eigentlich, vertikale Fettigkeit 7,5 Okay, fügen wir es hinzu, ich werde einfach auf diese Zeile klicken und Shift drücken und Dann ändern wir die Farbe hellgrau, machen wir sie Fügen wir 7.0 0.7 hinzu und klicken wir darauf. Klicken Sie auch auf dieses Kartenelement. Drücken Sie dann beim automatischen Layout die zweite Umschalttaste, und dieser Abstand zwischen den Größen beträgt 7,5. Das ist also unsere Hauptkomponente. Wir können diese Zeile aber auch zu dieser Hauptkomponente hinzufügen. Um das zu tun, muss ich diese Hauptkomponente mit einem anderen automatischen Layout umschließen . Also lass es mich zeigen. Klicken Sie auf die Komponente und dann auf diese Linie oder den Teiler Dann lassen Sie uns a verschieben. Danach können wir die Größe auf 7,5 einstellen. Okay, das ist jetzt ein normaler Rahmen mit automatischem Layout und das ist die Komponente Aber wenn wir diese Zeile tatsächlich innerhalb der Komponente hinzufügen können , aber wenn wir sie so hinzufügen, wird sie nicht perfekt lebendig. einzige Möglichkeit, dies zu beheben, besteht darin, diese Komponente zu entfernen und eine neue Komponente mit denselben Details zu erstellen. Dazu kopiere ich zuerst den Komponentennamen und lasse mich dann zu den Asserts übergehen In Asserts werde ich eine Lebensmittelkomponente erstellen. Eigentlich müssen wir es außerhalb des Rahmens platzieren. Also jetzt gehe ich zur Behauptung über. In Asserts gehe ich zur Karte, und in der Karte werde ich einfach eine Instanz wie diese löschen Dann klicke ich auf die Instanz und dann hier. häufiges Trennen von Instanzen Jetzt ist dieser Rahmen kein Teil dieser Hauptkomponente, weil wir ihn abtrennen Jetzt kann ich einfach die Hauptkomponente entfernen. Wenn ich es entferne, wird es nicht mehr im Assert-Bereich angezeigt, da wir es einfach entfernen. Jetzt gehe ich zu Layouts und kann dieses Layout direkt so in den Rahmen einfügen . Dann kann ich die Hauptkomponente auswählen und auf die Schaltfläche Komponente erstellen klicken. lassen Sie uns den Food-Artikel im Frame-Einkaufswagen wie folgt umbenennen. Wenn wir jetzt zu den Asserts gehen, kann ich den Lebensmittelartikel oder den Lebensmittelpunkt auf der Karte sehen , den Hauptbestandteil hier. Okay? Jetzt schneide ich das von hier aus ab und gehe zum Stickerblatt. Und füge es in das Aufkleberblatt ein. Klicken Sie tatsächlich hier und fügen Sie es so ein. Okay, hinter dem Pot hier. Gehen wir jetzt zur Karte. Und als Bestätigung können wir auf dieses Kartenessen klicken und es wie folgt zu unserem Design hinzufügen. Okay, etwas stimmt nicht. Gehen wir zur Behauptung. Okay, jetzt werden wir es tun. Okay, jetzt können wir zum Beispiel auf die Karte Food Item Components klicken . Dann lassen Sie uns A hier hineinschieben. Dann ändere ich das auf 15. Okay, jetzt können wir einfach Artikel wie diesen hinzufügen. Jetzt müssen wir die Summe hinzufügen. Und füge die Schaltfläche „Bestellung aufgeben“ hinzu. Also lass es uns im nächsten Video machen. 42. Warenkorbseite gestalten - Teil 03: Okay, jetzt drücke ich hier und erstelle ein Textfeld. In diesem Textfeld stehen also Lebensmittel, wir haben zwei, oder wir können Lebensmittel hinzufügen, in diesem Fall jeweils vier. Und lassen Sie uns diesen Text in eine Unterüberschrift ändern. Jetzt können wir auf dieser Seite einen Betrag hinzufügen. Lassen Sie uns also diesen Text duplizieren und diese beiden Texte auswählen. Drücken Sie dann Shift A und legen Sie das Layout horizontal fest und legen Sie den Tab-Feldcontainer fest. Und jetzt füge ich diese horizontale Lücke zwischen zwei hinzu. Okay. Jetzt werde ich einfach so duplizieren und hier können wir die beiden Steuern ändern. Hier können wir vorerst Text hinzufügen, lassen Sie uns Null hinzufügen. Wir können hier dasselbe tun. Jetzt wähle ich einfach diese beiden Abschnitte und drücke die Umschalttaste, um das Layout zu ändern. Und lassen Sie uns das Ta hinzufügen. Füge es zwischen den Größen 15 hinzu. Dann füge ich hier den Teiler hinzu. Lass uns auf die Zeile klicken. Fügen wir den Teiler wie folgt hinzu. Und jetzt ändern wir die Farbe auf die oberste Farbe. Okay, jetzt ändern wir die Größe auf zwei und klicken auf diese erweiterte Kontureinstellung. Und hier werde ich das hinzufügen. Okay, jetzt werde ich diesen Teiler ausschneiden und hineinkleben. Zünde das Dann kopiere ich einfach einen Text und lege ihn hier unter die Trennwand Ich werde das hier als Gesamtbetrag hinzufügen. Vorerst werden wir eine Null hinzufügen. Und jetzt können wir auf den Text klicken und ihn in eine Kopfzeile ändern. Ändern Sie diesen Text auch in eine Kopfzeile. Hier werde ich die Farbe in unsere dünne Farbe ändern. Okay, jetzt unten bin ich bei der Schaltfläche, die „Bestellung aufgeben“ aufruft. Um das zu tun, vergrößern Sie den Rahmen und gehen Sie dann zu *****, indem Sie in diesem Fall auf die Schaltfläche und das dicke Symbol klicken und es auf a setzen. Dann ändern Sie diese Bezeichnung, und es auf a setzen. um Bestellung aufzugeben In diesem Fall können wir aus diesem Button eine Flasche mit voller Breite machen diesem Button eine Flasche mit voller Breite Dazu können wir ganz einfach hier hingehen und eine Variante erstellen. Diese Variante hier, sie klicken auf die Schaltfläche oder die zweite Variante. Gehen Sie jetzt hierher und klicken Sie auf diesen. Dann ändere es auf die zweite Variante. Danach kann ich zuerst die Eigenschaften ändern , lassen Sie uns den Füllbehälter ändern und es wird einfach eine Schaltfläche mit voller Breite. Okay, jetzt stelle ich diese beiden Chancen ein und drücke Shift A. Dann ändere ich diese Größe auf etwa 30. Machen wir es auf 40. Diese, okay, jetzt sehen unsere Seiten gut aus. Lass es uns am Design überprüfen. Jetzt müssen wir einen Inhalt hinzufügen Im nächsten Video werden wir es tun. 43. Warenkorbseite gestalten - Teil 04: Okay, lassen Sie uns dem Bereich „Meine Karte“ echte Inhalte hinzufügen. Fangen wir also mit dem ersten Punkt an. Lassen Sie uns also den ersten Artikel als dieses Lebensmittel herstellen. Also Kaffee mit dem Text und füge den Text hier ein. Eigentlich muss ich den Text schicksalhaft machen, bevor ich ihn hier fette. Ich kann die Größe erhöhen. Also, um die Größe zu erhöhen, gehe ich zu den Eltern. Und lass es uns so groß machen. Oder wir können einfach hier klicken und Pec fällt in den Container. Okay, jetzt wird es den gesamten Inhalt beeinflussen. Okay. Lassen Sie uns zuerst die Lebensmittel enger zusammenlegen Okay. Jetzt können wir die Preise hinzufügen. Um Preise hinzuzufügen, kannst du hier gehen und diese Preise überprüfen. Und hier haben wir das Problem. Dieser Text sollte auf der rechten Seite ausgerichtet sein. Also lass uns Fk es reparieren. Ich werde auf den Text klicken und diese Ausrichtung rechts neben der Taste korrigieren. Es sollte so repariert werden, wie es behoben ist. Okay, lassen Sie uns weitere Details hinzufügen. Okay, jetzt ändern wir diese Beträge in. Jetzt müssen wir die Bilder hinzufügen. Um Bilder hinzuzufügen, drücke ich die Befehlstaste und wähle den Fanger aus. Und klicken Sie hier, um die Bilder zu platzieren. Gehe zu den Lebensmitteln. Und in den Lebensmitteln hier haben wir das Essen. Okay, jetzt müssen wir die Anzahl der Lebensmittel hinzufügen. Es ist fünf. Und lassen Sie uns den Gesamtbetrag hinzufügen. Der Gesamtbetrag beträgt 10$ Und hier müssen wir diesen Betrag ändern, weil wir zwei T bestellt haben, also sollte er auf 5$ geändert werden. Okay Fügen wir nun drei Steuern hinzu. Und hier werden wir den Gesamtbetrag mit 13$ abstimmen. Okay. Lassen Sie uns jetzt das Design überprüfen und es wird so aussehen. Jetzt haben wir vier Anträge eingereicht und müssen nun das Popup-Message-Feld erstellen und diese Frames in Prototypen umwandeln. 44. Zum Warenkorb hinzufügen Popup: Es ist Zeit, dieses Pop-up zu entwerfen. Also lass es uns entwerfen. Ich werde es einfach kopieren. Und lass uns auf die Markup-Seite gehen und sie hier platzieren. Lass es uns hier hinstellen. Ordnung, lassen Sie uns jetzt als ersten Schritt den Rahmen erstellen. Die Rahmengröße wird iPhone 13.14 sein. Jetzt werde ich die Größe dieses Rahmens reduzieren, da es sich um ein Pop-up handelt Es ist also besser, die linke und rechte horizontale Größe um etwa 30 Pixel zu reduzieren die linke und rechte horizontale Größe um etwa 30 Pixel Also lass es uns tun. Der Hauptgrund dafür ist, dass wenn jemand auf die Schaltfläche „Zwei Karten hinzufügen“ klickt, das Popup wie folgt angezeigt wird. Um die Größe zu reduzieren, klicke ich auf den Rahmen. Und zur Breite in der Breite füge ich -30 hinzu. Und jetzt war die ursprüngliche Größe des Rahmens 319 Dann reduzieren wir 30 Pixel und jetzt haben wir 360 Versuchen wir also, dieses Rasterlayout hinzuzufügen, okay? Und jetzt drücke ich die Befehlstaste und reduziere die Höhe. Mach einfach eine 360. Ordnung, jetzt ändere ich den Namen des Rahmens, um ihn in den Einkaufswagen zu legen. Okay, jetzt müssen wir das ein automatisches Layout konvertieren. Füge das automatische Layout tatsächlich hinzu. Nehmen wir die Eigenschaften an, lassen Sie uns in diesem Fall zwischen den Größen 15 machen. Okay? Jetzt lass es mittig ausrichten. Lassen Sie uns nun den Text für das zum Warenkorb hinzugefügte Lebensmittel erstellen. Okay? Was ist eigentlich gerade passiert? Okay, wenn ich den Text hinzufüge, wird er einfach kleiner, weil wir horizontale und vertikale Größenänderung festlegen. Drücken wir also Command Control to Control, um den Vorgang zu wiederholen. Und lassen Sie uns mit der hohen Aufgabe fertig werden. Jetzt werde ich Text hinzufügen und lassen Sie uns diesen Text hier hinzufügen. Gehen Sie dann zum Textstil und wählen Sie den Header-Textstil aus. Jetzt müssen wir diese Kartenschaltfläche hinzufügen. Um das zu tun, gehe ich zu Asserts. In Asserts haben wir diesen Button. Sag es einfach und lass uns diesen Text einblenden. Fügen Sie es hier ein, hinter den Einstellungen auf dem Button Okay, jetzt haben wir den Hauptknopf. Aber es wäre besser, wenn diese Taste mehr linke und rechte Polsterung hätte Versuchen wir also, die Variante zu verwenden. Und in der Variante müssen wir das als Füllcontainer ändern. Also ich denke, dieser Look ist besser als zuvor. Okay, jetzt müssen wir diese Schaltfläche „Weiter einkaufen“ erstellen. Also werde ich einfach diese Schaltfläche duplizieren und es heißt Steuern hinzufügen. Okay. Nun, diese beiden Tasten sind ähnlich, aber wenn wir zwei Knöpfe hinzufügen, sollten wir nur eine feurige Taste haben und die zweite Taste sollte zweitrangig sein In diesem Fall ist die Hauptschaltfläche zum Aufrufen der Aktion „Karte anzeigen“. Die Schaltfläche „Karte anzeigen“ wird wie folgt aussehen. Und lassen Sie uns diese Schaltfläche zu einer sekundären Schaltfläche machen. Es ist wirklich einfach, das zu tun. Ich gehe zum Aufkleberbogen und suche etwas Abstand. Ich denke, lass es uns jetzt unten platzieren. Ich klicke auf diese Schaltfläche der Anzeigenvariante und lass uns eine sekundäre Schaltfläche erstellen Das Erstellen einer sekundären Schaltfläche ist einfach. Benennen wir das in sekundäre um. Okay, jetzt ändern wir das einfach in sekundär. Und jetzt können wir das Design ändern. Ändere zuerst das Design, ich füge einen Strich hinzu. Diese Strichstärke wird zwei sein und die Farbe wird grün sein. Außerdem werde ich es in die Mitte stellen. Dann werde ich die Feldfarbe entfernen. Die Feldfarbe ist Y. Dann wird die Etikettenfarbe diese grüne Farbe sein Okay, wir haben gerade die zweite Widerlegung so erstellt. Jetzt haben wir das erste Pop-up. Als nächsten Schritt müssen wir die Ecken reduzieren. Um das zu tun, füge ich einfach 25 zu den Ecken dieses Rahmens hinzu und sehe jetzt so aus. Dann klicke ich einfach auf diese beiden Schaltflächen und drücke die Umschalttaste, um daraus ein automatisches Layout zu machen oder das automatische Layout hinzuzufügen. Dann wähle ich das Haupt-Autolayout aus und ändere diesen vertikalen Abstand auf 30. Versuchen wir, es wie 60 hinzuzufügen. 60 ist zu viel. Fügen wir es etwa 30 hinzu. Okay, jetzt haben wir ein Pop-up. Und dieses Popup wird in der App , wenn wir die Markups in einen Prototyp konvertieren In der nächsten Lektion werden wir also dieses zweite Popup erstellen 45. Popup zum Erfolg von Bestellungen entwerfen: Okay, lassen Sie uns dieses Pop-up erstellen. Um das zu tun, kopiere ich diesen Abschnitt über den Erfolg der Bestellung und gehe hier zu Smoke Up and 40. Okay, dann werde ich einen neuen Rahmen erstellen. Diese Rahmengröße wird iPhone 13.14 sein und wir reduzieren die Größe um 30 Fixer Und lassen Sie uns das Rasterlayout hinzufügen Jetzt füge ich zuerst den Text hinzu Dieser Text wird die Erfolgsmeldung der Bestellung sein. Okay, dann ein Textstil. Okay. Jetzt werde ich ein automatisches Layout hinzufügen. Das automatische Layout wird also behoben. Und auch die Höhe sollte festgelegt werden. Höhe, und hier sollte es 365 sein. Okay, jetzt ändern wir eine Linie, oben in der Mitte. Die Polsterung wird 15 sein und die untere Polsterung wird ebenfalls 15 sein Und die seitliche Polsterung oder horizontale Polsterung Fügen wir die Lücke 60 hinzu. Und jetzt werde ich ein weiteres Textfeld hinzufügen. In diesem Textfeld wird angezeigt, ob Ihre Bestellung erfolgreich aufgegeben wurde oder Sie erfolgreich eine Bestellung aufgegeben haben. Also legen wir es als Unterüberschrift fest und machen es zu einer Linienmitte. Jetzt haben wir die Bestellnummer. Lassen Sie uns diesen duplizieren und diesen Text wie folgt hinzufügen. Und lassen Sie uns die Füllfarbe auf Grün ändern. Jetzt haben wir diese Schaltfläche „ Bestellung verfolgen“. Lass es uns hinzufügen. Gehe zu***, gehe zu Buttons > Button einfügen. Eigentlich sollte es hier sein. Dann ändern wir den Text in Trade Trade. In Ordnung, jetzt gehen wir zur zweiten Variante und wir sollten so ein Feldcontainer sein. Okay, was wir jetzt tun müssen, ist die Größe des Rahmens zu verringern. Drücken Sie einfach Command oder Control und ziehen Sie heraus, sagen wir As 400. Okay, jetzt wähle ich diese drei Elemente aus und drücke Shift, um ein automatisches Layout zu erstellen. Fügen Sie dann die Lücke zwischen den Größen 15 hinzu und lassen Sie uns hier das Ta-Auto hinzufügen und sehen, was passieren wird. Nein, das Auto wird nicht gut funktionieren, also müssen wir es bei Tas 60 belassen. Und vielleicht können wir diese Größe auf 360 reduzieren. Okay, jetzt müssen wir die Schließen-Schaltfläche hinzufügen. Um das zu tun, können wir zu den Plugins und Fontosum gehen. In Fontosum suchen wir in der Nähe der Zeit. Ja, lass uns Zeit für die Suche haben. Und hier haben wir den Button. Gehen Sie also einfach zu Layout und entfernen Sie dieses. Klicken Sie dann auf die Schaltfläche und dann auf diese beiden Elemente. Schnelles Shift A und beim Autolayout. Stellen Sie es dann als horizontales Layout ein. Jetzt sollten wir diese Bestellung oben drauf und dieses Vektorsymbol auf der Flasche platzieren. Stellen Sie dann den Rahmen ein und machen Sie ihn zu einer Linienmitte. Und lassen Sie uns das als Feldcontainer und das als Auto einstellen. Okay, jetzt werde ich diese Feldfarbe auf Grün ändern. Okay, lassen Sie uns nun diese Rahmenfarbe ändern, um Erfolg zu erzielen, den Rand zu vergrößern und auf 25 zu reduzieren. Okay, jetzt ist es viel besser. Und vielleicht können wir diesen Text zur Mitte hinzufügen. Es ist wirklich einfach, dieses Zentrum zu erstellen. Klicken Sie einfach auf den Text und sorgen Sie dafür, dass er sich wie ein Container anfühlt. Fügen Sie dann einfach so Text in der Linienmitte hinzu. Es ist in der Mitte. Und jetzt haben wir alle Frames. Und in den nächsten Lektionen werden wir diese App auf einen intuitiven Fototyp umstellen. 46. UI/UX-Probleme beheben: Jetzt haben wir das gesamte Design. Ich habe also einige Probleme mit dem Design gesehen, und in dieser Lektion wollen wir all diese Probleme beheben. Als erste Ausgabe dieses Hamburger-Menü größer Und wenn wir die Größe dieses Hamburger-Menüs reduzieren, wird es großartig aussehen Also werde ich zur Hauptkomponente unseres Header-Bereichs gehen Hauptkomponente unseres Header-Bereichs Und hier werde ich einfach den Rahmen auswählen. Und lassen Sie uns die Höhe dieser Rechtecke reduzieren. Lass uns sie dick machen. Okay? Und jetzt schauen wir uns das Design an. Jetzt können wir also auf den Rahmen klicken und die Zwischengröße vergrößern. Lassen Sie uns dazwischen die Größe um vier erhöhen. Und jetzt ist es viel besser als die vorherigen. So können wir die Breite dieser Felder verringern. Machen wir sie etwa 40. Und setze den Rahmen auf eine Linie, genau genommen hier drin. Stellen wir das so ein, okay. Wenn wir jetzt das Design überprüfen, ist es viel besser. Und jetzt haben wir ein anderes Problem. Also lass uns auf den Rahmen klicken und zu Prototyp gehen, aber mach dir keine Sorgen. In den nächsten Lektionen werde ich Ihnen zeigen, wie Sie dieses Design in Phototype konvertieren können Gehen wir zunächst zur Einstellung „Eigenschaft anzeigen“ und wähle hier unsere Geräte aus, das iPhone 40, da unsere Rahmengröße 390 ist Dann klicke ich auf Person. Gehen wir zum Design. Okay, hier ist die Homepage. Auf dieser Homepage wurde das Logo von dieser Kamera verdeckt. Was wir also tun können , um das Problem zu beheben, ist eine obere Polsterung. Das Hinzufügen von oberer Polsterung ist also wirklich einfach Also gehe ich zum Design und klicke auf den Rahmen. Hier werde ich die obere Polsterung 60 ändern und mal sehen, wie sie aussieht Jetzt sieht es viel besser aus, aber wir können es auf 30 setzen Okay, 30 werden hier in einer richtigen Runde funktionieren. Dies wird kein großes Problem sein, da sich die App an das Gerät anpasst. Okay, jetzt muss ich es auch für all diese tun . Aber wenn ich der Kopfkomponente Polsterung hinzufüge, muss ich das nur auf einmal tun Also lass es uns ganz einfach machen. Wählen Sie die Master-Komponente und fügen Sie sie dann mit 15 zum Abstand hinzu, da wir den Frame-Abstand bereits mit 15 hinzugefügt Okay, jetzt schauen wir uns Clerk an. Nun, das zweite Problem ist, dass wir dieses Hamburger-Menü auf jeder Seite Aber es sollte nur auf der Startseite sein. Die andere Seite sollte die Schaltfläche Zurück haben. Also lass es uns reparieren. Repariere es. Ich gehe zu den Tigers. Und hier haben wir die Variante. Also werde ich einfach hier draufklicken. Und lass uns zu Plugins gehen und Ontos auswählen. Dann kann ich hier wieder suchen. Eigentlich haben wir das Symbol hier, also klicken wir es an. Und hier haben wir das Symbol. Ich habe es kopiert. Und gehe zu Variante zwei in Bild fünf in diesem Hamburger-Menü Ich füge es einfach ein. Dann werde ich diese Stick-Elemente entfernen. Und jetzt kann ich die Größe dieses Symbols erhöhen. Eigentlich kann ich es aus diesem Rahmen entfernen. Einfach so. Und entferne den Rahmen. Und was ich jetzt tun kann, ist, das Gefühl zu vermitteln, dann kann ich die Größe einfach erhöhen , um die Einschränkungsvorschläge hier zu kontrollieren und zu wiederholen Geben wir 24 für zwei Wochen ein, machen wir daraus 18, 16, 14. Okay, 14 ist viel besser. Jetzt werde ich die Feldfarbe auf diese grüne Farbe ändern. Wenn wir jetzt das Design überprüfen, wird es so aussehen. Eigentlich sollten es 30 sein, weil diese, weil die Höhe dieser Elemente 30 beträgt. Kopieren wir also 10 dieses Frames und fügen es ein. Und jetzt entferne diese Ava und lege sie in den Rahmen. Eigentlich werde ich die Größe dieses Vektors auf 20 erhöhen , weil er diesen beiden ähnlich sein sollte . Okay, ich habe sie einfach auf 17 gesetzt und dann sehe ich die Variante und oben die Polsterung als 15. Okay, ich denke, jetzt sieht es gut aus. Jetzt haben wir hier also ein anderes Problem. In diesem Abschnitt haben wir 60 als Abstand zwischen den Abständen, aber hier haben wir es ungefähr 15. Also sollten wir es erhöhen. Um es zu vergrößern, ziehen Sie einfach die Suchleiste aus dem Rahmen heraus und es wird sich wie folgt ändern. Schauen wir uns das Aussehen an, okay, jetzt haben wir ein ähnliches Aussehen auf dem Abschnitt. Okay, hier drinnen können wir diese Stadt jetzt auch so gestalten. Es ist viel besser. Okay, das sind die Probleme, die ich beim endgültigen Design gesehen habe. Jetzt werde ich die Drahtgitter entfernen, die ich von der Wireframe- und Prototypen-Seite bekommen habe der Wireframe- und Prototypen-Seite , weil wir bereits das gesamte Design haben Dann mache ich daraus eine Linie wie diese. Eigentlich müssen wir das nachher ändern , wenn wir den Prototyp entwerfen. Aber lassen Sie uns sie vorerst so formulieren. Okay, jetzt werden wir im nächsten Video eine Fußzeile erstellen. 47. Footer-Menü entwerfen: Okay, lassen Sie uns jetzt das Fußzeilenmenü erstellen. zu tun, gehe ich hierher und klicke auf Corner Frame Und lassen Sie uns die Größe dieses Rahmens so ändern. Und lassen Sie uns einen Frame mit dem höchsten Frame 60 erstellen. Und jetzt habe ich vor, drei Icons zu erstellen. Das erste Symbol ist Zuhause und das zweite ist meine Bestellung, und das dritte ist meine Bewertung. In diesem Fall haben wir also drei Hauptelemente, also lassen Sie uns drei davon erstellen. Zuallererst werde ich mir Symbole für diese drei Optionen besorgen. Also nach Hause, hab Zuhause. Ja, ich werde es in diesem Rahmen kochen und dann fügen wir Otolea zu diesem Ja, was wir jetzt haben, ist Ordnung. Suchen wir das Symbol für die Bestellung. Ich werde das benutzen. Teetasse, Pka, Kaffeetasse Pika Dann brauchen wir Rebeca. Dann schauen wir mal nach und kommandieren Ticon vielleicht erneut. Nun, lassen Sie uns diesen Befehl Tica hinzufügen. Okay, jetzt ändern wir das, um den Behälter zu füllen und fügen diesen als Foto hinzu. Die horizontale Polsterung wird Null und die vertikale Polsterung Okay, jetzt sollten wir Text für jeden einzelnen Link haben. Benutzer sollten die Bedeutung des Symbols verstehen. Lassen Sie uns also einen Text erstellen. Und der erste Text wird zu Hause sein. Lass uns den Stil auf Paca ändern. Wir können es mittelgroß machen und die Schriftgröße auf zwei reduzieren Okay, dann markiere diese beiden Abschnitte und halte Shift-Taste gedrückt, um ein automatisches Layout zu erstellen. Und die Lücke wird 1015 sein , das ist zu groß Könnte es so zentrieren. Dann werden wir es sein, und lassen Sie uns dasselbe für die Kaffee-Ikone tun. Also werde ich diesen einfach duplizieren. Dann schneide das Kaffeesymbol aus und lege es in dieses. Und dann werde ich das hier ändern , um Bestellungen zu bestellen. Dann werde ich dieses duplizieren, das Bild ersetzen und hier werden wir es als Bewertungen hinzufügen. Okay, jetzt werde ich die obere Füllung auf Null reduzieren und so die untere Polsterung reduzieren, sodass ich jetzt die Füllfarbe auf diese grüne Farbe ändern werde Also werden wir es für diese Bestellung tun. 1.12 Okay, jetzt haben wir ein Fußzeilenmenü. Dieses Fußzeilenmenü sollte also klebrig sein wenn wir das Design in der Prototyp-Oberfläche durchblättern. Ich werde Ihnen zeigen, wie das geht Vorerst. Ich werde diese Fußzeile als absolute Position festlegen Das heißt, wir können diese Fußzeile überall platzieren. Das werden wir nicht, eigentlich müssen wir Füllfarbe hinzufügen. Die Füllfarbe wird weiß sein. Und jetzt können wir es überall hinzufügen, wo wir wollen. Also müssen wir etwas obere Pfanne und untere Polsterung hinzufügen. Machen wir es mit 6.6. Okay. Und ich wähle den Fußzeilenbereich aus, klicke auf Komponente erstellen und ändere seinen Namen in Fußzeile Ich werde es jetzt schneiden. Ich werde es so auf das Aufkleberblatt kleben. Okay, jetzt haben wir das gesamte Design , das wir verwenden können, um daraus einen Prototyp zu machen. In der nächsten Lektion werden wir uns mit der Fototypenentwicklung vertraut machen und uns an die besten Methoden halten, um Prototypen professionell zu erstellen 48. Prototyping - Teil 1: Fema hat Werkzeuge eingebaut , um unsere weiteren Becher in einen Prototyp umzuwandeln Wenn Sie zu Ihrem Fema-Design gehen, werden Sie auf der rechten Seite einen Hinweis namens Prototyp sehen auf der rechten Seite einen Hinweis namens Prototyp Klicken Sie einfach darauf. Wenn Sie darauf klicken, werden Sie diese Art von Fenster sehen. Wenn Sie es nicht sehen, klicken Sie einfach auf die Leinwand und wählen Sie keine Frames aus. Und hier kannst du das Gerät auswählen. In diesem Fall wähle ich das Gerät als iPhone 14 aus, da mein Rahmen mit diesen 390 Pixeln groß ist . Wenn wir also zu Prototype gehen, klicken wir auf Canvas. Und hier drin das iPhone 14 mit diesem 390. Okay, dann können wir hier das iPhone 14-Modell ändern. Also werde ich es auf Mitternacht einstellen. Und wenn Sie möchten, können Sie es nach Belieben ändern. Wir können das Gerät auch drehen, aber in diesem Fall werde ich es als Standard verwenden. Wir können also auch die Hintergrundfarbe so ändern . Lassen Sie uns das also in Aktion überprüfen. Also werde ich auf diese Geschenkschaltfläche klicken. Und hier gehen wir zu unserer Homepage. Hier haben wir einen iPhone 14-Rahmen. Und wir können diese Farbe ändern, lassen Sie uns sie wie Blau ändern. Und die Grundfarbe der Primgröße wird einfach zu Blau. Außerdem können wir den Hintergrund ändern. Lass es uns in Aschefarbe ändern. Nun, auf diese Weise können Sie das Gerät für Ihr Design auswählen. Dann wähle ich den Home-Frame , weil das der Frame ist , mit dem wir den Flow starten. Wenn wir auf die Startseite klicken, erhalten wir einen Text namens Flow Starting Point. Hier werde ich auf dieses Pluszeichen klicken, um den Startpunkt zu erreichen. Startpunkt ist der Ort, an wir den Flow starten oder die App verwenden. In diesem Fall gehen wir zuerst zur Startseite, dann klicken wir auf dieses Fußelement und dann gehen wir zur einzelnen Fußseite. Danach werden wir in den Warenkorb legen. Das ist also der erste Ausgangspunkt. Wir können auch eine weitere Etage haben. Im nächsten Stock klicken wir also auf die Suchschaltfläche und es wird zur Such-Fußseite weitergeleitet. Danach klicken wir auf dieses Fußelement und es wird zum einzelnen Fuß weitergeleitet. Das ist also der Ausgangspunkt, den wir brauchen . Auch wenn Sie keinen Startpunkt auswählen, die Fema einen Standardstartpunkt hinzu In diesem Fall werde ich diesen Flow in Placeorder Place Order Flow umbenennen Placeorder Place Order Wenn wir in diesem Flow auf dieses Fußelement klicken, sollten wir zur einzelnen Fußseite weitergeleitet Es gibt mehrere Möglichkeiten , diesen Flow zu gestalten. Die Anfängermethode, die unprofessionelle oder die schwierige Methode, klicken Sie einfach auf das Element, das Sie weiterleiten möchten In diesem Fall ist es das Fußelement. wenn Sie mit der Maus über dieses Element fahren, werden Sie diese Art von Punkt sehen Und wenn wir auf diesen Punkt klicken und ihn so ziehen, sehen wir einen Pfeil Und wenn wir zum einzelnen Fuß wechseln wollen, können wir ihn einfach per Drag-and-Drop auf den Einzelfußrahmen ziehen. Wir nennen diese Leitung eine Verbindung. Dies ist der Start- und Endpunkt der Verbindung. Und wir nennen es Verbindung. Beachten Sie, dass diese Seite der Verbindungsendpunkt ist. Das Verhalten dieser Verbindung. Wenn der Benutzer auf dieses Lebensmittel klickt, wird er zu dieser einzelnen Fußseite weitergeleitet. So können wir die Optionen der Verbindung anpassen. Lass uns auf die Verbindung klicken und hier haben wir das Popup. In diesem Popup können wir die Aktion definieren, in diesem Fall beim Tippen. Das heißt , wenn der Benutzer auf dieses Fußelement tippt, sollte die Aktion ausgeführt werden. Hier definieren wir es. Navigiere zu Single Put. Hier ist der Single-Put-Frame, und hier können wir Animationen hinzufügen. Jetzt fügen wir das als Instant hinzu und versuchen wir diese Aktion Um es auszuprobieren, klicke ich auf den aktuellen Modus. Und wenn wir hier auf dieses Lebensmittel klicken, sollten wir zur Seite mit einem Fuß weiterleiten. Also lass es uns versuchen. Jetzt sind wir also auf der Single-Foot-Seite. Okay, das ist die Art, einen Prototyp zu erstellen, und hier können wir Animationen hinzufügen. In diesem Fall fügen wir diese Push-Animation hinzu. Aber normalerweise verwende ich diese Animationen nicht für Projekte im Usability-Test, aber wir können sie ausprobieren. Gehen wir also wieder hierher zurück. Ist das Animation? Nun, hier ist die eigentliche Frage. Derzeit haben wir nur einen einzigen Fußrahmen. Wenn wir also auf der Startseite auf eines dieser Lebensmittel klicken , sollten wir diese einzelne Fußseite bei der Verbindung umleiten . Standardmäßig funktioniert die Verbindung durch Tippen und Navigieren zum Punktrahmen. Lass es uns auch so versuchen. Lass es uns für diese 12 machen, okay? Wenn wir jetzt auf diese Elemente klicken, können wir einfach zur Seite mit einem Fuß gehen. Nehmen wir an, Sie haben 100 Artikel wie Lebensmittel, was bedeutet, dass wir 100 Verbindungen wie diese herstellen müssen. Wenn Sie jedoch den Rahmen ändern müssen, in diesem Fall, wenn wir auf dieses einzelne Lebensmittel klicken, wenn wir möchten, dass es zu einem anderen Rahmen wie diesem Kartenrahmen wechselt, müssen wir diese Verbindungen nacheinander ändern. Und es ist kein professioneller Weg und es wird viel Zeit in Anspruch nehmen. Im nächsten Video zeige ich Ihnen, wie Sie das Problem mithilfe der Komponente beheben können. 49. Prototyping - Teil 3: Sehen wir uns an, wie man Komponenten verwendet, um Prototypen zu erstellen , ohne viele solche Verbindungen herzustellen. Also werde ich zuerst diese Verbindungen entfernen, denn wenn wir Komponenten verwenden, um diese Verbindung herzustellen, müssen wir sie nur auf einmal erstellen. Also muss ich jetzt die Master-Komponente finden. Wenn Sie sich erinnern, ist dies die Master-Komponente, die wir für dieses Fußelement erstellen. Diese Master-Komponente hat also viele Instanzen, also sind all diese Fußelemente Instanzen dieser Master-Komponente. Das bedeutet, dass das Verhalten der Master-Komponenten für alle Instanzen gilt , die wir mit dieser Master-Komponente erstellen. Das heißt, wenn wir eine solche Verbindung herstellen, sollte dies für alle Instanzen gelten. Lassen Sie mich noch einmal zeigen, was ich hier gemacht habe. Ich kann zur Registerkarte Prototyp gehen. Und wenn ich zur Registerkarte Prototyp gehe, bewege ich den Mauszeiger über den Masterfuß Das ist die Hauptkomponente. Dann stelle ich einfach eine Verbindung her und verweise sie auf diesen einzelnen Fußrahmen. Und die Eigenschaften dieser Verbindung stehen auf dem Spiel. Navigieren Sie zu Single Food Wenn also jemand auf diese Master-Komponente oder Instanz dieser Master-Komponente klickt diese Master-Komponente oder , wird sie zu einem einzigen Fuß weitergeleitet und es wird eine Push-Animation angezeigt. Lassen Sie uns sehen, wie es funktioniert. Ich gehe in den Präsentationsmodus. Und im Präsentationsmodus gehe ich zur Option und klicke auf Seitenleiste anzeigen Hier haben wir das Wort. Also klicken Sie auf den Boden, wir können einfach hier klicken und auf das Geschenksymbol klicken. Und wenn ich hier auf eines dieser Fußelemente klicke, sollte ich zur einzelnen Fußseite weiterleiten. Also lass es uns ausprobieren. Okay, es funktioniert. Und lass uns diesen anklicken. Leiten Sie zur Fußelementseite , da wir die Master-Komponente verwenden. Das ist also die Stärke der Master-Komponente. Wenn ich jetzt auf diesen Frame klicke, werden alle Verbindungen angezeigt, die diese Hot-Item-Komponenten der Instanz haben. Dies ist die einfache und proportionale Methode , um den Prototyp zu erstellen, wie ich bereits sagte. Wenn wir nun die Verbindung ändern wollen, in diesem Fall, wenn wir diese Verbindung zur Karte ändern wollen, müssen wir nur die Verbindung der Master-Komponente ändern . Und es wird für E-Instanzen wie diese gelten. Wenn wir diese Verbindung einzeln hinzufügen, müssen wir sie manuell auf den Kartenrahmen umkonfigurieren , wenn wir sie ändern Stellen wir es jetzt auf die Single ein. Okay, was wir jetzt tun müssen ist, dass der Slider nicht funktioniert, nachdem wir auf die Seite mit einem Fuß gegangen sind. Wir müssen dafür sorgen, dass dieser Slider funktioniert. Außerdem müssen wir dieser Schaltfläche „In den Einkaufswagen hinzufügen“ eine Aktion hinzufügen. Außerdem sollten wir dieser Zurück-Schaltfläche eine Aktion hinzufügen, und wir müssen die Fußzeile hinzufügen Lassen Sie uns das in den nächsten Lektionen nacheinander machen. 50. Karussell-Scrollen erstellen: Okay, auf der Seite mit einem Fuß müssen wir diesem Bildkarussell eine horizontale Scrollfunktion hinzufügen diesem Bildkarussell eine horizontale Scrollfunktion hinzufügen Um das zu tun, gehe ich zur Seite mit einem Fuß und wähle hier den Rahmen Das ist also der Frame und momentan wird er nicht angezeigt, weil wir Clip-Inhalt Checkboox hinzufügen Klicken Sie einfach auf den Rahmen und entfernen Sie das Häkchen bei diesem Clip-Inhalt. Dann wähle ich diesen Frame und hier haben wir ein Checkbox für Clip-Inhalte Jetzt werde ich diesen Kartenrahmen hier platzieren. Jetzt habe ich immer noch die vollständige Vorschau. Ich habe keine horizontale Scrollfunktion, um das Problem zu beheben. Zuerst muss ich diese Rahmengröße reduzieren. Aktuell ist diese Rahmengröße angesagt und wir müssen sie nur auf den Teil ändern , der auf dem Karussell sichtbar sein sollte In diesem Fall drücke ich die Befehlstaste und reduziere diese Framegröße auf diesen Wert, weil wir nur diesen Abschnitt sehen müssen Wenn ich zum Design gehe, sehen wir nur eine Folie Jetzt passe ich diesen Rahmen um zwei Größen an und gehe dann zur Registerkarte Prototyp. der Registerkarte Prototyp haben wir ein Scrollverhalten für die Position. Ich werde das Scrollen mit dem Pad einstellen. Das heißt, wenn wir es so scrollen, werden die Bilder oder das Karussell auch mit dem Rest des Elements gescrollt Bei Overflow müssen wir es horizontal einstellen. Wenn wir es jetzt überprüfen, das horizontale Scrollen einwandfrei Wenn ich jetzt das Design überprüfe, ist unsere Polsterung nicht richtig ausgerichtet . Lass es uns reparieren Um das Problem zu beheben, gehe ich einfach zum Design und wähle den Rahmen aus. Dann klicke ich auf Contain. Wenn ich jetzt zum Design gehe, wird es perfekt aussehen. diese Weise können Sie in Figma horizontale Schriftrolle und ein Karussell erstellen In der nächsten Lektion werden wir dem Design einen Fußzeilenbereich hinzufügen 51. Fusszeilenmenü entwerfen: Jetzt ist es an der Zeit, diese Fußzeile hinzuzufügen. Fußzeile. Niemals auf unsere Homepage. Um das zu tun, haben wir das Footer-Design hier und wir haben es auf Design, hochfiligraner Bearbeitungsbereich, erstellt hochfiligraner Bearbeitungsbereich Also lass es uns ausschneiden und auf die Startseite stellen . Danach werde ich dies als absolute Position festlegen. Dann stelle ich es einfach so ein. Dann drücke Command und passe es an den Ecken an. Danach füge ich hier die linke und rechte Polsterung in einer Größe von 15 mal 15 Dann füge ich für die untere Polsterung Zeile 30 hinzu Lassen Sie uns die Füllfarbe dieses Designs ändern. Um das zu tun, mache ich es so dunkel wie möglich und ändere jetzt die Farben der Elemente auf Y. Außerdem wird das Y zwei sein, nur der ausgewählte Bereich wird grün sein Danach werde ich auf die untere Schaltfläche von Aline klicken und sie unter dem Design platzieren Dann gehe ich zum Prototyp. Im Prototyp namens Behavior werde ich diese Position als fest festlegen und an Ort und Stelle bleiben. Dann gehe ich zum Modell und überprüfe das Design. Es wird so aussehen. Und tatsächlich können wir das auf etwa 15 reduzieren. Es scheint vielleicht zu sehr so zu sein. Stellen wir den Test 20 auch oben ein. Was ist mit zwei? Test 15. Okay, jetzt sieht es gut aus und hier haben wir ein Problem. Also lass es uns überprüfen. Okay, wir müssen diesen entfernen. Und ich weiß nicht, wie wir dorthin gegangen sind. Aber jetzt haben wir eine tolle Fußzeile und sie sieht wirklich gut Jetzt müssen wir diese Fußzeile zu jeder Seite hinzufügen diese Fußzeile zu jeder Seite Es ist so einfach, wählen Sie einfach den Druck aus und gehen Sie zu den Gefahren. Dann können wir einfach ein Exemplar dieses Designs erstellen. Lass es uns herausfinden. Es sollte auf der Startseite sein, okay, mit so einem Fuß Aber wir müssen es nur richtig einstellen, einfach die Rahmengröße so erhöhen Und lege diese Fußzeile in den Rahmen. Und jetzt klicken Sie auf eine Zeile unten. Lassen Sie uns diese Rahmengröße so produzieren. Lass es uns in Aktion sehen. Lass uns zum Suchfuß gehen. Eigentlich müssen wir das Ende des Designs so platzieren. Um das zu tun, klicken Sie hier und vergrößern Sie das Design. Und klicken Sie einfach auf den Fuß und dann auf diese, eine Linienschaltfläche. Lass es uns manuell so einstellen und 30 Okie. Lass es uns in Aktion sehen. Wir müssen zu Property gehen und einen festen Aufenthalt festlegen. Und jetzt wird es so funktionieren. Also lass uns das fortsetzen und es für die Frames machen . Okay, jetzt ist es perfekt eingestellt. Und jetzt, in der nächsten Lektion, werden wir diesen Bestellvorgang fortsetzen. Wir sehen uns also in der nächsten Lektion. 52. Verbindung zu Popup hinzufügen: Okay, im Prototyp erstellen wir einfach das pastöse Band. Wenn also jemand auf ein Fußelement klickt, geht es zu dem einzelnen Fuß Nun, was wir tun müssen, ist, wenn jemand auf diese Schaltfläche bei zwei Karten klickt, es öffnet sich diese bei zwei Karten, es erscheint eine. Also, um das zu tun, klicke ich auf die Schaltfläche Bei zwei Karten und ich klicke auf diese Verbindung laden und hier hinzufügen. Dann habe ich hier die Möglichkeit , die Eigenschaft zu ändern. Die Aktion erfolgt also entweder durch Tippen auf die Transaktion oder bei der Änderung wird das Overlay geöffnet Weil wir dieses Pop-up hinzufügen müssen , wenn jemand bei To Car darauf klickt Okay, jetzt müssen wir Eigenschaften konfigurieren. Die Aktion wird sofort ausgeführt. Und hier haben wir Überlagerungen. Im Design sollte das Pop-up zentriert sein und so aussehen Und ich muss das nicht schließen , wenn ich außerhalb des Popup-Felds klicke , ich muss den Hintergrund hinzufügen. Also klicke ich auf einen Hintergrund. Und hier löschen wir die dunkle Farbe. Und ich werde die Opazität auf 25 reduzieren. Okay, lassen Sie uns das jetzt in Aktion überprüfen. Gehen wir also zur ersten Seite. Und ich klicke hier auf dieses Lebensmittel. Ich klicke auf At To Card. Wenn ich auf At To Card klicke, dieses Essen zu Card Pop A hinzugefügt Es ist also besser, wenn der Hintergrund dunkler ist , damit der Pop A deutlich sichtbar ist. Also machen wir ihn dunkler. Also einfach auf die Verbindung in dieser Eigenschaft klicken, im Hintergrund werde ich sie hier auf 50 einstellen. Jetzt ist es viel besser. Was ist, wenn wir es auf sieben ändern? Okay, jetzt ist es viel besser. Jetzt müssen wir diesen beiden Schaltflächen Aktionen hinzufügen. Wenn jemand auf diese Schaltfläche „Karte anzeigen“ klickt , sollte diese Person zur Karte weiterleiten. Klicken Sie einfach auf die Schaltfläche und klicken Sie auf diesen Verbindungsknoten und setzen Sie ihn so ein. Es wird zur Karte weitergeleitet, wenn jemand auf Anzeigen tippt. Wenn jemand auf Weiter einkaufen klickt, wird diese Person außerdem zu dieser Suche weitergeleitet. Essen bezahlen. Okay, und jetzt schauen wir uns das Design an. Jetzt klicke ich auf Karte anzeigen. Ich leite einfach zur neuen Karte weiter. Lass es uns von Anfang an überprüfen. Ich klicke auf das Essen, jetzt bin ich auf der Lebensmittelseite. Jetzt klicke ich auf die Kartenflasche. Und hier drinnen haben wir ein Pop-up. Hier kann ich auf Karte anzeigen und dann auf Weiter einkaufen klicken. Wenn ich auf Weiter einkaufen klicke, zahle ich einfach zur Suche. Okay. Jetzt haben wir in meinem Auto die Schaltfläche „Bestellung aufgeben“. Wenn jemand auf diese Schaltfläche „Bestellung aufgeben“ klickt, öffnet sich beim Tippen das Pop-up „Bestellung erfolgreich Die Aktion wird geöffnet Hier können wir das Pop-up manuell nach Belieben einrichten. Ich klicke einfach auf Manuell und jetzt kann ich es nach Belieben einstellen Lass es uns so einstellen und auf Hintergrund hinzufügen klicken. Fügen wir die Hintergrundfarbe 70 hinzu und überprüfen wir das in Aktion. Klicken Sie hier, klicken Sie auf Karte, klicken Sie in Karte anzeigen auf Karte anzeigen. Klicken Sie auf „Platzieren“, und das Popup-Fenster wird wie folgt aussehen. Aber ich werde das Pop-up als Mittelpunkt einrichten, weil es automatisch in der Mitte des Designs platziert wird. Okay, jetzt haben wir den Flow. Jetzt wollen wir sehen, was wir tun müssen. Also, wenn wir hier auf „Flasche schließen“ klicken, sollte dieses Pop-up geschlossen sein. Um das zu tun, klicke ich auf diese Schaltfläche zum Schließen. Und wenn ich es ziehe, kann ich diese Art von Symbol im zweiten Symbol sehen. Wenn jemand auf dieses Schließen-Symbol klickt, wird die Seite in diesem Schließen-Overlay zur hinteren Seite weitergeleitet in diesem Schließen-Overlay zur hinteren Seite Wenn jemand auf dieses Schließen-Symbol drückt, wird das Popup geschlossen Also lass es uns versuchen. Es ist nah, das ist okay. Jetzt haben wir keine Aktion für diese Zurück-Schaltfläche, also fügen wir dieser Schaltfläche eine Aktion hinzu. Wir haben bereits eine Variante unserer Komponente, also lassen Sie uns sie auf diese Zurück-Schaltfläche verweisen. Und wenn jemand auf diese Zurück-Schaltfläche klickt, sollte diese Person es tun. Gehen Sie zurück zu der Seite, von der er oder sie kommt. Ziehen wir also die Verbindung wie folgt und stellen sie auf den Hintergrund. Und jetzt wollen wir es in Aktion überprüfen. Wenn ich jetzt auf die Schaltfläche Zurück klicke, geht es einfach nach hinten. Lass uns auf diesen klicken. Wenn ich auf Zurück klicke, geht es nach hinten. Wir haben also andere Artikel. Wenn in diesem Fall jemand auf diese Kartentonne klickt, sollte diese Person auf die Warenkorbseite weiterleiten , die gerade auf die Warenkorbseite verwiesen hat. Wenn wir keine Komponente für diesen Header- oder Menüabschnitt erstellen , müssen wir diese Art von Verbindung dreimal manuell hinzufügen , um die Funktionalität zu erhalten. Bei der Variante und der Komponente müssen wir dies jedoch nur gleichzeitig tun. Und es gilt für alle Instanzen, die wir mit der Master-Komponente erstellt haben. Okay, lassen Sie es uns jetzt so in Aktion überprüfen. Ich kann einfach zu den Seiten gehen. Derzeit haben wir keine Bestell - und Bewertungsseite und das wird deine Aufgabe sein. Daher werden wir diesen Artikeln vorerst keine Funktionen hinzufügen. Wenn jedoch jemand auf diese Startseite klickt , sollte diese Person zur Startseite weitergeleitet werden. Um diese Funktionalität zu gewährleisten, müssen wir diese Hauptkomponente in das Aufkleberblatt einfügen . Also lass es uns machen. Dazu drücke ich den Befehl X, um es zu schneiden. Und lass uns hierher gehen und es so einfügen. Okay, jetzt gehe ich zu den Säuren nach Hause. In Säure haben wir die Fußzeile, also lassen Sie uns das einfach so formulieren Und jetzt müssen wir sie korrekt zur absoluten Fraktionsposition machen , dann zum Prototyp gehen und sie als behoben festlegen Okay, jetzt haben wir ein Problem. Wir müssen das Gleiche für jede einzelne Instanz tun jede einzelne Instanz weil wir die Option dieses Designs ändern Markieren Sie einfach alle und gehen Sie zur absoluten Position Und lass uns versuchen, es so zurückzulegen. Dann müssen wir einfach die Position wie diese manuell eingeben. Also jetzt sollte es gut funktionieren. Okay, jetzt denke ich, dass alles gut funktionieren wird. Jetzt fügen wir dem Ganzen Aktion hinzu. Oh Michael, es ist wirklich einfach. Einfach drauf klicken, zu Prototypen gehen und die Verbindung einfach so herstellen. Und jetzt wird es wirklich gut sehen. Okay, jetzt nähern wir uns dem Ende dieses Abschnitts. Mal sehen, was wir noch für ein Ende machen müssen. In der nächsten Lektion werden wir horizontal scrollen, dieser Überprüfungsbereich. Wir haben ihn bereits erstellt. Also werden wir es wieder tun. Nicht nur das, ich werde Ihnen zeigen, wie Sie die Elemente ändern oder wie Sie die Komponente ändern wenn wir auf eine solche Schaltfläche klicken. Wenn wir beispielsweise auf diese Suchschaltfläche klicken, wird der Text hier angezeigt. In der nächsten Lektion werde ich Ihnen zeigen, wie das geht. 53. Horizontales Scrollen zum Überprüfungsabschnitt hinzufügen: Okay, lassen Sie uns horizontales Scrollen für diesen Bewertungsabschnitt hinzufügen für diesen Bewertungsabschnitt Also gehe ich zu meinem Design und hier gehen wir zum Abschnitt mit einem Fuß und klicken auf den Rahmen Ich gehe zur Registerkarte Design und wähle hier diesen Rahmen aus. Um das zu tun, muss ich zu Ebenen für Schichten gehen. Hier ist das automatische Layout und hier ist der Abschnitt, den wir hinzufügen müssen, horizontales Scrollen. Hier fügen wir keinen Clip-Inhalt hinzu, also gehen wir zum nächsten Abschnitt. In diesem Abschnitt haben wir auch keine Klickinhalte hinzugefügt . Was ist mit dem nächsten? Es ist nicht der Abschnitt und das ist der Abschnitt, den wir hinzugefügt haben. Klicken Sie auf Inhalt, den ich antik habe, und hier ist die Rezension. Also gehe ich zum Rahmen und drücke die Befehlstaste und passe den Rahmen so an. Dann gehe ich zu Prototype. Im Prototyp werde ich über vier horizontale Verbindungen herstellen. Und lass uns zum Design gehen. Jetzt funktioniert es so, es ist wirklich einfach. Und hier klicke ich einfach auf diesen Rahmen und gehe zu Design. Klicken Sie auf Inhalt. Okay. 54. Das Suchfeld interaktiv gestalten: Was ich jetzt tun möchte, ist, wenn ich auf diese Suchleiste klicke oder wenn ich auf diese Suchleiste tippe, sollte hier ein Text namens Burger erscheinen. Und wenn ich dann auf dieses Suchfeld klicke, sollte es zur Suchseite weitergeleitet werden. Auf der Suchseite sollte der Text Burger lauten und das Suchergebnis für Burger sollte erscheinen. Also lass uns versuchen, es zu tun. Um das zu tun, werde ich hier hingehen, weil dies die Hauptkomponente unserer Suchleiste ist, und ich werde es einfach hier platzieren. Dann werde ich diesen Wrapper vergrößern und auf die Komponente klicken Dann klicke auf eine Variante, okay? Hier werde ich den Variantennamen ändern, um Text hinzuzufügen. Okay? Und ich werde dieses Textfeld für die Suchseite für Lebensmittel hier einfügen. Dann bring das hier her. Und jetzt werde ich einfach Tee pressen und einen Text namens Burger erstellen. Dann werde ich es in diese Variante einfügen und einfach darauf klicken. Machen wir es wie eine absolute Position. Und positioniere es hier. Okay? Was ich jetzt tun möchte ist, wenn ich auf diese Suchleiste klicke. In diesem Fall, wenn ich auf diese Suchleiste klicke oder auf die Suchleiste tippe, sollte das so aussehen , dass ich auf die Standardkomponente klicke und zu Eigenschaft gehe. Dann stelle ich hier einfach eine Verbindung zu diesem her. In der Verbindung steht die Aktion auf dem Spiel und die Reaktion oder die Änderung sollte in Änderung geändert werden , wird ein Text sein. Und es sollte instanzlich sein, was bedeutet, wenn Sie „Tippen“ auf die Suchleiste sagen, sollte der Burger-Text erscheinen. Also wurde es im Grunde zu dieser Suchleiste geändert. Lassen Sie uns sehen, dass es funktioniert. Oder geh nicht nach Hause, ich tippe einfach auf die Suchleiste und es wird Burger angezeigt. Und was ich jetzt tun möchte, ist, wenn ich auf dieses Suchsymbol tippe, es sollte direkt zum Suchfood führen. Wenn ich also einfach eine solche Verbindung herstelle, funktioniert die Aktion nicht richtig. Gehen wir also zur Startseite. Lassen Sie uns auf der Startseite die Seitenleiste anzeigen. Und hier drin, wenn ich hier klicke, gehe einfach zur Suche Aber wenn ich hier klicke und auf dieses Suchsymbol klicke, passiert nichts. Weil wir diese Standard-Suchleiste mit der Such-Fußseite verbinden . Um das Problem zu beheben, können wir diese auch mit dem Suchfuß verbinden. Okay. Das ist ein wirklich einfacher Teil, den wir erstellt haben. Jetzt erstellen wir auch diesen Teil, und es scheint alles gut zu funktionieren. Lassen Sie uns nun diesem Papierkorbknopf eine Aktion hinzufügen. 55. Variablen zum Entfernen von Wagenartikeln verwenden: In dieser Lektion wollen wir dieser Papierkorbschaltfläche eine Aktion oder Interaktion hinzufügen . Das heißt, wenn der Benutzer auf diese Papierkorbschaltfläche klickt, wird das Lebensmittel von der Karte entfernt. Dazu können wir lokale Variablen verwenden, also klicken Sie einfach auf die Leinwand, und wenn Sie darauf klicken, sehen Sie hier Text namens lokale Variablen, klicken Sie auf dieses Symbol. Und in Figma haben wir diese neue Variablenfunktion, und sie befindet sich derzeit in einem Modus Lassen Sie uns also diese Variablenfunktion verwenden und diesem Papierkorb eine Aktion hinzufügen Zuallererst werde ich hier klicken und auf Sammlung erstellen klicken. Hier werde ich den Namen der Sammlung als Einkaufswagenartikel festlegen. Und dann klicke ich hier auf Variable erstellen. Und wir haben vier Arten von Variablen. Bei diesen vier Typen wählen wir hier den booleschen Typ Ich werde diesen Text in C umbenennen. Fügen wir den vollständigen Namen hinzu, damit er leichter zu verstehen Fügen wir ihn so hinzu. Wir reduzieren die Größe dieser Variablen , erscheinen und erstellen dann die nächste. Ich werde zwei weitere davon erstellen. Okay? Als nächstes bei diesen Namen, und ich werde den Wert auf wahr setzen. Okay, jetzt haben wir Variablen erstellt. Wenn wir auf die Leinwand klicken und die kondokalen Variablen überprüfen, sehen wir möglicherweise Jetzt setzen wir diese Variablen auf die Kartenelemente Hier haben wir den ersten, klicken Sie einfach darauf. Und wenn wir in diesem Ebenenbereich darauf klicken und ihn schließen, wird der Abschnitt geschlossen. Diese Funktion sollte ausgeführt werden , wenn wir auf dieses Papierkorbsymbol klicken. Dazu klicke ich mit der rechten Maustaste auf dieses Symbol. Wenn ich mit der rechten Maustaste klicke, sehe ich die vier Variablen, die ich erstellt habe. Weisen Sie einfach diese vier Variablen zu. Das ist für die erste. Als nächstes klicke ich auf den zweiten Artikel und klicke mit der rechten Maustaste, dann ist es Blueberry Fpin Und lassen Sie uns den Rest des Artikels so machen. Okay, jetzt gehe ich zu Prototype. Dann drücke ich die Befehlstaste und wähle dieses Papierkorbsymbol aus. Dann kann ich das sehen, nicht also habe ich gerade diesen Mülleimer ausgewählt. Jetzt klicke ich in Interaktion auf dieses Plus-Symbol. Hier wähle ich die Aktion wie beim Tippen aus und ändere diese nicht, um eine Variable festzulegen. Um diese Funktion nutzen zu können, sollten wir eine Team-Auflösung auswählen, auf Team aktuell auswählen klicken, ich setze das Häkchen auf Team-Projekt und klicke auf Mehr. Wir können das also nicht im Grafikmodus machen, deshalb müssen wir es an das Team senden. Also lass uns das verschieben, okay. Jetzt klicke ich auf „Keine“ und dann auf „Variable setzen“. Hier werde ich die Variable als erste festlegen und der Wert wird falsch sein. Und lassen Sie uns das für den Rest der Schaltfläche tun. Klicken Sie auf den Papierkorb und dann auf Interaktionen. Und die Action ist auf Knopfdruck. Ändert man dieses Wort in eine festgelegte Variable und schon ist es blaues Morphin. Klicken Sie darauf und setzen Sie den booleschen Wert auf falsch. lass uns zum nächsten gehen Gehen wir zum nächsten und klicken auf die Pfadlinie. Das ist der letzte. Okay, jetzt sollte es funktionieren. Schauen wir uns also an, ob es funktioniert hat oder nicht. Jetzt bin ich auf meiner Karte. Lass uns nach Hause gehen. Gehen wir zur Karte. Und auf dieser Karte klicke ich einfach auf den Crash-Button und er ist einfach verschwunden. Also lass uns auf diesen klicken. Es ist verschwunden. Was ist mit diesem? Auf diese Weise können wir der Schaltfläche zum Entfernen der Karte Funktionen hinzufügen . Gehen wir also wieder zur Startseite. Gehen wir also zu Optionen und zeigen die Seitenlinie, und versuchen wir es erneut. Klicken Sie so und es wird einfach entfernt. Das ist also auch eine erweiterte Funktion. Wir können diesen Inhalt entfernen, wenn wir ihn ändern können , wenn wir auf den Papierkorb klicken. In zukünftigen Lektionen werde ich Ihnen zeigen, wie das geht. Versuche in der Zwischenzeit, mit der Fikma zu spielen und neue Funktionen wie diese zu erlernen Fema ist also ein wirklich mächtiges Tool und wird Ihnen in Zukunft helfen, ein erfolgreicher UF-Designer zu werden 56. Kursprojekt: Hallo alle zusammen. Das ist das Ende, und danke, dass du bei mir geblieben bist. Du hast also einen Auftrag. Lass es mich soweit erklären. Wir erstellen High-Fidelity-Markups und konvertieren diese High-Fidelity-Markups in einen High-Fidelity-Prototyp Ihre Aufgabe ist es also, drei Seiten zu erstellen. Diese Seiten sind meine Bestellseite und die Seite zur Auftragsverfolgung. Schließlich müssen Sie ein Menü für diese App erstellen. Nachdem Sie diese drei UI-Designs erstellt haben, müssen Sie sie in einen Prototyp konvertieren. dieses Projekt, wenn Sie die Seite „Bestellung verfolgen“ entwerfen auf diese Schaltfläche „Bestellung verfolgen“ klicken, muss Ihre Seite „Bestellung verfolgen“ angezeigt werden. Wenn Sie auf dieses Hamburger-Menü klicken , sollte Ihr Menü erscheinen Ich hoffe, Ihnen gefällt dieser Kurs und Sie erhalten wertvolle Informationen, die Ihnen für Ihre US-Fluggesellschaft weiterhelfen Nochmals vielen Dank, dass Sie sich diesen Kurs angesehen haben. Wir sehen uns in einem anderen Kurs.