Entwerfen von mobilen Apps in Adobe XD

1. Promo app skillshare intermed: Wir werden eine großartige mobile App in Adobe XD erstellen. Hallo, ich bin Chris Barren, zertifiziere den Adobe-Ausbilder und außerdem der CEO von Dean Junkie, einem Unternehmen für mobiles App-Design, das ich 2013-2018 in nur 3 Stunden gegründet und geleitet habe. Ihnen einige der wichtigsten Gestaltungsprinzipien für das App-Design, alle auf Material Design 2.3 basieren. Und das ist aus der offiziellen Google-Richtlinie. Wir werden eine mobile App entwerfen. Darüber hinaus werde ich Ihnen beibringen, wie Sie ein solches Projekt vom Drahtmodell über den Brief bis hin zum fertigen Produkt angehen den Brief bis können. Denken Sie daran, dass wir nichts programmieren werden. Alles wird im Adobe XD-Designprogramm stattfinden , das eine kostenlose siebentägige Testversion bietet, dann sind es zehn Dollar pro Monat. Im ersten Teil dieses Kurses werden wir alle Komponenten einer App behandeln. Dann machen wir uns an die Arbeit und wenden all dieses Wissen an. Der entscheidende Unterschied , der meinen Kern auszeichnet, ist der Denkprozess. Ich sage Ihnen nicht nur, wie Sie bestimmte Dinge entwerfen, ich werde all meine Erkenntnisse und all meine Erfahrungen teilen , und Sie können all diese Dinge sofort in Ihre eigenen Workflows anwenden . Damit machen wir uns an die Arbeit und legen los. 2. Einführung in das Materialdesign: Willkommen zurück. In den nächsten Minuten möchte ich, dass wir das Materialdesign untersuchen, ob es so ist, was es nicht ist und warum Sie sich darum kümmern sollten. Material Design ist eine Designsprache , die 2014 von Google mit dem alleinigen Ziel erstellt wurde 2014 von Google mit dem alleinigen Ziel Lücken nicht nur schön, sondern auch nutzbar, vorhersehbar und aussagekräftig zu machen . Nun scheint die Designsprache prätentiös zu sein, aber Sie können sich Materialdesign als eine Reihe von Regeln vorstellen. Wenn Sie diese Regeln befolgen, Sie wahrscheinlich eine App, die in den Händen des Benutzers natürlich aussieht und sich auch so anfühlt. Jetzt ist diese Richtlinie für alle öffentlich zugänglich. Im Moment ist die dritte Version da draußen. Und das liegt daran, dass es wie bei allem den Lippenbalsam weiterentwickelt hat, er wurde immer besser. Nun, zumindest hoffen wir das. Was Sie an dieser Stelle wissen müssen , ist , dass die meisten dieser Regeln aus dem Leitfaden, unserer Rate, zu Ergebnissen führen. Sie sprechen über die Vereinfachung von Layouts mit kräftigen Farben, Verwendung von Bewegung, um Bedeutung zu verleihen und so weiter. Schauen Sie sich einfach das gesamte Gmail und das neue an, in dem die Regeln befolgt werden. Es ist also Tag und Nacht. Material Design hilft. Jetzt sollten all diese Richtlinien berücksichtigt werden , wenn Sie eine App oder sogar eine Website erstellen. Denken Sie jetzt darüber nach, wie Ihre Kleidung hergestellt wird und warum sie auf eine bestimmte Art hergestellt wird, oder? Das ist der Grund, warum Fans zwei Beine haben, aber warum hat ein T-Shirt eine bestimmte Länge? Nun, warum ist ein Loch genau hier, richtig? Die Politiker müssen sich an bestimmte Parameter halten , oder? Wenn du dich nicht an die grundlegendsten Regeln hältst, wirst du am Ende verrückte Designs haben. Das ist es also, was das Materialdesign zu verhindern versucht. Das einzige Problem ist die Verpackung. Der Leitfaden selbst ist etwas schwierig zu befolgen. Es ist ein bisschen überwältigend. Jetzt haben Sie möglicherweise die Website besucht. Mein Gott, das ist viel zu viel und du bist nicht allein. Jetzt ist dies wieder die dritte Version. Google hat es mehrmals überarbeitet und es wird noch aktualisiert. Trotzdem ist es immer noch etwas schwierig zu verfolgen, insbesondere in bestimmten Abschnitten. Die Formulierung ist manchmal etwas zu komplex. Und insgesamt macht es das Lesen und Verfolgen sehr schwierig. ZB Dinge wie Pixeldichte, dichteunabhängige Displays, skalierbare Pixel und so weiter. Diese können jeden einschüchtern. Sie gehen dann zu anderen Teilen über und finden Beispiele, in denen es heißt, dass Sie 72 dB zwischen dem Titel und dem Rand des Bildschirms verwenden sollten , DP. Ich dachte, wir würden Pixel verwenden. Wie konvertieren wir Pixel in dp? Brauchen wir die Formel? Brauchen wir jedes Mal einen Taschenrechner, wenn Sie ein Rechteck hinzufügen? Das sind also die Dinge , bei denen Sie sich am Kopf kratzen. Und wieder ist dies nur ein Beispiel. Was wir in diesem Kurs tun werden, ist, dass wir einen bodenständigen Ansatz verfolgen werden, der zu dass wir einen bodenständigen Ansatz verfolgen werden, gut aussehenden Lücken führt. Das bringt uns also zu dem, was Materialdesign nicht ist. Es ist kein Geschenk der Götter. Es ist nicht das A und O von Apps. Es gibt uns zwar viele Ressourcen, aber ich persönlich glaube nicht daran es zu 100 Prozent zu verfolgen. Als ob es die Verfassung wäre, als wäre es das Gesetz. Jetzt habe ich Situationen gefunden , in denen ich abweichen musste, aber viele Gründe. Deshalb werde ich Ihnen in diesem Kurs einige der besten Designprinzipien beibringen, die ich als kugelsicher, praktisch und benutzerfreundlich empfunden habe . Jetzt sind die meisten von ihnen auch in diesem Handbuch zu finden, während andere durch meine eigene Erfahrung und die Arbeit in Adobe XD und das Erstellen von Lücken entdeckt wurden durch meine eigene Erfahrung und die Arbeit in Adobe XD und das Erstellen von Lücken entdeckt . Ich möchte, dass Sie verstehen, dass es nie eine Diskussion darüber gibt , ob dies oder jenes Teil des Materialdesigns ist. Und das liegt daran, dass es wirklich egal ist. Worauf ich mich gerne konzentriere, sind Ergebnisse. Sieht die App gut aus? Kann es ohne Workarounds codiert werden? Gibt es uns das beabsichtigte Ergebnis? Dies sind einige der Fragen, die mir durch den Kopf gehen und die meine Entscheidungsfindung leiten. Es gibt also jemanden in einem Satz, wir werden Materialdesign und andere Apps verwenden, aber wir werden auch von Zeit zu Zeit davon abweichen. Wir werden uns darauf beziehen, aber wir werden nicht anbeten, nachdem das gesagt ist, lassen Sie uns zur nächsten Vorlesung übergehen. 3. Übersicht der Komponenten für die Android: Willkommen zurück. Wir müssen wissen, welche Bausteine wir verwenden können, um Apps zu erstellen, insbesondere Android-Apps. In dieser Vorlesung gebe ich Ihnen einen Überblick über die wichtigsten Elemente. Das wird ziemlich schnell gehen, aber du musst sie dir nicht bei der Bank auswendig lernen, du hast einen Spickzettel beigefügt. Die Idee ist, dass jedes Kuchenrezept Mehl, Eier, Butter usw. benötigt . Die meisten von ihnen brauchen die gleichen Dinge. Mit Werbung ist es also genauso. Nehmen wir es von der oberen Breite, der Statusleiste. Dies ist das winzige Band oben in jeder App, das dir das Zeitkampf-Level, deinen Mobilfunkanbieter und andere Benachrichtigungen anzeigt . Es kann schwarz, transparent oder einfarbig sein. Dies ist die Statusleiste. Die Statusleiste, die Statusleiste, was auch immer Sie in Bezug auf das Design haben, wird es wahrscheinlich einfarbig machen , weil das am besten aussieht. Unmittelbar unter der Statusleiste befindet sich die App-Leiste. Das ist der offizielle Name, aber er wurde vor einiger Zeit auch Action Bar genannt. Einige Entwickler nennen es immer noch so, und ich bin in diesem Boot. Ich denke, es beschreibt diesen Bereich am besten. Nun ist die Aktionsleiste sehr wichtig, da sie mehrere Funktionen erfüllt und wir werden in einem speziellen Vortrag darüber sprechen. Lassen Sie uns nun lernen zu erkennen, dass es möglicherweise eine einzige imaginäre Linie einnimmt. Es kann aber auch viel mehr Platz beanspruchen, normalerweise um Platz für Tabs zu schaffen. Und seltene Fälle. Es mag transparent sein, aber selbst dann ist immer ein obligatorisches Element vorhanden. Und das ist dieser Pfeil, der das universelle Android-Zeichen ist. Um zurück zu gehen. der offiziellen Dokumentation heißt es eigentlich der Aufwärtspfeil . Aber auch hier sagen wir normalerweise, es ist der Rückwärtspfeil. Da ich das bereits erwähnt habe, konzentrieren wir uns auf den nächsten Baustein, die Tabs. Diese können jetzt verwendet werden, um Ihre Inhalte aufzuteilen. Android-Nutzer sind mit der Swipe-Geste, die dies umschaltet , sehr vertraut der Swipe-Geste, die dies umschaltet , da diese nicht überall in fast jeder einzelnen App zu finden sind. Jetzt gibt es zwei Arten von Dabs, feste und scrollbare. Ich bevorzuge die erste, weil sie ästhetisch ansprechender ist , da wir die Breite der Kunsttafel auf die Anzahl der Betten aufteilen die Breite der Kunsttafel auf die Anzahl der Betten Wir können mit etwas weniger oder bis zu 45 Tabs arbeiten wird zu voll, falls Sie mehr Tabs benötigen , verwenden Sie am besten die Scroll-Funktion. Der Abstand vom linken Rand ist ebenfalls sehr bedeutend. Es ist ziemlich groß. Aber insgesamt ist das ein bisschen auf den Punkt gebracht. Eine weitere Komponente ist das linke Menü, aber nicht, weil es uns ermöglicht, es in Bezug auf die Designseite aufzupeppen. Wir können nicht viel tun. Eigentlich ist das sehr nützlich , weil es die App überfüllt einfacher macht. Und dann sind Drogenkonsumenten an dieses Menü sehr gewöhnt. Und das ermöglicht es uns, ziemlich viele Inhalte darin zu verstecken . Anstatt also die Aktionsleiste mit vielen Symbolen oder vielen Tabs zu übersäen , verschiebst du das alles einfach hierher. Dieses Layout ist sehr Standard, sodass Entwickler schnell den Standardlook erstellen können , den Sie hier sehen. Wir können die Symbole anpassen und ein bisschen Farbe hinzufügen. Aber das war's auch schon in Bezug auf die Anpassung. Auch hier spielen Entwickler immer eine große Rolle bei dieser Vergütung, denn wenn Sie ein etwas anderes Layout erstellen, müssen sie an ihrer Seite viel Arbeit leisten, was ziemlich schwierig ist und wieder teurer. Jetzt ist es normalerweise die Mühe nicht wert, also werden wir es so belassen. Aus diesem Grund das Navigationsfeld keine separate Vorlesung erhalten, zumindest vorerst nicht. Im weiteren Verlauf sind Karten eine großartige Möglichkeit, Inhalte zu präsentieren. Sie erkennen sie an der weißen, leicht abgerundeten Basis, die normalerweise auf einem hellgrauen Hintergrund sitzt. Es ist ziemlich einfach, Karten mit Listen zu verwechseln. Diese werden am besten verwendet, um Inhalte zu zeigen, die ähnlicher Natur sind. Rezept-Karteikarten können Rezept-Karteikarten verschiedene Arten von Inhalten wie Text, Fotos und dann normalerweise andere anzeigen . Ein Dashboard ist ein gutes Beispiel dafür Karten richtig verwendet werden. Jeder Item-Punkt ist ein anderer Teil der App. Okay, jetzt lass uns weitermachen. Meine nächste Komponente ist in fast jedem Bildschirm vorhanden, und das ist der Popup-Bildschirm. Dies wird offiziell als Dialog bezeichnet und ist in zwei Formaten zu sehen. Der normale, der sehr leicht zu erkennen ist, und dann der Vollbildmodus. Wir werden beide in einer separaten Vorlesung besprechen . Sie können jedoch schnell einen Telefonbildschirmdialog identifizieren , indem Sie auf die Aktionsleiste schauen. Wenn Sie dieses Schließen-Symbol zusammen mit einem Aktionswort auf der rechten Seite sehen , dann ist es ein Dialog, okay, mit dem Ende. Aber ich liebe diese Typen, also wollte ich sie unbedingt anrufen. Snackbars. Und die. Während diese Teil eines ausgewogenen Frühstücks zu sein scheinen, sind diese Jungs tatsächlich daran gewöhnt, den Benutzer über verschiedene Dinge zu informieren, die gerade passiert sind. Konzeptionell können diese nun mit Dialogen verwechselt werden, aber wir werden die Unterschiede vorerst früh genug durchgehen und sicherstellen, dass wir sie erkennen können , wenn wir sie in einem Design sehen. Leider können wir in Bezug auf Designarbeit nicht viel tun. Aber dennoch muss man über sie Bescheid wissen. Sie verbessern die Benutzererfahrung wirklich. Als nächstes stehen Buttons auf unserer Liste. Diese sind in zwei große Kategorien unterteilt. Normale Buttons und schwebende Action-Buttons, die auch FAB genannt werden. Jetzt sind normale Buttons vorhersehbar. Sie sind groß, oder? Sie haben einen gepressten Zustand und können fast überall im Bildschirm in einer angemessenen Menge an Poren platziert werden. Jetzt befinden sich schwebende Aktionstasten normalerweise unten rechts. Auswirkungen. Während Sie also scrollen, bleibt die Schaltfläche gedrückt, da diese Aktion normalerweise das Hauptmerkmal der App ist . Jetzt, z.B. in WhatsApp, öffnet der FAB eine neue Kompensation in Knoten. Ihr Baby erstellt einen neuen Eintrag. Das ist also der Hauptunterschied zwischen diesen beiden Kategorien, klassischen Knöpfen und ihren Babys. Aber wir werden in einer separaten Vorlesung ausführlicher über sie sprechen . Lassen Sie uns abschließend über Becks Felder in Android sprechen. Diese sind also extrem vielseitig und Sie können sie in nahezu jeder App sehen . Sie können ein Etikett oder einen Text darunter haben. Sie haben möglicherweise einen Dropdown-Pfeil oder das Kalendersymbol neben sich. Die Beschriftung mit wird manchmal in einer Zeile angezeigt. Und wenn Sie das Feld aktivieren, bewegt es sich darüber und schrumpft. Diese anderen machen viel Spaß. Und sie können das Aussehen Ihrer App dramatisch verändern. Wir werden sie ziemlich oft benutzen. Damit haben wir diesen Überblick über die wichtigsten Android-Komponenten abgeschlossen . Ich weiß, dass das eine Menge Speck ist, aber bitte sieh dir den beigefügten Spickzettel an und du kannst ihn sogar ausdrucken. Sie müssen sich nichts merken, da wir alle Details zur richtigen Zeit ausführlich besprechen werden. Bevor Sie loslegen, sollten Sie wissen, dass es andere Android-Komponenten wie Chips, Schieberegler, Tooltips und so weiter gibt. Aber in meinem Buch sind die nicht so wichtig. Und aus diesem Grund wollte ich es wirklich Schritt für Schritt machen, wir werden nicht darüber sprechen. Stattdessen werden wir uns auf das konzentrieren, was wir hier besprochen haben da diese in 90% aller Projekte enthalten sein werden. Okay, wir sehen uns in der nächsten Vorlesung. 4. Hier ist die beste Artboard Größe für deine Apps: Willkommen zurück. Lassen Sie uns über die Größe der Kunsttafel sprechen, die ziemlich kompliziert werden kann , wenn Sie dort nicht die richtigen Geburten haben. Jetzt haben wir gesehen, dass Google alles in dB und Sb misst. Nun, wenn Sie der Programmierer sind, sind Sie wahrscheinlich mit diesen Begriffen vertraut. Aber was ist für den Rest von uns für Design, das sollten wir tun? Nun, hier ist die Kurzversion. Für Android-Apps verwenden wir zunächst 720 als Breite. Die Höhe spielt wirklich keine Rolle, da wir die meiste Zeit längere Apps haben werden . Warum also 720, obwohl wir 360 oder das vierte im Presets-Panel gewohnt haben. Und dann ein paar UI-Kits, die du vielleicht gesehen hast 375. Hier ist die Situation. 360 ist der Standard im Materialdesign. Nummer zwei. Sie können hier ein Beispiel sehen, bei dem die Höhe der Aktionsleiste 56 dB beträgt, 56 Pixel auf dem 360-Art-Board entspricht. Jetzt können Sie all diese anderen Messungen sehen , die für Anfänger sehr nützlich sind. Das Problem mit drei Sechsteln ist, dass es ziemlich klein ist. Wenn Sie das exportieren, möchten Sie es nur Ihren Freunden oder sogar Ihren Kunden zeigen . Es wird nicht so gut aussehen. Es wird nicht so scharf sein, oder? Deshalb ziehe ich es vor , es einfach zu verdoppeln, das Ganze zu verdoppeln. Die Proportionen sind die gleichen , aber mit einer Verdoppelung noch, richtig? Deshalb werden wir 720 verwenden. Auch hier verdoppeln wir im Grunde die Bildschirmgröße, aber alles ist proportional. Sie können sich diese Werte also immer vom Typ ansehen und verdoppeln. Und du wirst bereit sein zu gehen. Beispielsweise werden 56 dB zu 112 Pixeln, 16 zu 32 und so weiter. Die Proportionen bleiben gleich. Aber gibt eine Bank zu sagen, dass sich der Standard von drei Sechzehnteln auf was auch immer ändert. Wie auch immer. Nun, nur als grobes Beispiel, sagen wir, dass wir hier, hier und dann hier auf dem Fernsehbildschirm eine Lücke von 16 Pixeln haben. Cool. Dann auf den vollen Hundert und 12 Pixeln, dann kann es auf 24 Pixel ansteigen. Aber wieder werden es überall 24 sein. Die Idee ist also wieder, dass alles proportional ist. Alles skaliert entweder nach oben oder unten. Und weil wir Vektoren verwenden, ist das alles in Ordnung. Zusammenfassend lässt sich sagen, die Größe Ihres Bildschirms nicht wirklich wichtig ist, da Ihre Elemente immer nach oben oder unten skaliert werden. So funktionieren Apps. Einige Telefone haben super verrückte hohe Auflösungen. Billigere haben niedrigere Auflösungen. Also werden Sie dann plus Versionen jeder einzelnen App entwerfen ? Nein, das wäre verrückt. Stattdessen erstellst du einen als Typ und dann wird die Coda ihn je nach verschiedenen Dingen nach oben oder unten skalieren . Und weil wir vektorbasierte Formen und Symbole verwenden , bedeutet dies, dass Sie dies ohne Qualitätsprobleme tun können. Du wirst keine verschwommenen oder blutigen Kanten bekommen. Und wieder empfehle ich Seven 20th für die Breite. Und das bringt uns zum nächsten Größenproblem. Was ist die beste Größe für alle unsere Komponenten? Für die Buttons, für die Action Bode's für die Karten und so weiter. Lassen Sie uns im nächsten Clip darüber sprechen. 5. Größe in Pixeln: Hier ist der Grund, warum die Leute streiten: Willkommen zurück. In der vorherigen Vorlesung haben wir über die Verwendung des Material Design Guide gesprochen. Cool. nun schnell die richtigen Größen für die anderen Komponenten zu erhalten , suchen Sie richtigen Größen für die anderen Komponenten zu erhalten , einfach nach den Spezifikationen, die kurz für Spezifikationen sind. Und Sie haben keine schnellen Antworten in Bezug auf die Größe erhalten. Beispiel für die obere Leiste, die 112 Pixel hoch sein sollte. Die Lücke links besteht aus zwei Pixeln. Wie komme ich jetzt an diese Zahlen? Ich verdopple sie nur, damit sie auf das 720-Art-Board passen. Gehen wir nun zu Buttons, z. B. beträgt die minimale Breite 128 Pixel, die minimale Höhe 72 Pixel. Lassen Sie uns nun ein weiteres Beispiel nehmen. Schauen wir uns die Fabs an, suchen wir z.B. nach den Spezifikationen und entwickelten verschiedene Arten von Dabs. Kurz gesagt, diese sind 96 Pixel hoch, und das ist der Standard. Und hier ist noch einer. Das ist 144 Pixel hoch, nur für den Fall, dass Sie ein Symbol und das Etikett ein Textlabel wünschen. Aber ja, insgesamt ist dies der schnellste Weg, um sich mit dem Materialdesign vertraut zu machen. Ich möchte Sie daran erinnern, dass dies die zweite Version des Leitfadens ist. Wenn Sie Material drei verwenden möchten, was ich nicht wirklich empfehlen kann. Nur ein Minuten-Update, soweit es mich betrifft, können Sie diese Werte immer noch verdoppeln, aber Sie müssen 824 als Kunstboard-Größe verwenden . Also anstatt 28, 24 zusammenzubauen , keine große Sache. Aber wieder tust du es. Gehen wir jetzt einen Schritt zurück und schauen uns das Gesamtbild an. Nun, sind Entwickler Programmierer, interessiert es sie, ob Sie Materialdesign zwei oder drei verwenden oder ob Sie 36412 verwenden, was 72824 bedeutet? Nein, absolut nicht. Ich wiederhole es. Den meisten Programmierern ist es egal, mit welcher Bildschirmgröße Sie entwerfen. Und das ist draußen. Aber das wirft die Frage auf, warum so viele Menschen online über die Größe der Kunsttafel streiten ? Nun, lasst uns einfach über das ganze Ziel nachdenken. Als Designer. Am Anfang wollen wir nur eines, aber Wege ändern nicht die Lücken. ZB einen riesigen Button entwerfen , der ein Drittel des Bildschirms einnimmt, oder? Das wäre schlecht. Oder ein Symbol, das so klein ist , dass nur Enden es verwenden können. Das versuchen wir als Anfängerdesigner zu vermeiden , oder? Und da kommt der Typ ins Spiel. Es ist ein gutes Regelwerk , das diese Art von Fehlern verhindert. Also nochmal, du willst ein paar Fans entwerfen, oder? Du brauchst zwei Beine, oder? Du willst das Auto entwerfen. Du wirst ein paar Räder brauchen. Standards gibt es aus einem bestimmten Grund. Sie bilden eine solide Grundlage für unser Design. Nun, zu diesem Zweck, schlage ich Folgendes vor. Öffne einige schöne Apps auf deinem Handy und mache Screenshots. Suchen Sie nach den Apps, die Millionen von Menschen verwenden. Ziehen Sie sie dann in den Adobe XD und passen Sie die Größe bei Bedarf an, damit sie in Ihre Kunsttafel passen. Wahrscheinlich werden Sie einen Screenshot machen, es wird viel größer sein. Aber auch das ist in Ordnung. Skalieren Sie es proportional. Jetzt ist die Frage, ist Ihre Größe ungefähr gleich? Siehst du, es ist keine Tragödie. Wenn Sie anstelle von 96 Pixeln 100 verwenden, wird die Materialdesign-Polizei nicht an Ihre Tür kommen. Das Hauptanliegen ist nun, dass Sie es nicht 400 Pixel hoch machen. Das wäre ein Problem, oder 20 Pixel. Also entschieden viel klügere Leute, dass 96 Pixel für die meisten Menschen am besten funktionieren. Deshalb sprechen wir so viel über Größe, damit wir mit dem richtigen Fuß beginnen können. Aber nur für den Fall, dass Sie Richtlinien für das Materialdesign nicht mögen, einfach weiter Screenshots und vergleichen Sie Ihr Design mit den wichtigsten Apps. Sehen Sie, ob Yahoo Mail entschieden hat, dass die Schaltfläche 96 mal 96 am besten funktioniert, dann sollten Sie wirklich nicht 20 mal 20 verwenden. Oder wenn Sie feststellen, dass 90% der Apps Tabs verwenden, die 96 Pixel groß sind. Verwenden Sie erneut keine 50 Pixel, oder? Dies sind nur zufällige Beispiele aus meinem Kopf, aber ich hoffe, dass Sie meinen Standpunkt verstehen. Diese Größen aus dem Leitfaden sind keine Gesetze, die von der Göttlichkeit herabgesandt wurden. Nein, das ist nur ein schneller Weg , um eine Stiftung zu gründen. Wenn Sie also einige Leute sehen, die über 363.754,12 debattieren, vier AT, mit was auch immer. Bitte lassen Sie sich auf keine Auseinandersetzung ein. Konzentriert sich auf die Designprinzipien Stattdessen ein graues Schema, ausgewogene Symmetrie, eine tolle Pfeifenbiografie und so weiter. Das ist es, was Ihre App wirklich großartig aussehen lässt. Und weichen Sie natürlich nicht zu sehr vom Standard ab. Ein paar Pixel hier und da, das ist völlig in Ordnung. Aber ändern Sie die Größe nicht um mehr als 20 Dollar. Und vielen Dank und wir sehen uns in der nächsten Vorlesung. 6. Lerne, die action (obere Leiste) zu entwerfen.: Willkommen zurück. Lassen Sie uns über die Aktionsleiste oder die App-Leiste sprechen und sehen, was sie für uns als Designer tun kann. Lassen Sie uns jetzt schnell sehen, was mit dem Nachbarn im Obergeschoss, der Statusleiste, los ist . Das bekommt keine Liebe und es schämt sich ziemlich, wenn Entwickler es in seinem Standardzustand belassen. Ein dunkelgrauer Balken ist jedoch nicht wirklich ein großes Glück. Sie können es transparent oder schwarz machen. Designer neigen dazu, eine Volltonfarbe zu verwenden, die zur Aktionsleiste passt, und das ist diese Weise ästhetisch ansprechender. Dies bietet auch bessere Kontraste zu all seinen Icons, die größtenteils weiß sind. Jetzt, zuletzt mit dem Materialentwurfsbaum, erhält die Statusleiste standardmäßig dieselbe Farbe wie die ActionBar, aber hier geht es um die Statusleiste. Gehen wir also runter zur Aktionsleiste. Jetzt kann die ActionBar mehrere Formen und Größen annehmen , die insgesamt gebildet werden, aber Sie werden wahrscheinlich nur eine oder vielleicht zwei verwenden. Dies ist der Klassiker mit einem Menüsymbol auf der linken Seite und dem Logo in der Mitte. Dies ist das Zentrum, die Aktionsleiste. Und es ist sehr beliebt für den Startbildschirm, also den Bildschirm, egal ob Sie immer wieder darauf zurückkommen. Nun, dieses Menüsymbol wird normalerweise als Hamburger-Menü bezeichnet, weil Linien übereinander liegen. Also ich denke, es ähnelt sowieso ein bisschen einem Hamburger, das ist sehr beliebt. Bitte beachten Sie jedoch, dass diese Registerkarten eine separate Komponente sind. Ja, sie haben die gleiche Farbe, aber sie sind nicht Teil der Aktionsleiste, okay, weiter, Auf der rechten Seite sehen Sie oft einige Symbole, die Ihnen helfen, einige ziemlich wichtige Aktionen auszuführen. In diesem Fall haben wir eine Suchfunktion, die auf einer Nachrichtenwebsite sehr nützlich ist , sowie ein weiteres Menü. Gehen wir zu einer anderen sehr beliebten Aktionsleiste über. Wenn Sie ein Element betreten, erhalten Sie normalerweise dieses Layout. Dieser Pfeil hilft dir, in die obere Ebene zurückzukehren , je nachdem, wie du sie betrachtest. Dann haben Sie einen Titel, der Ihnen beim Navigieren in der App hilft, sowie ein weiteres Symbol auf der rechten Seite. Dies ist eine typische Aktionsleiste, die die Linie verlassen hat , in der wir die erste Aktionsleiste zentralisieren mussten, das Logo. Hier ist der Titel links. Um das zusammenzufassen, haben wir bisher zwei Arten von Aktionsleisten gesehen, zentrierte und linke Linie. Auch hier zeigt die zentrierte in der Regel das Firmenlogo und Sie sehen es normalerweise auf dem Hauptbildschirm der App. Der links ausgerichtete Titel wird normalerweise angezeigt, wenn Sie sich innerhalb eines Inhaltstyps befinden. Das sind also zwei von vier Aktionsleisten. Was ist mit den anderen beiden? Nun, Kinder und Beispiel aus Gmail. Wie Sie sehen können, ist der Titel sehr lang und ziemlich groß, sodass er nicht neben den Pfeil passt. Du solltest den Titel eigentlich nicht super klein machen , um ihn besser zu machen. Aus diesem Grund schlägt Material Design diese beiden Optionen vor. Im Grunde verschiebt der Titel meinen Rat, versuche ihn zu vermeiden, weil das meiner Meinung nach nicht allzu gut aussieht. Jetzt lass mich dir die Wahrheit sagen. Apps werden ständig aktualisiert. Sie können sich also dieselben Apps aus diesem Kurs ansehen und del möglicherweise völlig anders sehen. So sind die Dinge einfach. Aber das Wesentliche bleibt immer derselbe. Ein Hamburger-Menü, ein Titel, einige Icons auf der rechten Seite. Verwenden Sie niemals mehr als drei Symbole auf der rechten Seite. Und wenn der Titel nicht in das Hamburgermenü passt , was ist der Rückwärtspfeil? Beweg es einfach nach unten. Schrumpfen Sie es nicht. Jetzt ist die Frage, könntest du kleine Variationen machen? Klar. Hier ist z.B. Google Calendar. Hier auf dem Hauptbildschirm würden Sie erwarten, dass der Titel zentriert ist. Aber das ist eigentlich ein Dropdown, also hat es die Zeile verlassen. Und da die Über drei Symbole auf der rechten Seite stehen, ist es tatsächlich sinnvoll, den Monat und das Jahr auf der linken Seite zu platzieren . Und immer noch in Gmail erhalten wir diese Aktionsleiste in den Ersparnissen. Jetzt ist dieser Pfeil sehr verbreitet. Auch hier zeigt es dir , dass du in etwas bist und dass du zurückgehen kannst, oder wie der offizielle Führer es sagt, du kannst ein Level aufsteigen. Jetzt ist die ActionBar das linke Ausrichtungssymbol, der Titel auf der linken Seite und dann ein Menüsymbol auf der rechten Seite. Aber ja, insgesamt sehen die meisten Action-Bars so aus. Lassen Sie uns nun über die Größe in Pixeln sprechen. Sie haben eine gestrichelte Anleitung, damit Sie sie sich nicht bei der Bank merken müssen Wir sprechen über die V6-Bildschirmgröße vom Materialdesign bis zum Doppelten. Also 720 Pixel für die Breite. Also die Statusleiste, wir wollen 48 Pixel. Und für die Aktionsleiste 112 gibt uns das insgesamt 160 Pixel. Aber der leere Raum auf beiden Seiten, 32 Pixel, ist die Norm. diese Kunstboard-Größe verwenden, können Sie jederzeit den offiziellen Material Design Guide nachschlagen und die Werte verdoppeln, die hier in VB angezeigt werden. Wenn wir also einen Blick darauf werfen, werden wir sehen , dass die Aktionsleiste 56 dB mal 2.100,12 ist . Das Gleiche gilt für die Margen. Sie sagen 16, wir verdoppeln es, also sind das 32. Das ist also ein Ergebnis oder die eingegebene doppelte Zahl als der offizielle Leitfaden, wenn Sie meine empfohlenen Kriegsseiten verwendet haben . Das war's für die Statusleiste und die Aktionsleiste. Sie haben die Größen und Pixel sowie die gängigsten Layouts. Sieh dir die Spickzettel an, damit du dein Gedächtnis auffrischen kannst. Ich danke dir vielmals. 7. Alles, was du über Tabs wissen musst: Willkommen zurück. In diesem Vortrag werden wir über Dabs und andere wichtige Android-Komponenten sprechen . Ihr Hauptzweck besteht darin, Inhalte über verschiedene Bildschirme hinweg zu trennen . Jetzt gibt es nur noch eine wichtige Regel , die Sie beachten müssen. Der Inhalt jeder Registerkarte muss sich auf derselben Hierarchieebene befinden. Was heißt das? Praktisch bedeutet dies, dass Ihre Tabs Dinge zeigen sollten , die zusammen Sinn ergeben. Wenn es eine Musik-App ist, nur ein zufälliges Beispiel, könnten Sie Pop, Rock, Hip Hop und so weiter sehen , oder? Wenn es ein Geschäft ist, können Sie Geräte, Handys und Kameras sehen . Es ist also sehr intuitiv, wenn man all diese Beispiele betrachtet. Aber Folgendes sollten Sie nicht tun, was noch klarer ist. Angenommen, es ist eine App für die Lieferung von Lebensmitteln und zeigt Italienisch, Indisch und dann Einstellungen an. Das funktioniert also offensichtlich nicht, weil Einsparungen an einen ganz anderen Ort in der App gehören . Das bedeutet also dieselbe Hierarchieebene. Nun, im Allgemeinen, warum alles Ihnen wahrscheinlich die Informationsstruktur der App zeigen wird. Es besteht also kaum eine Chance , dass du das vermasselst. Lassen Sie uns nun über die Designseite sprechen. Tabs können auf viele Arten unterteilt werden , je nachdem , was Sie interessiert. Vom Standpunkt der Navigation aus können sie nun fest oder scrollbar sein. Jetzt feste Bauchmuskeln Ich habe sie geliebt. Sie sehen toll aus. Aber du bist auf vier beschränkt. Die Einträge, deren Breite in Pixeln durch die Zahl bestimmt wird. Und hier ist die Mathematik. Tabs bedeuten drei Sechstel tiefere Lasche, da die gesamte Breite 723 Laschen 240 beträgt. Und wenn du für 1AD willst, ist das alles, was du bekommen wirst. Die einfache Möglichkeit, diese Elemente in Adobe XD anzuordnen , besteht darin, das Rechteck zu erstellen , das die aktive Registerkarte anzeigt. Diese ist immer vier Pixel hoch. Geben Sie hier die Breite ein, sagen wir bis 40, und jetzt links die Linie und zentrieren Sie dann den Text oder das Symbol mit den Tabs, was bedeutet, dass Sie einzelne Textebenen sein müssen. Und bewege einfach diese Bar herum. Richtig. sich nun um scrollbare Tabs handelt, muss der Abstand von der linken Seite 104 Pixel betragen, 104 Pixel, die Paxos. Dann haben Sie aktive Rechteck-Starts. Natürlich muss das Wort selbst zentriert sein, also stellen Sie bitte sicher, dass Sie sich über diese Entfernung nicht verwirren. Lassen Sie also wieder 100 und gießen Sie dann die leeren Pixel von der linken Seite. Und dann wird es das sein. Okay, nett. Was die Mindestbreite betrifft, so sind das wieder 180. Das heißt, du bekommst zweieinhalb Tupfer auf einem Bildschirm. Dies sollte jedoch kein Problem sein wenn man bedenkt, dass Sie dem Benutzer zeigen möchten, dass es sich um viele andere Registerkarten handelt. Wenn Sie es jetzt in Aktion sehen, werden Sie jemals feststellen, dass es tatsächlich Sinn macht, da der aktive Tab durch eine nette Animation sichtbar wird. Okay, im weiteren Verlauf basiert eine andere Sichtweise auf Bell Labs auf ihrem Label. Es kann ein Textsymbol oder ein Text-Plus-Symbol sein. Aber wie Sie wahrscheinlich schon annehmen, sollten Sie sie niemals mischen und kombinieren. Wenn Sie zwei Textbeschriftungen haben, fügen Sie nicht die dritte hinzu. Das ist nur eine Ikone, die keinen Sinn ergibt. Wähle eine Richtung und bleib dran. Das ist eine sehr einfache Regel, die fast überall gilt. Jetzt haben diese Auswahlmöglichkeiten sehr spezifische Größen. Mal sehen, was ist, welche Option eins mit Textbeschriftungen. Dies ist bei weitem die beliebteste Wahl. Seine Größe, sein Hintergrund ist 96 Pixel hoch. 96. Dies hängt natürlich mit Ihrer Aktionsleiste und der Statusleiste zusammen. Der gesamte Block, fast 720 Standard-Art-Board, ist 256 Pixel hoch, und das sind 48, 112 und dann 96. Wenn Sie die Symbolroute wählen, die dieselbe Höhe für den Hintergrund 96 verwendet, müssen die Symbole selbst auf der Größe der acht mal 48 Pixel gehalten werden . Falls Ihr Symbol eine unregelmäßige Form hat, können Sie ein Rechteck verwenden, um Sie zu leiten. Jetzt bin ich kein Fan von Dabs mit Icons allein, da sie ziemlich schwer zu verstehen sind, was sich dahinter verbirgt. Ich persönlich würde mich also von dieser Option fernhalten, es sei denn die Symbole sind extrem intuitiv und sehr bekannt. Diese Gruppe ist für Dinge wie Suche, GPS, Knochen, WLAN und die wenigen anderen reserviert . Jetzt ist die dritte Option und die letzte Option Label und Icons. Also tx plus icon , wovon ich wegen der Höhe kein großer Fan bin. Dies benötigt 144 Pixel gegenüber 96 Pixeln für die einzelne Zeile. Das ist also ein ziemlich großer Unterschied. Sie essen ziemlich viel Platz auf. Jetzt sieht es zwar gut aus, aber wenn der Druckraum verloren geht, gibt es etwas zu einer Scroll-Funktion zu sagen bei der die Aktionsleiste verschwindet, wenn Sie nach unten scrollen. Wir werden uns jedoch nicht auf Bewegung konzentrieren, da es sehr schwierig ist, diese in allen Projekten in Adobe XD hinzuzufügen. Aber beachte, dass es nicht das Ende der Welt ist. Wenn Sie oben entweder etwas Platz schaffen, zeigen die meisten Apps jedoch ein Label an , genau aus diesem Grund, um es einfach zu halten. Aber am Ende des Tages liegt es wirklich an dir. Kehren Sie nun zu unserem Thema zurück, kleben Sie zwei Textebenen und versuchen Sie, sehr lange Namen zu vermeiden. Das kann vermieden werden. Diese verwenden Punkt Punkt, Punkt am Ende des Wortes, obwohl Google sagt, dass dies den Nutzer verwirren kann. Sie schlagen nun vor, dass Sie die Höhe der Komponente erhöhen. Aber in meinem Buch wird das schlimmer aussehen. Das bringt uns also in den Zustand der Dabs. Es sind zwei von ihnen aktiv mit dem vollen Pixelrechteck darunter. Nun, das hat normalerweise eine Farbe, die sich durch den maximalen Kontrast auszeichnet. Und dann haben wir inaktiv , wo die Textebene ein verwaschenes Aussehen und keine zusätzliche Dekoration hat , nichts in Bezug auf die Designseite. Nach meiner Erfahrung sind die meisten meiner Header hell gefärbt. Mein aktives Textlabel und das darunter liegende Rechteck können also reinweiß sein. Jetzt weiche ich manchmal ab und verwende Gelb, aber nur, wenn die Kombination nicht stört, wenn sie das Auge nicht stört. Bitte beachten Sie, dass die Textebene der aktiven Tabs niemals eine andere Farbe als Weiß haben sollte . Sie können also mit dem Rechteck herumspielen, die Leiste darunter, aber nicht die Textebene ist in der Regel weiß. Nun, hier ist eine andere Sache. Whiteheads sind sehr verbreitet. Es sieht vielleicht sauber aus, aber meistens verwenden wir keinen rein weißen Hintergrund. Ich möchte Ihnen diese Idee im Hinterkopf lassen. Manchmal können Regeln gebrochen werden, solange Sie die in diesem gesamten Kurs beschriebenen Gestaltungsprinzipien befolgen in diesem gesamten Kurs beschriebenen Sie können über den Tellerrand hinausgehen und etwas Schönes schaffen, etwas, das verwendbar unabhängig davon, ob Sie die Materialdesign-Richtlinien befolgt haben oder nicht. Aber jetzt ist es Zeit für die nächste Zellengröße. Diese erstellen fünf eigene Header. Mit Überschrift meine ich Statusleiste, Aktionsleiste in einem Tab-System alles kombiniert. Jetzt müssen Sie sich mit dem Einrichten von Dingen in Adobe XD und dem Experimentieren mit verschiedenen Farben und Layouts vertraut machen Dingen in Adobe XD und . Im Allgemeinen arbeiten wir nicht unter isolierten Bedingungen. Wir werden nicht nur den Header erstellen. Wir werden das Ganze erschaffen. Aber ich möchte wirklich, dass du das ausprobierst und siehst, wie es dir geht. Das sind also fünf verschiedene Header in jedem gewünschten Stil, in jedem Layout. Für die Icons kannst du black icon.com benutzen oder einfach welche aus dem Internet nehmen. Es spielt wirklich keine Rolle. Dies dient nur zu Übungszwecken. Wir werden es nirgendwo anders benutzen. Bitte posten Sie Ihre Arbeit im Kommentarbereich. Und im Idealfall sollten all diese Designs in einer einzigen Kunsttafel untereinander liegen. Viel Spaß damit und wir sehen uns in der nächsten Vorlesung. 8. Wie man mit Karten arbeitet: Willkommen zurück. Karten sind eines der wichtigsten Elemente in jedem Android, und das liegt daran, dass sie eine der besten Möglichkeiten sind, Inhalte anzuzeigen. Karten gibt es in allen Formen, Größen und Looks. Und es ist überraschend zu sehen, wie viele Sorten hier unter dieses Label fallen als einige Beispiele. Dieser zeigt ein Video im oberen Bereich und den Titel und die Beschreibung darunter. Dieser hat den Titel darüber und dann ein Foto, eine Beschreibung und die Handlungsaufforderung. Sie können Geschenke musikalisch ausstellen und wetterbedingte Elemente hinzufügen. Du kannst alle möglichen Dinge haben wie Icons, Schalter, viele Dinge, Buttons, z.B. oder gar nichts. Kurz gesagt, sie sind extrem vielseitig. Es gibt nur eine Hauptregel. Karten müssen auf eigenen 2 Fuß stehen . Das heißt, sie verlassen sich nicht auf umgebende Elemente oder die Komponenten oder einen bestimmten Kontext. Lassen Sie uns also ein paar Fälle durchgehen, damit Sie besser verstehen, warum Karten so flexibel sind. Wenn wir uns nun die Memo-App bei Knoten ansehen, können wir die Untätigkeit der Karten sehen. Deshalb habe ich gesagt, dass Sie überrascht sein werden , wie viele Sorten es gibt. In dieser Version. Wir haben keine Titel, Buttons, Medien jeglicher Art, Thumbnails, Beschreibungen, nichts, nur den Container und die Vorschau des eigentlichen Inhalts. Eine Vorschau, das war's. Das sind Karten, bei denen Sie jetzt all das in Betracht ziehen, ich habe weder eine bestimmte Größe die Vorlage, der Sie folgen sollten. Überlegen Sie, welche Inhalte enthalten sein müssen und wenden Sie die Gestaltungsprinzipien aus diesem Kurs an, insbesondere die , die wir später im Verlauf des Beispiels besprechen werden, indem Sie die rechte Seitenverhältnis, gleichbleibende Abstände, gute Typografie und die Lesbarkeit der Vorderbeine, angemessene Zeilenhöhe und -größe grundsätzlich sehr wichtig, wenn es um Text geht. Das sind also die Dinge, die es schaffen oder brechen werden. Wechseln wir jetzt zu I Herb, einem sehr beliebten Geschäft für Nahrungsergänzungsmittel, dem mehrere Karten enthalten sind. Der erste Bildschirm zuerst, hier ist eine Reihe verschiedener Marken. Also ein sehr minimaler Ansatz in Bezug auf den Inhalt. Direkt unter dieser Reihe haben wir etwas völlig anderes. Ein Foto des Produkts. Ich fühlte den Sternebewertungspreis, aber auch ein Menü, das die Optionen enthält. Das ist ziemlich viel. weiter nach unten gehen, sehen wir eine weitere Wache für den Blogbeitrag. Dies wiederum, Merkmale von Podo Idle und die Beschreibung auf der Grundlage jeder Karte steht der Behälter, der weiß rechteckig, leicht abgerundet oder quadratisch ist leicht abgerundet oder quadratisch einen sehr subtilen Schlagschatten haben kann. Sie können sie normalerweise auf einem hellen Hintergrund platzieren , wenn dies umgedreht wird, die Idee, dass die Karte ein eigenständiges Element ist , das unabhängig von allem anderen ist. Hier ist ein weiteres Beispiel, eine globale Liefer-App , die Europa im Grunde genommen im Sturm erobert. Hier sehen wir ein weiteres Beispiel für die Verwendung von Karten. Es ist zwar nichts Besonderes, aber es ist interessant zu sehen, wie viele Stile verfolgt werden können. Wenn Sie jetzt auf eine Karte tippen, kann sie in den Vollbildmodus erweitert werden. Aber es gibt Fälle, in denen es ein Dropdown-Symbol gibt, uns die Fähigkeit der Karte zeigt, noch mehr Inhalte zu enthüllen. Dieses Beispiel auf dem Material dot io wird gekauft. Was wichtig ist, ist, dass Sie keine Bildlaufleisten und Ihre App nicht scrollen müssen. Wenn die Karte also viel Inhalt als die Perle enthüllt, musst du zu nass scrollen, aber du erhältst keine sekundäre Schriftrolle nur für diese Aktion. Weiter können Karten übereinander gestapelt werden. Es gibt jedoch viele Fälle, in denen Sie sie mit einer horizontalen Bildlaufleiste in einer Reihe platzieren können . Dies ist also ein sehr beliebter Ansatz da er viele Inhalte liefert, aber unter der Kontrolle des Benutzers liegt. Dadurch ist es weniger wahrscheinlich, dass sich der Benutzer von der schieren Menge an Entzündungen überfordert fühlt . Seien Sie jetzt wieder vorsichtig, wenn Sie Dabs mit Scroll-Karten mischen. Standardmäßig weiß der Benutzer, dass er die Tabs wischen und wechseln kann. Aber wenn er eine Region berührt der die Scroll-Karte zu sehen ist, eine horizontale Schriftrolle für die des Wächters. Er wird stattdessen am Ende durch sie schlurfen. Das ist also die Art von Dingen , die die Benutzer wirklich nerven. Das ist etwas , das klein erscheint, als wäre es eine kleine Unannehmlichkeit, aber tatsächlich hassen die Leute das. Nun, zurück zu unseren Karten, ich hoffe, Sie nehmen vor allem eines aus dieser Vorlesung heraus. Eine Karte hat kein bestimmtes Aussehen oder keine bestimmte Größe. Es kann viele Elemente enthalten. Oder es kann die Form eines Rechtecks mit etwas Text darüber annehmen eines Rechtecks mit etwas . Und das war's. Was wichtig ist, ist, dass Sie die Dinge so anordnen, dass das Ziel der App, das Ziel, erfüllt wird, ohne den Benutzer mit vielen, vielen Entzündungen zu überfordern. Im Moment werden wir in einem speziellen Vortrag über diesen zweiten Teil sprechen. Aber im Moment möchte ich einige andere Karten sehen, die Sie identifiziert haben, und andere Labore. Bitte poste einen Screenshot, damit andere Kartenbeispiele sehen können. Wie gesagt, sie können jedoch in allen Formen und Größen vorliegen. Nachdem Sie das getan haben, erstellen Sie bitte mindestens zwei eigene Karten. Bitte stellen Sie sie alle in der 720-Kunsttafel her. Es kann sich um jede Art von Karte mit jeder Art von Inhalt handeln. Ich möchte wirklich, dass du mehr als alles andere übst. Werde nass und ich hoffe wirklich, andere Arbeiten im Kommentarbereich zu sehen . Danke. 9. Erstelle schöne und effektive Tasten: Willkommen zurück. Lassen Sie uns über Schaltflächen und deren Funktionsweise und eine Android-Umgebung sprechen. Wir haben zwei verschiedene Kategorien. Wir haben normale Buttons und schwebende Action-Buttons, die FAB genannt werden. Lassen Sie uns nun über dieses ausgefallene Projekt sprechen, FEB, wann immer Sie ein neues App-Projekt starten , werden Sie wahrscheinlich fragen, was der Zweck der App ist oder was der Benutzer in der App tun soll. Wenn wir über Gmail sprechen, besteht die Hauptaktion darin, eine neue Nachricht zu verfassen. Oder wenn es die Kalender-App ist, brauchen wir einen FAB, um einen neuen Eintrag zu erstellen. Wenn es Google Maps ist, muss der Nutzer seine Reise sehr schnell beginnen. Wenn es sich um eine Uhr-App handelt, muss der Benutzer den neuen Alarm erstellen und so weiter. Du kommst auf die Idee. Diese spezielle Aktion ist eine Kernfunktion der App , die der Benutzer häufig benötigt. Es muss also direkt an seinen Fingerspitzen sein. Es muss jederzeit gezeigt werden. Hier kommt also der schwebende Action-Button ins Spiel. Es überprüft alle Kästchen. Seine Haupteigenschaft ist, dass es an einer festen Position über dem Inhalt schwebt , also ist es immer da, es ist immer erreichbar. Also FAB, schwebende Action-Taste, bestimmte Apps, wenn Sie nach unten scrollen, es geht hoch, aber wenn Sie dann aufhören, wird es immer wieder angezeigt. Jetzt kann FAB zwei Formen annehmen, reguläre und erweiterte. Jetzt befindet sich der normale Floating Button immer unten rechts auf dem Bildschirm. Und ich platziere es gerne 32 Pixel vom unteren und rechten Rand. Jetzt ist die Größe der Schaltfläche ein Zwölftel mal ein Zwölftel und das Symbol darin ist 48 mal 48. Und wie gesagt, der Knopf schwebt. Deshalb hat es normalerweise einen Schlagschatten. Es ist auch hell gefärbt und das Symbol ist normalerweise reinweiß, sodass es sehr einfach zu bekommen ist. Das gebräuchlichste Symbol ist das Plus-Symbol, was normalerweise bedeutet, erstellen Sie die neue E-Mail, erstellen Sie die neue Reservierung und einen neuen Eintrag und so weiter. Jetzt gibt es nur noch einen einzigen schwebenden Aktionsknopf, nur einen einzigen FAB. Und das liegt daran, dass dies normalerweise das Wichtigste in der App ist. Also bitte habe nicht mehr als einen FAB. Nun, hier ist eine weitere Sache, von der ich abrate , mehrere Aktionen zu verwenden, die in einem FAB versteckt sind. Nun, diese Animation ist sicher reizend. Es wirkt sich aus. Aber wenn ich es benutzt habe, habe ich weniger Klicks gesehen. Und das liegt daran, dass die Leute das alles nicht gewohnt sind. Also bitte, vermeide das noch einmal. Die nächste Art von schwebender Aktionsschaltfläche ist nun die erweiterte, bei der die reguläre auf ein einzelnes Symbol beschränkt und ziemlich klein war . Der erweiterte FAB kann auch eine Textbeschriftung oder einen Text und ein Symbol haben . Und Sie können es so breit machen, wie Sie möchten, aber die empfohlene Höhe beträgt 96 Pixel. Jetzt erweitert. Die Babys eignen sich hervorragend für Aktionen, die ein Textetikett erfordern. Manchmal schneidet eine Nikon es einfach nicht, es ist nicht klar genug. Jetzt werden diese auch verwendet, um die Aufmerksamkeit des Benutzers durch die schiere Größe zu erregen. Und das liegt daran, dass sie ziemlich klobig sein können und wie die normalen auch erweiterte über dem Inhalt schweben. Es ist also ziemlich klar, dass der Benutzer darauf klicken soll. Ein gutes Beispiel ist der Checkout-Button. Sicher, Sie haben vielleicht ein Symbol für den Warenkorb und die obere rechte Seite, aber das kann verloren gehen, wenn Sie einen erweiterten schwebenden Action-Button sehen Sie werden ihn nicht verpassen. Wenn Sie also abschließen möchten, nicht nur das, sondern das ist eine viel bessere Erfahrung. Gehen wir zur nächsten Kategorie über, den normalen Schaltflächen. Jetzt gibt es diese in vielen Formen und Größen, aber sie sind an einer bestimmten Position innerhalb der App fixiert, wie Sie gleich sehen werden. Das ist also der Hauptunterschied zwischen ihnen und ihren Babys. Fab ist Float the Vout, und sie befinden sich normalerweise unten rechts. Klassische Knöpfe können absolut überall sein. Jetzt gibt es fünf Arten von unregelmäßigen Schaltflächen, aber Sie werden wahrscheinlich nur etwa drei verwenden. Es ist also gefüllt, umrissen und textlich. Dieser Screenshot zeigt Ihnen genau, was Sie wissen müssen. Grundsätzlich wählen Sie den Schaltflächentyp anhand seiner Wichtigkeit aus. in diesem Fall Was will das Unternehmen in diesem Fall vom Benutzer? Was ist die wertvollste Aktion? Es ist zusätzlicher Respekt. Deshalb ist der Fill-Button da, weil er am meisten auffällt. Es erregt deine Aufmerksamkeit. Jetzt. Sie könnten sagen: Hey, wissen Sie was, könnte das Unternehmen inzwischen mehr Geld einbringen. In der Regel legen die Leute jedoch mehrere Produkte in einen Warenkorb, bevor sie die Gicht überprüfen. Deshalb liegt der Fokus auf Add regard. Das erwarten die meisten Menschen. Es ist also ziemlich klar, dass dies die wichtigsten Maßnahmen sind. Deshalb bekommt es den Feld-Button. Und die sekundäre Reaktion wird inzwischen auf die Gliederungsschaltfläche gesetzt. Dies wird auch als Ghost-Button bezeichnet, und das liegt daran, dass er keinen Körper hat. Niemand macht lustige Sachen. Jetzt ist die dritte Art von Schaltfläche reiner Text. In diesem Fall gibt es auch eine Funktion oder ein Symbol. Stell eine Frage. Auch diese Aktion ist viel weniger wichtig als die anderen beiden. Es muss also weniger schreien, es muss nicht so sehr auffallen. So denkst du also über Buttons. Dies wird als Hierarchieprinzip bezeichnet. Und es ist wirklich nichts so kompliziertes. Du denkst über die Wichtigkeit nach und dann gehst du nach unten. Es ist also eine gefüllte Gliederung und dann Text. Nun, zurück zum Materialführer in seiner dritten Form, mag ich Donald-Buttons wirklich nicht. Ich denke, das wurde für die Randfälle verwendet. Also will ich dich wirklich nicht mit ihnen belästigen. Und der letzte, der erhöhte Knopf, wird oft von Anfängern mit einem erweiterten FAB verwechselt. Mein Rat sollte sich also nicht auf diese anderen konzentrieren, um sich auf die drei genannten zu konzentrieren, und Sie können loslegen. Wenn wir jetzt Sachen entwerfen, wirst du sehen, dass wir nicht innehalten und uns fragen, oh, ist das auf FAB, was ist das für ein erhöhter Knopf? Wissen Sie, worauf wir uns konzentrieren werden? Ist es schön anzusehen? Ist es einfach zu bedienen und so weiter. Insgesamt sind dies Buttons auf den Punkt gebracht. Der zweite Teil der Gleichung hier, Es gibt immer einen Rang, der in jedem Bildschirm berücksichtigt werden muss. Es gibt also die wahrscheinlichste Aktion, etwa in den Warenkorb, aber es kann auch andere Dinge wie mehr Informationen oder Artikel vergleichen geben, die weniger wichtig sind, aber sie sind immer noch da. Basierend auf diesem Denkprozess können Sie also entscheiden, wie groß die Wirkung Ihrer Buttons sein soll. Dies erfordert eine kleine Analyse in Bezug auf diesen Bildschirm und die aktuellen Umstände. Aber über all das werden wir jetzt in diesem Kurs sprechen . Das war's. Nehmen wir uns einen Moment Zeit und wir sehen uns in 1 s. Vielen Dank. 10. Arbeiten mit Text wie einem Profi: Willkommen zurück. In den nächsten Minuten werden wir die vielen Aspekte von Feldern in einer Android-App diskutieren . Von Anfang an muss ich sagen, dass ich nicht in die vorgeschlagenen Designs aus dem offiziellen Guide verliebt bin. Ich denke, diese Felder sehen dann etwas veraltet aus, klobig, genug. Sie haben die Stile aktualisiert, seit ich diesen Vortrag aufgenommen habe, aber die neue Version scheint meiner Meinung nach immer noch etwas enttäuschend zu sein. Nachdem wir das gesagt haben, wollen wir nun die Komponenten einer technischen Fähigkeit untersuchen. Und am Ende werden wir über das Styling sprechen. Jetzt muss jedes Feld eine Bezeichnung haben, eine Stelle, an der der Benutzer eingeben kann, und dann einen Indikator, der seinen aktiven Status angibt. Manchmal können wir den Hinweis oder ein Symbol hinzufügen , das das Feld beschreibt , das normalerweise links platziert ist. Nun, eine andere Sache könntest du auf der rechten Seite ein Icon für die verschiedenen Aktionen platzieren , wie zum Beispiel ein Mikrofon, z.B. für die Spracheingabe oder ein Dropdown im Gay dort. All dies erfordert eine Höhe von mindestens 100 Pixeln, dies hängt jedoch von Ihrem Styling ab eine Höhe von mindestens 100 Pixeln, . Das Rechteck wird als Aktivierungsindikator bezeichnet und hat zwei Zustände, inaktiv mit einer Höhe von zwei Pixeln, normalerweise dunkelgrau und aktiv. Welche Pixel hoch mit einer lebendigen hellen Farbe. Jetzt wird das Etikett im Allgemeinen an der Stelle angezeigt , an der der Benutzer tippen soll. Wenn das Feld ein Tabulatorfeld ist, wenn Sie darauf klicken, wenn es aktiv ist, wird die Beschriftung nach oben verschoben und verkleinert. Es schafft also Platz für den Benutzer, einige Dinge zu tippen. Falls es nun noch einen gibt, gibt es drei Dinge , die das Etikett aufleuchten lassen, den Hinweisbereich und das Warnsymbol auf der rechten Seite. Immer wenn keine Gesundheitsdaten angezeigt werden, wird der Fehler immer unter dem Feld angezeigt. Darüber hinaus werden die Typen niemals rot mit einer anderen Warnfarbe hervorgehoben . Gehen wir nun zum Styling über. Ihre Farben sind wichtig , weil sie Bedeutung vermitteln. Wenn Ihr Aktivierungsfeld z. B. in einem verwaschenen Grau angezeigt wird, könnte der Benutzer denken, dass dies ein deaktiviertes Feld ist. Das Gleiche gilt für das Etikett. Sie müssen also wirklich sorgfältig überlegen, wie leicht Ihre Note sein soll. Sie betrachten dies möglicherweise nicht als Problem. Aber die meisten Designgalerien sind voller Apps, die wirklich jede Menge sehr helle Grautöne haben . Und ich betone die Tatsache, dass dies die Konzepte sind , weil Rückfälle eigentlich nicht so aussehen. Auch hier scheinen Sie auf Dribbble oder Behance cool zu sein. Du könntest Likes bekommen. Diese sehr leichte Qualität bedeutet jedoch nicht, dass sie allen Standards entspricht , die wir für dieses Design haben. Sie diesen Pfad fortsetzen, sollte das Textfeld niemals wie eine Schaltfläche oder ein Banner aussehen . Die guten Leute bei Google versuchen, Dinge einzurichten indem sie diese Felder in ein Rechteck einkapseln, oder? Aber auch hier bin ich nicht verliebt. Ich kann ehrlich sagen, dass dies wahrscheinlich eine schreckliche Wahl ist , alles in Betracht gezogen. Es ist funktionell, klar, aber es ist nicht erfreulich anzusehen. Ich schlage vor, dass Sie alle Koordinaten des Internets durchsuchen und wunderschön aussehende Vorderbeine finden , die Sie inspirieren. ZB habe ich mich in meiner neuesten App für einen cremefarbenen direkten Winkel entschieden , der einen etwas dunkleren Strich, eine verwaschene Hand und das Etikett darüber aufweist. Jetzt spiele ich immer noch damit , weil die allgegenwärtige Gefahr besteht, dass es behindert aussieht. Insgesamt. Ich werde noch etwas damit spielen, aber verwenden Sie auch hier nicht den offiziellen Leitfaden, wenn Sie ihn für diesen speziellen Fall nicht lieben. Hier ist eine weitere, die sich durch die iOS-Apps hervorgetan hat, aber sie ist mir wirklich egal. Das sieht interessant aus. Es ist intuitiv. Warum also nicht benutzen, richtig? Das ist die Art von Ansatz , die ich dir wünsche. Wenn es gut aussieht, benutze es. Hier ist ein weiterer aus dem Internet. Wie Sie sehen können, ist alles auf der Folie, diese kleinsten Details. Dies erfordert ein scharfes Auge und Patienten, Sie entwerfen, Sie überprüfen auf Ihrem Telefon die Helligkeitswerte. Du machst Schluss, du arbeitest daran , bis du glücklich bist. Es gibt keinen magischen Farbcode , den ich mit dir teilen kann. Es ist eine Frage des DNS, guten Abstands und der hervorragenden Farbauswahl. Aber das, was den größten Unterschied macht , sind Kontexte. Sie sehen, dass die Beispiele von Google seelenlos sind , weil sie keine Identität haben. Sie sind nicht Teil eines größeren Ganzen, einer größeren App. So auch keine Seele. Es gibt keine Leidenschaft. Du siehst nichts, was damit verbunden ist. Was wir in Designgalerien sehen, sind Ausschnitte für potenzielle Apps , die eine große Persönlichkeit haben. Wenn du es kaputt machst. Es ist nur eine Zeile mit ein paar Textebenen, die daran angehängt sind. Was es besonders macht, ist die Liebe des Designers zum Detail und sein Respekt für die allgemeine Atmosphäre der App, dann diese Persönlichkeit, die gesamte Atmosphäre, wie auch immer man es nennen möchte. Was wir also tun werden, ist , in diesem Kurs ein paar Foren zu entwerfen, in denen ich diesen Punkt eingehend ansprechen werde. Die wichtigste Erkenntnis dieses Vortrags ist jedoch, sich von absolut überall im Internet inspirieren zu lassen. Da Formulare der Konvertierungspunkt sind und nicht ohne Texte existieren, hängen Erträge, Registrierung, Checkout und andere wichtige Punkte innerhalb einer App stark von Textfeldern ab. Ich freue mich sehr, nehmen Sie sich Zeit für sie und machen Sie sie zu einem integralen Bestandteil Ihrer App. Also lasst uns üben. Bitte nehmen Sie sich einen Moment Zeit und erstellen Sie drei verschiedene Bildschirme mit einer anderen Art von Textfelddesign. Auch hier gibt es keinen Kontext. Du musst es schaffen. Ich möchte mindestens drei Felder pro Bildschirm sehen. Wichtig ist, dass Sie verschiedene Größen, Arrangements, Layouts und Farben ausprobieren . Wenn Sie jemals meine Kurse gesehen haben, wissen Sie, dass ich ein Fan bestimmter Farbcodes bin. Aber für diese Übung gebe ich dir nichts. Probiere alles selbst aus. Wenn Sie fertig sind, posten Sie Ihre Arbeit im Kommentarbereich und ich werde sie überprüfen. Vielen Dank und ich freue mich darauf. 11. Einführung in das Projekt: Hallo und willkommen. Im kommenden Abschnitt werden wir eine App für die Lieferung von Lebensmitteln entwerfen das Projekt zum Schweigen bringen wird. Ziel ist es, sich mit allen Komponenten einer App vertraut zu machen, Adobe XD effektiv zu nutzen und etwas zu schaffen , das großartig aussieht. Bitte schauen Sie sich jedes Video zweimal an. Einmal, um zu verstehen, was vor sich geht, dann ein zweites Mal, um mitzuarbeiten, indem so oft pausierst, wie du musst. Okay, während wir jeden Bildschirm durchgehen, gebe ich Ihnen meinen Denkprozess und wie ich schnell Designentscheidungen treffe. Diese sind sich bewusst, dass die von mir angewandten Prinzipien einer eingehenden Analyse bedürfen. Aber ich beschloss, etwas später über die Prinzipien zu sprechen . Im Moment möchte ich , dass Sie so viel wie möglich arbeiten und den größten Teil der Theorie für später belassen. Sie fragen sich vielleicht, ob es viele Dinge gibt , die ich lernen muss. Warum stürzen wir uns in ein vollwertiges App-Design-Projekt? Und das liegt daran, dass ich möchte, dass Sie Erfahrung darin sammeln, in Adobe XD zu arbeiten und zu entwerfen. Deshalb ist es eine Sache, über Dinge zu lesen, wenn man direkt reinspringt . Es ist eine andere Sache, tatsächlich zu üben. Im weiteren Verlauf möchte ich auch, dass Sie Standardlayouts entwerfen , denn genau darauf werden Sie in Ihren täglichen Projekten stoßen. Wenn Sie sich jetzt die Hände von Dribble ansehen, werden Sie extrem kreative Layouts und Animationen sowie alle möglichen Effekte sehen . Die meisten Kunden geben jedoch kein Vermögen für die App-Entwicklung aus. Was wir erstellen werden, basiert also auf meiner Erfahrung Arbeit mit echten Kunden und echten Programmierern rund um die Uhr. Das bedeutet, Best Practices anzuwenden und ziemlich standardisierte Layouts zu verwenden. Sie müssen sich bewusst sein, dass jede Designentscheidung Entwicklungskosten erhöhen oder senken kann. Während also etwas auf Dribble fantastisch aussieht, besteht eine gute Chance , dass Entwickler extra hart arbeiten müssen , um dies zu erreichen. Offensichtlich hat nicht jeder Hunderttausende von Dollar, die er für ausgefallene Animationen ausgeben kann. Wieder war ich schon oft auf diesem Weg. Ich war auch am Kundensitz, wo ich zusätzliche Zahlungen genehmigen musste, da die endgültige Version mehr Arbeit erfordert, als wir ursprünglich erwartet hatten. Ich war also als Designer und als Kunde auf beiden Seiten. Ich werde all dieses Wissen in den Kurs einbringen und dir beibringen, wie du deine Schlachten sorgfältig auswählst. Bleiben Sie vorerst neugierig und geben Sie Ihr Bestes, um das gesamte Kapitel zu beenden. Bevor wir loslegen, muss ich Sie um Verständnis für bestimmte Teile bitten , die beschleunigt oder übersprungen werden. Jedes anständige App-Design-Projekt wird ein paar Wochen brauchen , wenn ich versuche, es auf das Wesentliche zu reduzieren. So erhalten Sie zeitnah eine großartige Lernerfahrung . Das heißt, ich muss bestimmte Dinge bearbeiten. Dinge wie das Finden von Symbolen, das Googeln anderer zeitaufwändiger Dinge. Würde das aus dem Weg gehen? Lass uns Spaß mit unserem ersten seriösen Projekt haben. Lass uns das machen. 12. Verstehen des Briefes und die Wünsche des Kunden: Willkommen zurück. Dies ist unser erstes seriöses App-Projekt. Dies wird eine App für die Lieferung von Lebensmitteln sein. Und wir werden diese Gelegenheit nutzen, um viele verschiedene Bildschirme und Szenarien durchzugehen . Dieses Projekt hat einen Brief, der ungefähr acht von zehn entspricht. Nicht erstaunlich, aber es sind sicherlich nicht ein paar Skizzen auf einer Serviette. Es ist zweifach, wie es sein sollte. Zum einen haben wir das Wireframe, das uns die wichtigsten Bildschirme zeigt und welche Inhalte aufgenommen werden müssen. Auf der anderen Seite haben wir ein Dokument, das beschreibt, was in der App vor sich geht , nur für den Fall es aus dem Wireframe nicht klar ist. Idealerweise sollten Sie immer beides haben , wenn Sie ein neues Projekt starten. Es ist nicht deine Aufgabe, sie dir auszudenken. Aber wenn der Kunde das möchte, sollten Sie Ihr Angebot erheblich erhöhen im Grunde mehr, ich würde sagen, mindestens weitere 1.000 USD in Rechnung stellen. Okay. Anhang zum Kurs finden Sie den Link für das Drahtmodell, das Logo und die Dokumentation. Jetzt heißt dieses Geschäft Live Short for Delivery und es ist im Grunde eine App, die Lebensmittel liefert. Und in einigen Städten müssen wir alle Restaurants auflisten, die Essen zum Mitnehmen anbieten, aber nur diejenigen, die über ein eigenes Lieferpersonal verfügen. Okay, gut zu wissen. Jetzt kümmert sich das Unternehmen links nicht um die tatsächliche Lieferung. Nun, dieser Bereich des Briefings ist sehr verbreitet. Es ist die Essenz des Projekts und ein guter Ausgangspunkt , um eine allgemeine Vorstellung davon zu bekommen , was Sie entwerfen werden. Die nächste Phase ist entscheidend, die Zielgruppe. Und das wird das Erscheinungsbild der App bestimmen . Und es ist schön, wenigstens eine Entzündung zu haben. Diese App ist jetzt für Personen gedacht, die mit verfügbarem Einkommen aktiv sind . Beide Geschlechter, wahrscheinlich ledig, nicht verheiratet, Bürojob, unwahrscheinlich, oberes Management. Wir müssen Punkte zahlen, die Qualität des Essens und die Lieferzeit. Dies sind nützliche Punkte, da diese uns helfen können, das Aussehen der App zu bestimmen. Wie wir LEP stylen sollten. Kontext ist alles. Jetzt hätte ich gerne noch ein paar Details, aber wie gesagt, das ist ein Acht-Out-of-Band. Eine weitere Sache, die Sie in diesen Briefs finden sollten , ist der Wert der App. Jetzt haben wir die wichtigsten Schmerzpunkte, also wissen wir, was behoben werden muss, aber wie macht die App das? Wie macht die App Menschen glücklich? Hier hat die App ein paar Stärken. Es sind die Aussichten, die großartige Lieferzeit und die echten Fotos der Produkte. Okay, ziemlich gut, vernünftig. In den kommenden Absätzen erhalten Sie wichtige Details, die den gesamten Ablauf der App prägen werden. Nun, ich werde diesen Teil überspringen, aber bitte lesen Sie nach diesem Vortrag alles selbst , was ich sehe. Ich denke, der Benutzer kann den Registrierungsprozess überspringen und dasselbe für die Adresse, er kann es einfach überspringen. In der Regel ist die Registrierung jetzt der allererste Schritt. Aber hier hat der Kunde, auch bekannt als der Geschäftsinhaber, auch bekannt als der Geschäftsinhaber, die kluge Wahl getroffen. Er möchte nicht, dass der Benutzer beim Ausfüllen von Formularen hängen bleibt, ohne den Wert der App zu erkennen. Deshalb geben wir dem Benutzer die Möglichkeit, mit der App zu interagieren tatsächlich Gutes zu nutzen. Und dass er überzeugt ist, dass er sich während des Checkout-Prozesses anmelden kann . Das ist ein gutes Zeichen. Dies zeigt Ihnen, dass der Eigentümer oder der Projektmanager oder der Geschäftsinhaber, wer auch immer die Show leitet, über Dinge nachgedacht hat, die zu tun sind. Wir müssen dieses Zeug analysieren, weil es uns unsere Position im Projekt verrät. Sollen wir unsere eigenen Ideen teilen? Erlauben wir uns, lautstark zu sein und bestimmte Entscheidungen herauszufordern? Nun, es hängt davon ab, wie gut das Projekt durchdacht ist und natürlich von Ihrer Rolle, Ihrem Job in diesem Fall, das ist ein gutes Zeichen. Die Dinge sind unter Kontrolle und wir müssen den Auftrag nicht überdenken. Manchmal haben Kunden keine Ahnung. Dies ist keiner dieser Fälle. weiter, falls der Benutzer angemeldet ist und der Standort nicht ausgefüllt ist, um nur die Stadt mit den meisten Restaurants anzuzeigen . Aber er kann ein Drop-down-Menü verwenden , um das schnell zu ändern. Hört sich wieder gut an, ziemlich vernünftig. Falls der Benutzer registriert ist, zeigt das Drop-down-Menü offensichtlich seine Stadt an. Jetzt basiert das Bewertungssystem auf Prozentsätzen, 1-100% anstelle der Fünf-Sterne-Bewertung, was für uns ein guter Ort ist, um etwas Persönlichkeit zu verleihen. Wir sehen, dass unsere vier Kategorien von Ratings. Also müssen wir etwas entwerfen , das ein bisschen kreativ und interessant ist. Jetzt machen wir noch einmal eine Pause. Dies ist ein weiteres gutes Zeichen dafür , dass die Dinge von den Gehirnen der Operation sehr detailliert analysiert wurden . Bewertungssysteme verwenden den Standard-Fünf-Sterne-Ansatz, aber einige der größten Unternehmen der Welt haben auf ein ähnliches Abneigungssystem umgestellt. Dazu gehören YouTube, Netflix und in einigen Teilen der Welt Facebook. Jetzt ist die Auflistung der grundlegende Bildschirm innerhalb der App. Wir brauchen also ein klares Verständnis dafür, was aufgenommen werden muss und was an einem anderen Ort angezeigt werden kann. Jetzt, hier sehen wir, brauchen wir das Foto, einen Titel, Bewertung, die Art der Küche, die Lieferzeit der Lebensmittel. Ohne diese Entzündung können wir weitermachen. Die Sache ist, wir könnten z.B. eine Mindestbestellmenge einschließen , oder? Oder die Versandkosten. Wir könnten die Entfernung vom Restaurant zum Benutzer in Meilen oder Kilometern angeben. All dies würde die Struktur des Designs komplett verändern. Also noch einmal, ich freue mich sehr , dass wir all diese Informationen haben und wissen, was aufgenommen werden muss und was optional ist. Wir haben hier und da noch ein paar andere Kleinigkeiten, aber gehen wir zu den Wireframes über. Wir müssen uns bewusst sein , dass die Anzahl der hier gezeigten Bildschirme nicht korrekt ist. Das Wireframe zeigt normalerweise die wichtigsten Bildschirme an und wir müssen die Lücken mithilfe der Dokumentation ausfüllen , z. B. Popups, Zwischenbildschirme und so weiter. Offensichtlich sind diese in den meisten Situationen nicht enthalten. Du wirst sie nicht finden, wenn du sie hast. Gute Neuigkeiten, aber in diesem Fall glaube ich nicht, dass wir sie haben. Jetzt zurück dazu. Die Dinge sind ziemlich gut angelegt. Ich denke also, wir werden eine gute Zeit damit haben. Vereinfachte Namen. Diese sind nummeriert, was großartig ist. Wir könnten also über den Standortbildschirm sprechen, aber es könnte schneller sein, ihn einfach Bildschirm eins zu nennen. Wenn Sie etwas kommentieren möchten, geben Sie bitte die Nummer an. Das ist der beste Ansatz. Jetzt zurück dazu. Ich sehe, dass wir sowohl das linke als auch das rechte Menü einbeziehen müssen , was Google nicht empfiehlt. Aber ich denke, das ist wegen der Filter erforderlich , die dem Benutzer helfen, ein bestimmtes Restaurant zu finden. Schließlich müssen wir mit den verschiedenen Abläufen der App vorsichtig sein . Wir haben mehrere Möglichkeiten. A, wenn der Benutzer registriert ist, ist das wichtig. Sei es, wenn er kein Konto hat und den Standort überspringt, also haben wir keine Adresse und sehen, wann er nicht registriert ist, aber er gibt eine Adresse an. Das wird uns in den ersten Entwurfsphasen nicht allzu sehr beeinflussen , aber in der Prototyping-Phase müssen wir all diese Szenarien klären. Wir müssen die App und die Richtlinie erstellen. Es wird also ziemlich schwierig, aber wir werden an diesem Punkt in der Prototyping-Phase sehen , alles in allem können wir den Designprozess beginnen , indem wir uns die Konkurrenz in dieser Nische ansehen um nach Inspiration zu suchen. Wir müssen sehen, was andere Leute tun. Also lasst uns im nächsten Clip weitermachen. 13. Analysieren Sie die Wettbewerber der App – Teil 1: Willkommen zurück. An dieser Stelle sollte der Auftrag kein Rätsel sein. Wenn Sie noch nicht auf die Breite gegangen sind, unterbrechen Sie bitte das Video und analysieren es, sodass der nächste Schritt darin besteht, die Konkurrenz der App zu überprüfen , um zu sehen, was in diesem speziellen Sektor vor sich geht . Hier haben wir eine ziemlich gut etablierte Nische, die Lieferung von Lebensmitteln, die mehr als genug Apps sind , die wir analysieren können. Zum anderen sollten Sie die Anforderungen des Projekts besser verstehen und sich vom Gesamtstil inspirieren lassen . Bitte beachten Sie, dass diese Apps standortbezogen sind. Was ich Ihnen zeigen werde, ist in Ihrem Land möglicherweise nicht verfügbar, aber Sie haben mehrere Screenshots von jeder App, die dem Kurs beigefügt ist. Das Line-Up umfasst zwar die Leber Food Panda, The Live, eine App , die genau den gleichen Namen hat, aber rein zufällig ist. Zum Mitnehmen und dann auf Menü klicken. Jetzt werden alle Labs ständig aktualisiert, sodass die Live-Versionen unterschiedlich sein können. Eigentlich bin ich mir ziemlich sicher, dass das anders ist. Dennoch werden die Screenshots der Bezugspunkt sein. Okay, fangen wir mit dem Live an, damit wir es aus dem Weg räumen können. Jetzt ist der Startbildschirm ein großes Durcheinander. Wir haben Bankgelb, Marineblau und seltsamerweise ist der Hauptknopf auch gelb. Der Hintergrund scheint ein Bild der Stadt zu sein, aber er wird durch dieses feste Rechteck blockiert, was keinen Sinn ergibt. Wenn Sie suchen, obwohl Sie meine Sprache Rumänisch nicht verstehen, stellen Sie möglicherweise fest, dass dieser Text von ziemlich geringer Qualität, sehr verpixelt und etwas verzerrt ist . Und das liegt daran, dass diese eigentlich keine Textebenen haben, von Codons offiziell Strings genannt werden. Stattdessen ist dies ein Bild , das gestreckt wird. Das ist eine schlechte Praxis und sieht überhaupt nicht gut aus. Okay, jetzt lasst uns zur Listing-Seite wechseln. Hier sehen wir sofort die kleine Liebe zum Detail. Es gibt keinen leeren Raum auf beiden Seiten. Wenn wir also einige Linien herausziehen, können Sie sehen, dass die Ausrichtung aus dem Gleichgewicht geraten ist. Die Topographie ist bescheiden, die Schriften sind langweilig. In dieser Region gibt es keine Vielfalt . Es gibt keine bestimmte Hierarchie, die leicht zu erkennen ist. Insgesamt vier von zehn. Und ich bin großzügig. Wenn wir ins Restaurant gehen, können wir sehen, dass die Registerkarten diese vertikalen Trennwände haben, die ich in Android-Apps nicht oft gesehen habe. Darüber hinaus gibt es nirgends eine Höhe. Sie können jeden Schlagschatten erkennen. Nun, das ist nicht gerade eine schlechte Sache, aber das ist in der Designabteilung zu kurz gekommen. Schlimmer noch, die Wischgeste die oft verwendet wird, um schnell die Pinselabdrücke zu wechseln. Nun, es funktioniert nicht wirklich. Das ist ein ziemlicher Schock. Stattdessen müssen Sie manuell auf diese Elemente tippen, oder wir könnten diese Pfeile verwenden, die aus Windows XP-Zeiten stammen. Ich habe ehrlich gesagt keine Ahnung, was diese Leute gedacht haben. Dies ist ein Paradebeispiel für eine App, die von Entwicklern und Geschäftsleuten erstellt wurde Entwicklern und Geschäftsleuten , die Designer mit involvierten Designern kennen Ich verspreche Ihnen, dass Sie oben rechts erraten müssen, was dieses Symbol bewirkt. Sind es zusätzliche Informationen über das Restaurant, vielleicht eine Share-Funktion, Zu Favoriten hinzufügen? Und die Antwort ist, ich weiß es nicht. Wenn ich darauf tippe, passiert nichts. Es hat keinen Downstate, also bin ich mir nicht sicher, ob es tatsächlich funktioniert. Aber wenn wir weitermachen, ist die Kasse auch lächerlich. Alles wird zufällig zusammengeworfen. Ich denke, sie wollten diese Textebenen zentrieren, aber alles ist aus. Versuchen Sie es auch, Sie werden nicht viele imaginäre Linien finden. Nichts ist ausgerichtet. Oh, und das liefert die Ikone, nimmt den Kuchen. Ich habe es mir anders überlegt. Es sind zwei von zehn, weitere vier. Okay. Gehen wir weiter zu takeaway.com, einem Unternehmen, das links und rechts Liefer-Apps kauft und uns nichts blockiert. Wie im Fall Lives, wo man nichts sehen konnte, es sei denn, man gab wo man nichts sehen konnte eine Adresse mit einem S für den Standort, für die GPS-Erlaubnis ein. Die App will also grundsätzlich unseren Standort und sofort wird eine Liste der Restaurants angezeigt. Jetzt habe ich persönlich viele Lebensmittel bestellt, daher nutze ich diese Apps ziemlich stark. Takeaway gehört nicht dazu. Ich mag es nicht und lass mich dir sagen warum. Alles ist verwirrend. Nichts ist dort, wo ich das erwarten würde. Klar. Die Restaurantliste ist reizend. Schöne, saubere Logos auf der linken Seite. Lösche die fett gedruckten Titel auf der rechten Seite. Interessante Icons darunter. Aber dort hält der Happy Train. Können Sie mir sagen, welches dieser beiden Restaurants eine höhere Bewertung hat? Denn wenn Sie booking.com jemals genutzt haben, denke ich, dass es einen großen Qualitätsunterschied gibt. Zwischen einem 8,0 Hotel und einem 8,9 Hotel. Oder wie wäre es mit IMDB? Wenn Sie Filme mögen, 6,1 Film im Vergleich zu 6,91, Tag und Nacht. Was ich versuche zu sagen ist, dass 4,5 Sterne für zwei Restaurants mir nichts sagen. Ich benötige mehr Informationen, um eine Entscheidung treffen zu können. Denken Sie daran, dass ich über 50 Restaurants in meiner Gegend habe. Dieses Sternensystem ist also ohne weitere Informationen ohne weitere Informationen nicht gut genug. Aber gehen wir zurück zum Design für den Moment. Ich habe die Orange geliebt. Es scheint wirklich durch und es muss ein schönes Zink hinzugefügt werden. Es ist frisch. Es ist wieder einmal die Ikonen von ergreifend, nett und lieblich. Und wir haben einen interessanten Schalter , der die Funktionsweise der App verändert, entweder im Liberty-Modus oder im Pickup. Das ist gut ausgeführt. Die verwendeten Schriften sind nicht von dieser Welt. Und das Gleiche gilt für ihre Icons, anständig, aber nicht großartig. Im Restaurant ist alles gut verteilt. Aber seltsamerweise entschieden sie sich für diesen seltsamen Deal-Farbton für die Call-to-Action-Farbe. Das ist ziemlich merkwürdig. Jetzt gibt es ein Tab-System , mit dem Sie wie von jedem mobilen Benutzer erwartet zwischen Kategorien wechseln können. Einige Gerichte haben Beschreibungen, andere jedoch nicht. Bezüglich der Fotos des Gerichts. Dieselbe Geschichte. Jetzt ist die Kasse wirklich glanzlos. Viele Trennwände, viel Grau, wenig Liebe zum Detail in Bezug auf Typografie. Aber dann lassen Sie uns die Designseite pausieren. Das wäre ein 6/7 von zehn in meinem Buch, das Problem ist, wie ich am Anfang sagte , die Funktionalität. Schauen Sie sich einfach das Kartensystem an. Es ist irgendwo oben rechts, aber nicht in der Aktionsleiste. Nein, es ist eigentlich ein FAB von schwebenden Action-Buttons, also schwebt es einfach herum. Das ist ziemlich ungewöhnlich. Das Deb-System hat Schriftarten , die viel zu groß sind, und das macht es mir schwer zu wissen was im Restaurant verfügbar ist. Das linke Menü befindet sich tatsächlich auf der rechten Seite. Es ist auch völlig benutzerdefiniert. Ich sage nicht, dass das eine schlechte Sache ist, aber es ist eine andere Sache, an die ich mich gewöhnen muss. Diese vier Symbole über der Restaurantliste. Wieder ziemlich merkwürdig. Dies ist eine App, die noch nicht einmal die offiziellen Richtlinien des Materialdesigns berücksichtigt hat. Sie kümmerten sich überhaupt nicht darum. Und es fühlt sich insgesamt so an, die App in meinen Händen klobig ist. Es ist schwer in Worte zu fassen, aber es fühlt sich einfach nicht richtig an. Insgesamt ist dies ein viel besseres AB-Design als das Live-Design des vorherigen. Aber ich glaube nicht, dass ich es mit mehr als fünf von zehn bewerten würde , vielleicht sechs, wenn ich super großzügig bin. Fahren wir nun mit dem Hilfemenü fort, das einen völlig anderen Ansatz verfolgt. Erstens mochte ich den Onboarding-Prozess, also die ersten ersten Bildschirme , die Sie über die App informieren. Nettes, sauberes Design. Und sobald Sie die App aufrufen, zeigt sie mir eine Liste der Restaurants basierend auf der Adresse , die ich eingegeben zeigt sie mir eine Liste der Restaurants habe. Jetzt ist die Auflistung sehr augenschonend. Es gibt jedoch ein Problem mit der Funktionalität. Sie haben keine Möglichkeit, diese Restaurants zu sortieren. Sie müssen jeden einzelnen eingeben und sehen, was was ist. Und das ist die Stimmung in der gesamten App. Man muss viel tippen, um die Ziellinie zu erreichen. Kurz gesagt, viele Klicks, bei denen einige Apps möchten, dass Sie zur Checkout-Phase gelangen , und vier Tabs oder weniger. Hier lässt sich diese Zahl leicht verdoppeln. Man muss viel Arbeit investieren . Wenn Sie auf einen Eintrag tippen, erhalten Sie diesen. Wieder ein schönes Design. Dies ist eine Acht und mein Buch aus gestalterischer Sicht. Hier ist die Speisekarte des Restaurants. Wir haben einen zweispaltigen Ansatz, aber ich bin mir nicht sicher, ob dies die beste Wahl ist. Sollen wir mehr Artikel sehen? Aber das Glück ist wegen dieser Größe gar nicht so groß. Es fühlt sich zu klein an. Es scheint unnatürlich. Es fühlt sich an als ob etwas nicht stimmt. Und die Schriften sind dort noch nicht fertig. Es scheint alles zusammengeworfen zu sein. Jetzt, wo Gerichte Fotos haben, ist es ein bisschen Erfahrung, aber insgesamt ist dies eine gemischte Tasche. Der schwebende Aktionsknopf ist ebenfalls verwirrend. Ich bin mir nicht sicher, was mit diesem Button los ist. Nach einigen Nachforschungen glaube ich, dass ich dadurch eine Gruppe bilden kann, was auch immer das ist. Im Grunde geht es darum deinen Freunden zu bestellen. Aber warum sollte man es so vorne und mittig platzieren? Jedenfalls ist der Hintergrund etwas zu stark, das Grau etwas zu dunkel für meinen Geschmack. Es fällt zu sehr auf. Das Dapp-System sieht gut genug aus und die Icons aus der ActionBar sind auch interessant. In einigen Teilen ist es schwierig, es ist eine Sieben, vielleicht sogar eine Hilfe. Sind es in anderen Anleihen die anderen vier Fuß? Jetzt geben wir eine 6,5 und gehen weiter zur Leber. Aber das machen wir im nächsten Clip. Danke. 14. Analysieren Sie die Wettbewerber der App – Teil 2: Willkommen zurück. Wir sind jetzt bei der Leber. Lassen Sie uns das analysieren und sehen ob dies eine Quelle der Inspiration ist. Der erste Eindruck ist großartig. Die Topographie ist genau richtig, sie hat Charakter, sie verleiht dem Design einen Mehrwert. Es ist leicht zu lesen. Das nächste, was mir auffällt, ist das horizontale Kartensystem, mit dem die Restaurants präsentiert werden. Der Schatten ist ziemlich stark, wenn man bedenkt, dass der Hintergrund rein weiß zu sein scheint, aber ich mag es. Oben. Wir haben irgendeine Art von Anzeige, aber beachten Sie, wie schön sie über dieser diagonalen Linie steht . Ich weiß auch zu schätzen, wie sie dieses kleine Symbol im Aktionsleistenbereich verwendet haben . Sicher, es ist Platzverschwendung, aber es zeigt, dass es ihnen wichtig ist. Es geht um Branding und darum sicherzustellen , dass Sie wissen, dass Sie in ihrer App sind. Dann bist du aber die Leber. die Auflistung selbst betrifft, finde ich es toll, wie die Lieferzeit auf dem Foto dargestellt ist. Ich schätze die Hierarchie in der Liste. Ich denke, das ist sehr gut ausgeführt. Wir haben den Titel fett gedruckt, verschiedene Tags in einer kleineren verwaschenen Farbe. Die Lieferzeit ist reserviert und hat aufgrund ihrer Bedeutung ziemlich viele Immobilien erhalten. Und schließlich haben wir das Bewertungssystem und die Prozentsätze. Aber was ich wirklich liebe, ist dieser Farbtupfer für das Emoji. Eine andere Möglichkeit, das Hierarchieprinzip innerhalb der Auflistung zu übersetzen , ist diese. Wissen Sie, wo das Glück liegt, können Sie leicht verschiedene Bereiche scannen und wissen, was wichtig ist und was nicht. Das ist das Hierarchieprinzip. Der Inhalt ist leicht unterscheiden und dies sorgt für ein großartiges Erlebnis. Es fühlt sich mühelos an. Wenn wir jetzt wieder live gehen, können wir sehen, dass im Grunde alles gebündelt ist . Das fühlt sich überfüllt und im Grunde langweilig an, langweilig ohne Geschmack, obwohl es fast die gleiche Anzahl an Elementen enthält. Zurück zur Leber scheint diese App jedoch nicht den Richtlinien für das Materialdesign zu folgen. Oben gibt es kein Tab-System, und Aktionsleiste ist auch nicht unregelmäßig . Stattdessen kommen wir zu Dropdowns, die sehr ungewöhnlich sind. Im letzten Update. Sie haben sie losgeworden und ich bin froh, dass sie diese Änderung vorgenommen haben. Die Größe der Karten ist ziemlich großzügig. Nun, das verbessert die Wirkung der App. Sie können nur ungefähr zu Restaurants auf einem Bildschirm passen. Und der zweite ist ein bisschen abgeschnitten. Für die kleine Stadt macht das Sinn, oder? Aber für die größeren mit vielen Restaurants wird es ziemlich schwierig. Im Grunde wird es dir nach den sechs oder sieben Auflistungen einfach langweilig. Jetzt machen die Fotos einen großen Eindruck und es ist definitiv die am besten aussehende Lücke. Aber ich würde gerne sehen, wie dieser Raum ein bisschen genutzt wird. Werde sehen, was möglich ist , wenn wir anfangen zu entwerfen. Wir sehen auch eine untere Leiste, die die Suchfunktion enthält. Nun, okay, ziemlich gut. Interessant ist das Farbschema, Weiß und Thiel, sonst nichts. Der Inhalt bleibt im Glanz, wahrscheinlich weil die Bilder ziemlich detailreich sind. Das ist ziemlich klug. Und wahrscheinlich machen wir dasselbe in unserem eigenen Design. gilt umso mehr, wenn man bedenkt , dass die meisten Restaurants keine großartigen Fotos vom Essen haben. In den meisten Fällen sind die Fotos dunkel, die Teller sind besetzt und die Farben sind normalerweise nicht schmeichelhaft. Auch hier können Sie das live dafür sehen. Der Unterschied ist Tag und Nacht. Zurück zum Startbildschirm haben wir einen erweiterten schwebenden Action-Button , der Ihnen hilft, dort zu füllen. Das ist gut ausgeführt, aber sobald Sie darauf tippen, werden Sie ein weiteres Zeichen sehen, das diese App auf neun von zehn, wenn nicht mehr hervorragenden Symbolen bringt , die im Einklang mit der Bauchmuskel-Atmosphäre stehen. Wir bekommen wunderschöne Icons, die im Einklang mit den Apps von Vibe stehen. Schöne Bilder darunter mit großem Kontrast für Text. Löschen Sie die Call-to-Action-Taste. Auf der negativen Seite gibt es wenig zu sagen . in die Liste gehen, sehen wir oben das Foto des Restaurants und alle Menüpunkte befinden sich in der scrollbaren Liste. Kein nennenswertes Tab-System. Die verwendeten Schriftarten sind augenschonend, dann kann man leicht erkennen, was was ist. Ich mag es nicht. Die Tatsache, dass es keine Miniaturansichten für das Geschirr gibt, zumal auf der linken Seite genug Platz ist. Auf der anderen Seite macht es es ziemlich luftig. Es fühlt sich an, als hätte es genug Leseraum. Okay, jetzt lass uns etwas in unseren Warenkorb legen und sehen, wie das geht. Okay, wir haben unten einen klebrigen Balken , der uns den aktuellen Korb zeigt, und er ist oben durch einen Schatten getrennt. Es ist merkwürdig, dass der Button auch einen Schatten hat. Ich bin mir nicht sicher, ob ich dem zustimme. Wie auch immer, der Checkout ist eine weitere Stärke. Alles ist leicht zu verfolgen und sie haben diese Karten intelligent eingesetzt, ein bisschen schwerhändig mit diesem Schlag, aber immer noch gute Arbeit. Insgesamt sieht die App wunderschön aus und das liegt daran, dass ihre Elemente gut verteilt sind. Ihre Schriften sind nett und interessant und der Inhalt bleibt glänzen. Eine starke Neun von zehn. Gehen wir weiter zu Food Panda, um eine weitere Ausbuchtung zum gleichen Thema zu sehen. Hier erkenne ich sofort den gleichen einfarbigen Stil, verwendet wird, um die Aufmerksamkeit des Benutzers auf sich zu ziehen. Wenn du darauf tippen kannst, ist es rosa Schrägstrichrot. Ich mag diesen Stil, weil er den Benutzer leitet, ohne ihn zum Nachdenken zu bringen. Der erste Eindruck ist, dass dies die am besten gestaltete App von allen ist, 9,5 von zehn. Der Hauptunterschied zwischen ihm und dem Level ist die Atmosphäre. Das ist ein bisschen freundlicher, obwohl es etwas professioneller ist, konzentrieren wir uns auf die Auflistung. Unter dem Foto ist noch mehr los. Das sieht also etwas geschäftiger als die Leber für die verwendeten Schriftarten, okay, aber ihnen fehlte spezielle Knoten , der sie auszeichnet. Gehen wir schnell zurück zur Leber und überprüfen Sie die Lieferzeit. Beachten Sie, wie sich diese Zahlen auszeichnen, insbesondere die. Im Idealfall ist das die Art von Persönlichkeit, nach der ich in meinen Schriften suche. Food Panda hat auch einen schwebenden Action-Button, Ihnen wahrscheinlich beim Auschecken hilft. Es ist klar genug. Die ActionBar ist ein Grundnahrungsmittel dafür, wie es gemacht werden sollte. Es ist klar definiert, es hat eine angemessene Hierarchie, gut verteilt. Wenn es eine Sache gibt, die ich hinzufügen würde , wäre die Tatsache, dass ich mir nicht gewünscht hätte , dass das Suchsymbol links auf das Hamburger-Menü ausgerichtet wäre . Das hätte es perfekt gemacht. Insgesamt ist dies jedoch eines der besten, die ich bisher gesehen habe. Gehen wir weiter zur Seite mit der Liste der Restaurants. Hier bekommen wir Tabs , die unter dem Hauptfoto des Restaurants platziert wurden. Das sieht gut aus. Es ist funktionell, aber ich liebe das Sternensystem nicht , wie es hier gezeigt wird. Ich glaube, es geht verloren. Was die tatsächlichen Artikel betrifft, so ist dieses Spezifikationsverhältnis etwas seltsam. Die Fotos sind viel zu hoch und das wird für die meisten Restaurants ein Problem sein. Wenn die anderen Antennen Miniaturansichten. Es ist eine andere Sache, obwohl man argumentieren könnte , dass dies zwei grundlegende Ebenen ist . Wir müssen eine gute Lösung in unserem Design finden , wenn es darauf ankommt, keine dieser Optionen funktioniert für mich. Liefern Sie, dass einfach die Idee aufgegeben wurde , ein Foto des Gerichts zu zeigen. Aber in anderen Wireframe sehen wir es als Voraussetzung an. Insgesamt. Dies ist jedoch gebunden oder vielleicht etwas hinter der Leber. Nennen wir es die Neun, vielleicht eine 8,5. Die Sache ist, ich könnte problemlos weitermachen, aber ich möchte, dass Sie einige dieser Apps selbst erkunden oder ähnliche finden. Ziel ist es zu verstehen, wie sie versucht haben, verschiedene Probleme zu lösen. Ich möchte, dass du mir sagst was du an ihnen magst und was nicht. Zusammenfassend lässt sich sagen, dass die Schlussfolgerungen dieser Vorlesung die folgenden sind. Wir sollten eine einzige schöne Farbe in unserer App verwenden und den Inhalt erstrahlen lassen. Wir müssen vorsichtig mit dem Seitenverhältnis der Fotos in der Restaurantliste sein. Wir brauchen eine gut aussehende Schrift, die dem Design etwas hinzufügt , etwas mit Persönlichkeit. Schließlich sollten wir unser Bestes tun, um mindestens zwei komplette Restaurants in den ersten Auflistungsbildschirm aufzunehmen mindestens zwei komplette Restaurants . Als Tipp: Je mehr Apps Sie sehen, desto mehr Entzündungen werden Sie bekommen. Dieser Vorgang sollte mindestens 2 Stunden dauern , aber aus Zeitgründen musste ich ihn kurz machen. Bitte. Sie keine Angst davor, in Ihren Kommentaren rücksichtslos zu sein. Ihr Ziel ist es, jede Komponente auseinanderzunehmen und zu prüfen ob Sie sie vermeiden sollten. Oder im Gegenteil, nutzen Sie es vielleicht als Inspiration. Machen Sie viele Screenshots und legen Sie sie nebeneinander, damit Sie problemlos hin und her gehen können. Okay, lass uns weitermachen. 15. Legen Sie das Layout für die ersten beiden Bildschirme: Willkommen zurück. Hast du die Konkurrenz selbst erkundet? Hoffentlich haben Sie mehrere Labore auf Ihrem eigenen Handy durchlaufen mehrere Labore auf Ihrem eigenen Handy oder sich zumindest die Screenshots angesehen , die ich der vorherigen Vorlesung beigefügt habe. Jetzt ist es an der Zeit, Adobe XD zu starten. Benutzerdefinierte Größe ist in Ordnung. Die Einstellungen, die ich verwenden werde, basieren auf Materialdesign 2.3. Um die Dinge einfach zu halten, wählen Sie 720 für die Breite und 15, 24 für die Höhe. Also, wie erhalte ich diese Zahlen? Ich verdopple dann die Werte des alten Samsung Galaxy S. Also, warum verdopple ich es? Es wird also besser aussehen, wenn wir das Design überprüft haben. So können wir alles schön und knackig sehen , ohne eine Brille zu bekommen. Das ist der einzige Grund, warum wir es verdoppeln, damit es gut aussieht. Das spielt für den Code dort keine Rolle. Es ist ihm egal. Der Codierungsprozess wird in keiner Weise beeinträchtigt. Okay, lass uns ein vertikales Scrollen aktivieren. Und das Darstellungsfenster bedeutet einfach den Grenzwert, den Punkt, an dem Sie nach unten scrollen müssen , um mehr Inhalt zu sehen. Anfangs erhalten Sie 15, 20 Pixel, und alles, was sich darunter befindet, erfordert den Bildlauf. Okay, großartig. Als nächstes muss ich zwei Monitore anzeigen, und ich werde mir ständig das Drahtmodell und die Dokumentation auf dem anderen ansehen . werde ich nicht jedes Mal erwähnen. Wenn Sie kein zweites Display haben, ziehen Sie bitte das Drahtmodell in das Programm und verkleinern Sie es etwas. Okay, was ist jetzt das Ziel? Nun, wir wollen unser Layout als Grundlage für das Projekt ohne Designüberlegungen festlegen Grundlage für das Projekt . Also keine Farben, keine Schriften, nichts nur grundlegendes Zeug. Wir wollen Rechtecke und Textebenen in ihrer reinsten Form. Nachdem wir eine Fundamentbasis haben. Danach haben wir ein paar Bildschirme. Dann werden wir anfangen, mit verschiedenen Farben, Schriftarten und so weiter zu experimentieren . Okay, jetzt fangen wir mit der ersten Art Board an, ob wir das Apps-Logo benötigen, das ist dem Kurs beigefügt. Jetzt ist das Symbol selbst in keiner Weise formatiert enthält auch keinen Text. Dies wird uns helfen, es mit dem Rest des Designs in Einklang zu halten . Das ist ideal. Okay, ich werde es zentrieren und an keiner bestimmten Position oben auf dem Bildschirm platzieren . Etwas über ihre. Als Nächstes füge ich das Standortfeld zu einem Rechteck hinzu. Dieser sollte etwa 600 Pixel breit und etwa 80 Pixel hoch sein. Ich benutze dafür gerne das Eigenschaften-Panel. Merken Sie sich w für die Breite, h für die Höhe. Dies sind keine genauen Werte , da dies später in der Styling-Phase erfolgt. Es sind nur Baseballzahlen. Bitte beachten Sie etwas. Ich werde immer alles auf der Kunsttafel zentrieren , diese Werkzeuge. Jetzt möchte ich nicht wie eine kaputte Platte klingen, also werde ich es nicht absolut erwähnen. Jedes Mal. Außerdem werde ich Ihnen nicht sagen, wann ich umbenenne oder wann eine Gruppe Ebenen, die dies erhalten, ein absolutes Muss ist. Du musst organisiert sein. Machen Sie das Rechteck sehr hellgrau. Und das liegt daran, dass wir einige Texte hinzufügen und einen großartigen Kontrast wünschen. Schreiben wir so etwas wie ein Interview oder einen Ort, so etwas. Jetzt werden wir zu diesem Zeitpunkt kein Symbol hinzufügen, aber wir können GPS schreiben, um uns daran zu erinnern, dass wir hier eines benötigen. Wir können diese Ebenen auch duplizieren und einen Submit-Button erstellen. Sie können eine Kopie erstellen, wie Sie möchten. Ich halte gerne die Alt-Taste gedrückt, mache die Wahltaste auf dem Mac und ziehe dann eine Kopie wie folgt heraus. Wenn du das nicht gerne machst, kannst du auch control the gay, nice verwenden. Lass uns den Text ändern. Verkleinern Sie die Schaltfläche auf etwa 250 Pixel. Und zentrieren Sie natürlich den gesamten Text in der Schaltfläche. Und dann das gesamte Element mit dem Bildschirm, mit unserem Board. Bitte denken Sie daran, an Ihrer zweiten Besichtigung mitzuarbeiten , indem Sie so oft wie nötig pausieren. Jetzt müssen wir noch zwei Dinge hinzufügen. Überspringen Sie diesen Schritt und erstellen Sie ein Konto-Slash-Login. Die erste kann eine Textebene sein , da sie nicht wichtig genug ist. Wir wollen nicht wirklich, dass die Leute es benutzen. Der andere sollte ein Knopf sein. Fügen wir es also irgendwo in der Nähe des Bodens hinzu. Nehmen wir an, erstellen Sie jetzt einen Konto-Slash-Login. Okay, nett. Denken Sie daran, Escape zu drücken, wenn Sie die Bearbeitung beenden möchten. Okay, lassen Sie uns die Größe auf etwa 500 Pixel ändern, also verdoppeln Sie die Größe der Senden-Schaltfläche. Auch dies sind keine endgültigen Werte, aber es ist ein guter Ausgangspunkt. Aus dem Brief. Ich verstehe, dass die Kontoerstellung tatsächlich auf einem anderen Bildschirm erfolgt. Also eigentlich ist es das hier auch schon. Dies bedeutet jedoch, dass wir dadurch viel Freiheit bei der Gestaltung haben. Was wir über Konsistenz im Klaren sein müssen. Das ist eine gute Gelegenheit , darüber zu sprechen. ZB können wir die Buttons und die Textfelder erstellen. Sagen wir: Weit über 100 Pixel hoch, sagen wir mal ein Drittel am Tag, richtig? Und wir können diese Entscheidung ganz einfach erklären. Es ist um der Benutzerfreundlichkeit willen, oder? Je größer die Belastung, geringer sind die Chancen für die Minsker Beine oder die versehentlichen Tabs. Es ergibt Sinn, oder? Habe große Knöpfe. Schau dir dieses Grün hier an. In diesem haben wir vier Texte, Renditen plus eine Schaltfläche. Die Größe, von der wir zuvor eins-dreißig gesagt haben, verursacht also ein großes Abstandsproblem. Und natürlich ist es nicht in Ordnung, unterschiedliche Größen auf verschiedenen Bildschirmen zu verwenden. Denn auch hier müssen wir unsere Designentscheidungen auf der Grundlage der gesamten App als Ganzes treffen, nicht als einzelne Elemente. Das ist der Grund, warum wir Bildschirme stapelweise erstellen. Und mit dem Nachdenken über die Größe für das gesamte Design, für die gesamte App. Ein Drittel D würde also nicht funktionieren. 16. Entwerfen Sie den wichtigsten Bildschirm in der App: Willkommen zurück. Gehen wir zum nächsten über, indem eine Kopie erstellen und alles entfernen. wir jetzt wieder zu den Grundlagen zurück. Dies ist eine gute Gelegenheit, sich an unsere Proportionen zu erinnern. Die Statusleiste muss 720 mal 48 sein. Wir lassen ein leeres Rechteck beliebiger zufälliger Farbe und positionieren es richtig. Was ich gerne mache, ist, dass ich es gerne oben ausrichte. Dann benutze links unser Tor ausrichten. Ziehen wir eine Kopie für die Aktionsleiste heraus. Und das muss auf 112 Pixel verkleinert werden. 112 Pixel. Hier zahlt sich das Eigenschaftenfenster aus und ändert die Farbe in etwas ganz anderes. Vielleicht ein sehr helles Grau. Nur für den Fall, dass dir beide Begriffe nicht gefallen. Übrigens können Sie mehrere Rechtecke gleichzeitig auswählen und sie einfach so deaktivieren. Jetzt fügen wir einige Textebenen hinzu. Wir brauchen Stadtfilter und Suche. Die erste ist für die linke Seite, während die anderen beiden für die rechte Seite. Ich schlage vor, dass Sie beim Erstellen von Kopien die Umschalttaste verwenden , da Sie dadurch Ihre Textebenen in derselben Zeile halten können . Grundsätzlich Alt und Shift beim Ziehen. Fantastisch. Okay, jetzt kann das Dropdown-Dreieck mit dem Polygon-Werkzeug erstellt werden. Stellen Sie sicher, dass Sie beim Ziehen die Umschalttaste gedrückt halten, damit Sie ein perfektes Dreieck erhalten. Überprüfen Sie die rechte Seite und stellen Sie dann die Anzahl der Koordinaten auf TV ein. Das sind die Standardwerte. Also bin ich bereit, hierher zu gehen. Setze den Punkt nach unten. Möglicherweise müssen Sie drehen, um die Farbe in absolut alles zu ändern , was Sie wollen, wahrscheinlich schwarz. Eine Sache zu beachten ist, dass manche Leute es vorziehen , das Stiftwerkzeug für so etwas zu verwenden. Andere Leute laden gerne Icons herunter. Das Schlüsselwort ist momentan Geschwindigkeit. Also mach was du willst, mach es einfach schnell. Jetzt wird es interessant. Denken Sie daran, dass wir so viele Restaurants wie möglich ausstellen möchten , ohne alle Elemente zu quetschen und zu überladen. Beginnen wir also mit einem Rechteck, das 600 mal 400 Pixel groß sein wird, da dies den größten Teil der Bildschirmbreite abdeckt. Außerdem haben wir zunächst ein anständiges Seitenverhältnis. Die tatsächliche Größe wird später bekannt gegeben, aber das ist ein guter Ausgangspunkt. Also etwas breit und ziemlich kurz. Wechseln Sie zum Verschieben-Werkzeug und platzieren Sie es direkt unter der Aktionsleiste. Obwohl wir uns schnell bewegen, werde ich das Zentrum stehlen. Alles ist gut. Üben. Nun Gate, fügen wir etwas Dummy-Text hinzu. Der Titel, los geht's mit Desserthaven, direkt daneben. Schreiben wir so etwas wie Lieferzeit 30 min. Ich bin, die Kategorie ist zweifach. Eine für die Lebensmittelart und eine andere für den Kosinus-Typ. Jetzt okay. Was auch immer das ist, der Brief, der mir das sagt, das sollte Wüste und internationales Leben sein. Nochmals vielen Dank, es spielt wirklich keine Rolle, was wir eingegeben haben. Wir wollen nur ein paar Informationen veröffentlichen. Wir haben also etwas zu sehen, etwas, womit wir arbeiten können. Die Bewertung. Gehen wir mit 92 Prozent von 24 Stimmen. Dies deckt alle Elemente gemäß Drahtmodell und Brief ab. Okay, jetzt wählen wir absolut alles so aus und schauen, ob wir zwei davon unterbringen können. Denken Sie daran, das ist eine wichtige Anforderung. Ja, das funktioniert. Wir können jedoch zwei ganze Restaurants unterbringen. Auch dies ist nur ein grober Entwurf. Daran nichts, da ist genau. Also müssen wir es mit einem Körnchen Salz nehmen. Aber fassen wir es zusammen. Bisher haben wir die beiden Bildschirme aus dem Drahtmodell neu erstellt , um etwas zum Arbeiten zu haben. In den nächsten Vorträgen haben wir darüber gesprochen, uns der Auswirkungen unserer Entscheidungen bewusst zu sein. Insbesondere, wie sich das Erstellen eines Textfeldes oder der Schaltfläche für Kleinkinder auf die gesamte App auswirkt und Probleme verursachen kann. Wir haben es stark gestoppt. Ich sehe dich in einer Sekunde nach der Pause. Danke. 17. Erstelle den Bildschirm für die restaurant: Willkommen zurück. Gehen wir zum Detailbildschirm des Restaurants über, auf dem alle Gerichte aufgelistet sind. Also lasst uns kurzerhand an die Arbeit gehen. Lassen Sie uns sie kopieren, aber tun Sie es, und beginnen wir mit einem Ansatz von oben nach unten, indem die Stadt durch einen zufälligen Restaurantnamen ersetzen. Nennen wir es reifen ihre Pizzalieferung. Das klingt italienisch genug, oder? Das Dropdown und der Filter müssen entfernt werden. Aber wir behalten den letzten bei und benennen ihn um. Hier sollte Info stehen. Und dies wird ein Symbol sein, das uns die Adresse des Restaurants, Bildschirm 15 und dann den Bildschirm 16 der Ansichten anzeigt. Wenn wir uns das Drahtmodell ansehen, können wir einige Tabs sehen, aber es ist unklar, ob diese fest oder scrollbar sind . Wir beginnen mit der festen Version. Ich denke, das ist wahrscheinlicher. Kopieren Sie zuerst die Aktionsleiste und verringern Sie ihre Größe auf 96 Pixel. Ändern Sie natürlich die Farbe damit Sie sehen können, was los ist. Zurück zur Größe für den Moment. 96 ist vom Standpunkt der Benutzerfreundlichkeit aus groß genug, Sie können es tatsächlich verwenden, aber klein genug, damit es nicht zu viel Platz beansprucht. Dies ist auch der empfohlene Wert im offiziellen Google-Leitfaden. Entfernen Sie die beiden Auflistungsgruppen falls Sie dies noch nicht getan haben. Im Text werde ich Frühstück, Mittag- und Abendessen als Hauptbestandteile verwenden . Dies bedeutet, dass ein Drei-Label-Design, also ein bis zu 40 breites Rechteck für den Akt des Artikels benötigt wird. Nehmen wir also das Rechteckwerkzeug, klicken und ziehen Sie eine beliebige Form heraus ändern Sie dann ihre Größe auf 40 mal vier Pixel. Dies kann vorerst leer gelassen werden, aber bitte entfernen Sie den Strich. Das ist eine Sache, die ich an Adobe XD absolut nicht mag. Die Füllung ist immer weiß und es gibt eine Tafel, die standardmäßig angewendet wird. Das ist nicht ideal. Stellen Sie auf jeden Fall sicher, dass Sie es korrekt am unteren Rand des Tab-Hintergrunds platzieren . Dies ist ein optionaler Schritt, aber jeder Erlebnisdesigner wird das Frühstück mit dieser Linie zentrieren , um sicherzustellen, dass dies eindeutig die aktive Registerkarte ist. Offensichtlich zentriert die Texte auch vertikal. Und dann mach dasselbe für das Mittagessen. Stellen Sie einfach sicher, dass Sie dieses Prinzip verstehen. Sie wählen zwei Ebenen aus, den Text und das Rechteck, und verwenden dann die Ausrichtungswerkzeuge. Aber was ist mit dem Abendessen? Vertikal gesehen ist das kein Problem. Ziehen Sie ein Feld heraus, um beide auszuwählen und verwenden Sie den richtigen Befehl. Okay, nett, aber was ist horizontal? Nun, hier ist der Track. Wählen Sie die schwarze Linie aus und schreiben Sie die Linie an. Wenn nur eine Ebene ausgewählt ist, betrachten die Ausrichtungswelten den Bildschirm, die Kunsttafel, als zweites Element. Eine Linie rechts bringt also dazu, dass die Linie die rechte Seite berührt. Halten Sie nun die Umschalttaste gedrückt und klicken Sie auf Abendessen, um das auszuwählen. Zentriere es horizontal, und das war's. Nun, es gibt tatsächlich noch einen Schritt. Wir müssen eine schwarze Linie auf die linke Seite setzen und die Auswahl aufheben, indem wir auf eine beliebige Stelle klicken. Dann wähle das aus, dann lass einfach die Linie an. Fantastisch. Jetzt rate ich, dass Sie vergrößert arbeiten damit Sie leicht die richtigen Ebenen erfassen können. Und einfach so ist das Tab-System, dann schauen wir uns das Drahtmodell noch einmal an . Denken Sie daran, dass dies nicht das A und O für unser Design ist. Wir können mit verschiedenen Looks experimentieren , wenn wir irgendwelche Ideen haben. Aber im Moment denke ich, werden wir es einfach halten und dem Drahtmodell folgen, was ein Ein-Karten-Layout bedeutet. Wenn wir mit einem Ein-Karten-Layout nicht zufrieden sind, können wir jedoch einen anderen Ansatz ausprobieren. Ich mochte das zweisäulige Design , das wir im vorherigen Video gesehen haben, ernsthaft nicht. Wir müssen für jedes Gericht einen Bildhalter erstellen , ein Miniaturbild. Ich denke, das muss eine etwas quadratische Form haben, wahrscheinlich ein bisschen breiter. Beginnen wir also mit einem Rechteck mit einer Größe von beispielsweise zwei bis fünf mal eins AD. Wie gesagt, nicht genau quadratisch, aber nicht zu groß, weil wir gesehen haben, dass das nicht so gut funktioniert. Platziere es 30 Pixel von den Tupfern entfernt. Denken Sie daran, die Alt-Taste gedrückt zu halten, das ist die Wahltaste auf dem Mac. Verwenden Sie dann Ihre Pfeiltasten mit oder ohne Shift würde Shift tun, es hilft Ihnen beim Verschieben der Ebene und zehn Pixelinkremente. Das sieht gut aus. Okay, jetzt gehen wir zurück zum Titel und zur Beschreibung. Ich habe etwas vorbereitet in einem ODE schlecht, dem Titel unserer GU, alles vorerst. Jetzt, hier ist die Sache. Ich hätte es gebrauchen können, Lorem Ipsum, aber ich denke, ein richtiger Titel hilft sehr. Die Beschreibung sollte eine Absatztextebene nur für den Fall, dass Sie Ihren Inhalt schnell ändern möchten. Das bedeutet also, dass Sie klicken und ziehen müssen. Jetzt sollte das Auffinden der Zeilen ausreichen, obwohl wir es möglicherweise nur für den Fall fallen lassen, dass wir nicht genügend Produkte auf dem Bildschirm anzeigen können , ohne zu scrollen. Das ist. Okay. Übrigens, falls Sie einen schnellen Dummy-Text wünschen , empfehle ich lipson.com. Dies ist eine großartige Website für gefälschten Text, alles in allem gefälschte Inhalte. Nehmen Sie sich Zeit damit und stellen Sie sicher, dass Sie diese wichtigen Dinge nicht überstürzen. Dies ist die Grundlage unseres Designs. Wenn Sie also eine feste Vorstellung haben und dabei bleiben, könnten Sie sich selbst in die Ecke drängen. Seien Sie also wieder flexibel, z. B. die Größe der Thumbnails. Ich habe keine Ahnung, ob das gut genug ist. Das war ein Punkt , an dem die Konkurrenz versagte oder im Gegenteil, sie glänzten. Um zu unserem Angebot zurückzukehren, müssen wir den Preis hinzufügen, sagen wir 14 Dollar. Das wird die dritte Zeile sein. Und als nächstes nass, legen wir das Gewicht des Produkts ein, was meines Wissens sehr wichtig ist. Das ist übrigens alles aus dem Brief, schreiben wir 350 g. Zum Schluss brauchen wir einen Text zum Hinzufügen in den Warenkorb. Obwohl ich mir ziemlich sicher bin, dass dies eine Ikone sein wird. Aber lassen Sie uns vorerst, anstatt mir einen Moment Zeit zu geben, um das alles zu klären, ich richte gerne alles aus, obwohl sie sich bewegen werden , wenn wir anfangen mit der Größe und die Schrift. Aber auch dies ist etwas, das ich unbedingt tun möchte, weil ich mich dadurch einfach besser fühle. Im Idealfall möchten wir einen imaginären Pfad für den Benutzer, um die Miniaturansicht, den Titel, den Preis, das Produktgewicht und dann die Schaltfläche In den Warenkorb zu sehen den Titel, den Preis, . Alles muss fließen. Später müssen wir die Größe und Farbe anpassen, um dies im Grunde zu unterstützen. Nun, obwohl die Dinge ziemlich gebündelt sind, lassen Sie uns das mit einer Trennwand abschließen. Verwenden Sie die Linie zu allen Tastenkombinationen L und stellen Sie sie auf vielleicht zwei Pixel ein, damit es einfacher ist, ein Pixel auszuwählen. Warteschlangen sind unglaublich schwer zu finden. Warum verwenden wir jetzt eine Trennwand? Denn auf engstem Raum hilft uns dies, unsere Inhalte zu trennen. Ohne sie müssten wir viel mehr leeren Raum nutzen. Und das wollen wir vermeiden. Es sollte übrigens etwa 30 Pixel vom Foto entfernt sein , nur damit wir diese schöne Symmetrie haben. Um das abzuschließen, gruppieren Sie alles zusammen, weil wir einige Kopien anfertigen möchten. Füllen wir den gesamten Bildschirm mit Klonen. Und schauen wir mal, wo wir sind. Was ich liebe, ist diese hervorragende Option namens Repeat Grid, die die Dinge wirklich beschleunigen kann, aber wir werden sie nicht verwenden. Ich möchte, dass du auf altmodische Weise an Geschwindigkeit gewinnst. Ich möchte, dass du etwas Handarbeit verrichtest. Nachdem der letzte platziert wurde, wählen wir alle aus und verwenden diesen Befehl. Verteilen Sie jetzt, dass alle sauber ausgerichtet sind und dies eine skizzierte Form ist. Lass uns einen Moment innehalten. Danke. 18. Wie man großartige Design-Optionen trifft: Willkommen zurück. Ich möchte eine Pause einlegen, damit wir einen wichtigen Punkt besprechen können. Wie sollen wir in diesem speziellen Projekt wichtige Designentscheidungen treffen? Entscheiden wir uns für das Vollbild-Hintergrundbild in der ersten Kunsttafel? Oder halten wir es einfach? Und wenn wir es einfach halten, wir dann einfach weiß oder verwenden wir ein subtiles Muster , das mit Lebensmitteln zusammenhängt? Wenn wir einen weißen Hintergrund verwenden, wie wird sich das auf den nächsten Bildschirm auswirken? Verwenden wir Weiß für die Aktionsleiste? Das bedeutet, dass wir auch Weiß für die Statusleiste verwenden müssen . Wie Sie sehen können, wenn sich die Entscheidung auf den Rest auswirkt. Und das liegt daran, dass eine App zusammenhängend sein muss alles zusammenarbeiten muss. Dann bleibt die Frage, wie sollen wir entscheiden? Das Farbschema ist ebenfalls nicht definiert. Das ist also ein weiterer Faktor. Verwenden wir Grün, um Frische zu implizieren? Blau, weil es beruhigend und sicher ist. Rot oder Orange, weil es Bolden heiß ist. Es gibt viele Fragen wie diese, und ich glaube, das ist der Grund, warum viele Designer Stunden damit verbracht haben , Fortschritte zu machen. Hier ist meine Antwort. Du machst sie alle. Ja. hast du gehört, oder? Du erstellst all deine Ideen. Du stellst sie nebeneinander. Und so werden Sie nicht nur besser, sondern wählen auch einen Stil für die gesamte App. Dies wird als iterativer Prozess bezeichnet, bei dem Sie eine Idee haben, die Sie vielleicht bekommen, dann ziehen Sie einen neuen Bildschirm heraus und probieren eine andere Idee, eine andere Idee und eine andere aus. Lassen Sie mich Ihnen ein Beispiel zeigen. Ich musste einen Terminplanbildschirm erstellen, auf dem wir einige Termine hatten , sowie einen neuen , der jetzt zur Genehmigung angezeigt werden musste. Okay. Die neue hatte zwei einstellbare Nichtverfügbarkeitszeiträume , die jeweils etwa 15 Minuten betrugen. Okay. Nun, das ist ziemlich viel zu erledigen. Der Zeitplan reichte von 06:00 Uhr bis 12:00 Uhr, das wären also ziemlich viele Stunden. Natürlich wollte ich so viele wie möglich in einen einzigen Bildschirm einbauen , um das Scrollen zu minimieren. Das war mein Ziel. Aber ich musste auch genug Platz haben, um den Bildschirm für normale Leute nutzbar zu machen , nicht nur für Elite-Scharfschützen oder -spitzen. Wir mussten große Knöpfe haben. Das war also eine Herausforderung. Also was habe ich getan? Ich habe genauso angefangen, wie ich es dir in der vorherigen Vorlesung gezeigt habe. Ich habe alle Elemente hinzugefügt , die einfachste Form. Und dann fing ich an zu arbeiten, ich fing an zu experimentieren. Ich ging rein, indem ich mit verschiedenen Abständen zwischen den einzelnen Linien gespielt habe. Ich habe mir ständig jede Version auf meinem Handy angesehen und ich habe mit jeder Version stetige Fortschritte gemacht. nächste König, das Fleisch des Designs, die eigentliche Verabredung sprudelt. Und ich möchte dir hier zeigen, wie das Wort geht. Ich habe versucht, die Zeit innerhalb des Rechtecks anzuzeigen sowie einen Text, der beschreibt, war da. Dann habe ich beigebracht, dass Rot ein bisschen zu viel ist, also habe ich versucht, es ein bisschen aufzuräumen. Also habe ich eine einzige rote Linie gelassen und dann das subtile Muster hinzugefügt , das diesen Bereich markiert. Das war geringfügig besser, aber nicht viel. Dann habe ich eine andere Version erstellt, eine weitere Variante, bei der es keine überlappenden Bereiche gibt, nur um ein besseres Gefühl dafür zu bekommen , wie dieses Design unter verschiedenen Umständen angewendet wird. Ich habe dann das Problem entdeckt. Das Grün, das ich für einen neuen Termin verwendet habe , ist dasselbe Grün wie die Call-to-Action-Taste. Also habe ich beschlossen, es zu ändern. Das wurde lila. Ich habe dann einen Bearbeiten-Button hinzugefügt, um sicherzustellen , dass dieser eindeutig editierbar ist. Okay, aber dann sagte ich: Cool, lass uns andere Styles ausprobieren. Das habe ich mir gedacht. Also habe ich das Rechteck komplett abgerundet und dann die einzelne rote Linie beibehalten. Ich habe es dann quadriert und von Kante zu Kante laufen lassen. Ich lasse auch die rote Linie fallen und sie haben sie durch dieses Symbol ersetzt. Die Farben stießen ein wenig aufeinander, also habe ich noch eine Kopie angefertigt und diese in lila geändert. Ich habe es auch dazu gebracht, das Rechteck zu berühren, ein sehr kleines Detail, aber alles lag auf dem Tisch. Okay. Isoliert. Das sieht ziemlich gut aus. Aber was ist, wenn es neben einem anderen Termin steht? Das war das Nächste, woran ich denken musste. Also habe ich einen neuen Bildschirm für diesen speziellen Zweck erstellt. Es ging immer weiter und Sie können verschiedene andere Fälle, Farben, Schemata, Symbole und so weiter sehen . Jetzt ist der Bauch knapp. Am Ende entschied ich mich für dieses Design. Ein großer Sprung von dem, wo ich angefangen habe. Das meine ich mit iterativer Prozessiteration. Iterativ. Sie bekommen eine Idee, erstellen sie so schnell wie möglich und fahren dann mit dem nächsten Konzept fort. Sie erstellen diese neue Version neben der ursprünglichen und vergleichen sie. Du zahlst mehrere Ideen aus, bis du leer bist. Sie versuchen, jede Version zu verbessern, aber Sie können auch Elemente aus verschiedenen Ideen mischen und kombinieren. Im Grunde wiederhole es, bis du glücklich bist. Manchmal dauert es vielleicht eine halbe Stunde für den Bildschirm. Manchmal kann es Tage dauern. Sie müssen ständig Pausen einlegen , in denen Sie Ihre Designs überhaupt nicht betrachten. Dann kommst du zurück und überprüfst es noch einmal. Jede Variante bringt Sie näher an die beste Version heran, die Sie zeichnen können. Egal, ob Sie diese Iterationen Variationen, Versionen oder was auch immer nennen diese Iterationen Variationen, Versionen , die Idee bleibt, Sie müssen die Ideen aus Ihrem Kopf nehmen und sie auf den Canvas-Bereich stellen. Das ist meine Denkweise in jedem Projekt. 19. Erstelle verschiedene Versionen für den ersten Bildschirm: Willkommen zurück. Es ist an der Zeit, wieder ohne App für die Lieferung von Lebensmitteln an die Arbeit zu gehen wieder ohne App für die Lieferung von Lebensmitteln . Jetzt haben wir ein paar Bildschirme, die Aufmerksamkeit warten. Fangen wir mit dem Standort-Bildschirm an. Und die erste Idee, die ich ausprobieren möchte ist das Vollbild-Hintergrundbild, das in dieser Nische sehr beliebt ist. Um tolle, völlig kostenlose Fotos zu finden. Verwenden Sie unsplash.com. Wenn das Projekt ein angemessenes Budget hat, können Sie auch Adobe-Aktien verwenden, aber fangen wir kostenlos an. Hier. Sie werden wahrscheinlich nach dem Essen suchen und wir werden alles herunterladen, was Funken sind, und vertrauen jedoch nicht mehr als zehn Bildern. Im Idealfall sieht ein Bild von oben wahrscheinlich am besten aus. Aber lassen Sie uns diesbezüglich offen sein. Sobald ich etwas Interessantes sehe, klicke ich auf die Schaltfläche Herunterladen. Jetzt ist der Vorgang ziemlich einfach. Wählen Sie mehrere Fotos aus und ziehen Sie sie dann in Adobe XD. Ich habe bereits einige ausgewählt, aber ich verspreche, dass ich sie genau so ausgewählt habe, wie ich es dir gesagt habe. Ich habe sie mit 1-6 umetikettiert, damit Sie sie leicht verfolgen können. Hier ist die Sache. Bevor wir sie hinzufügen, wir ein Rechteck hinzu, das der Größe der Kunsttafel entspricht. Auf diese Weise wird die Größe des Fotos automatisch geändert. Das ist sehr hilfreich. Ziehen Sie also ein Rechteck und konzentrieren Sie sich auf das Eigenschaftsfenster. Hier. Wir werden seine Größe um 15, 20 auf 720 ändern. Okay, die Hauptsache ist, die Füllung in etwas Dunkles zu ändern und den Rand zu deaktivieren. Nun k. Schließlich sollte das Rechteck nicht über allen anderen Ebenen liegen. Gehen Sie also zum Ebenenbedienfeld, klicken Sie darauf und ziehen Sie es einfach so nach unten. Okay, großartig. Jetzt sind wir bereit, unsere Fotos einzuziehen. Hier beginnt die Magie zu geschehen. Jetzt suchen wir nach einem interessanten Bild, das einen guten Kontrast für das Logo und alle anderen Aktionen bietet das Logo und alle anderen Aktionen , die auf diesem Bildschirm verfügbar sind. Nummer eins zeigt mehrere Teller Spaghetti und ein paar Gläser Wein. Es steht also im Einklang mit der App. Es ergibt Sinn. Die erste Frage ist nun, wäre das Logo weiß oder einfarbig? Wenn wir uns für die erste Option entscheiden, müssen wir das Bild etwas dunkler machen. Wenn wir es zur Volltonfarbe machen, muss der Hintergrund so einfach wie möglich sein. Mal sehen, was was ist. Fügen wir zunächst ein weiteres Rechteck hinzu, das rein schwarz ist und genau die gleiche Größe hat. Okay, jetzt, was die Opazität betrifft, sollten uns 50 Prozent auch einen großartigen Kontrast bieten. Ziemlich gut, ziemlich gut. Denken Sie jetzt daran, dass das Ziel darin besteht, Dinge zu testen. Es ist keine endgültige Entscheidung. Okay, jetzt lass uns das Logo weiß machen. Das ist übrigens kein PNG, sondern ein SVG. Kurz gesagt bedeutet dies, dass wir die Größe ändern können , ohne an Qualität zu verlieren. Außerdem können wir die Farbe ändern, indem wir die Füllung verwenden. Fantastisch. Wenn das ein PNG wäre, können wir all das rückgängig machen. Aber das sieht ganz nett aus. Und eine Sache bei Logos ist, dass sie dir nicht ins Gesicht schlagen müssen, wie eine Tüte Brex. Mach es nicht riesig. Denken Sie nur daran, was der Liberale getan hat. Obwohl sie auf dem ersten Angebotsbildschirm angezeigt werden, verwenden sie die Mini-Version des Logos. Okay, zurück zu diesem Design, ein dunkler Hintergrund macht Sinn, zumal das Textfeld wahrscheinlich weiß sein wird. Lassen Sie uns das schaffen. Wir werden den Koordinatenradius der Rechtecke auf fünf Pixel erhöhen . Quadratische Ecken. Sieh gar nicht so toll aus. Was die Buttons angeht, machen wir dasselbe. Aber lass uns die Farbe ändern. Lassen Sie uns sie hellgrün machen, nur um zu sehen, wie ein regulärer Call to Action aussehen würde. Nehmen Sie sich Zeit und versuchen Sie, einige Ecken zu schneiden, indem Farben auswählen oder das Eigenschaftenfenster auf mehreren Ebenen gleichzeitig verwenden . Okay, gutes Zeug. Bitte machen Sie alle diese Textebenen weiß. Und vergiss nicht, diesen Schritt zu überspringen. Es ist da, aber du siehst es vielleicht nicht so gut. Nein, ich ändere seine Farbe, seine Position oder vielleicht beides. Ich denke, am unteren Bildschirmrand wird es ein bisschen besser aussehen, oder? Wir können diesen Look nicht sofort beurteilen , weil wir ihn mit etwas anderem vergleichen müssen. Ganz zu schweigen davon, dass dies die allgemeinen Striche sind. Wir arbeiten noch nicht auf einem guten Niveau. Derzeit suchen wir nach der allgemeinen Richtung. Und sobald wir mit diesen beiden Bildschirmen experimentiert haben, können wir zurückkommen und das verfeinern und Perfektion erreichen. Versuchen wir es vorerst mit einem anderen Ansatz. Lassen Sie uns das duplizieren und eine Alternative ausprobieren , bei der das Logo vielleicht eine beliebige Volltonfarbe hat, vielleicht ein Dunkelblau, also eine ziemlich sichere Wahl. Jetzt muss das Logo möglicherweise etwas angehoben werden und das Foto muss herunterfallen. Nun K. Und während wir hier sind, schnappen Sie sich das Typwerkzeug, den Hotkey D, und schreiben wir das Live direkt unter das Symbol, damit wir ein besseres Gefühl für die Dinge bekommen. nun für die Formatierung Behalten Sie nun für die Formatierung die Standardschrift bei, aber machen Sie sie fett und vielleicht 60 Pixel oder so ähnlich. Bitte stellen Sie sicher, dass Sie das gleiche Farbcodon verwenden. Wir wollen den Regenbogen nicht an unseren Händen haben. Ich wiederhole mit dem bloßen Spielen an dieser Stelle, ist nicht die endgültige Schrift. Dies ist nicht der endgültige Look. Jetzt Gate. In der Vergangenheit habe ich vielleicht einen Fadeaway-Farbverlauf für das Foto vorgeschlagen . Wir könnten das in Photoshop machen, aber ich denke nicht , dass das der richtige Look ist. Die meisten Apps verwenden keine Reflexionen mehr oder das Ausblenden ist schon eine ganze Weile her. Ich denke also, dass die Vollbild-Version am besten sein könnte. Okay, das kann funktionieren, aber lass uns ein paar Modellbilder in dieser Version ausprobieren. Hier ist der Vorgang wie folgt Verstecken Sie die 50-prozentige schwarze Ebene, indem Sie dieses Symbol hier verwenden. Großartig. Ziehen Sie als Nächstes ein anderes Bild, das Bildwerkzeug, über das Original. Enthülle schließlich das schwarze Rechteck. Jetzt kann ich nicht sagen, dass ich es liebe. Lassen Sie mich kurz alle Optionen durchgehen. Wir brauchen etwas Reichhaltiges, Extravagantes und Interessantes zum Anschauen. Die Lücke unten links wird nicht fliegen. Das ist also nicht gut. Lass uns versuchen, die Fotonummer zu sein. Hier essen Freunde zusammen, ein großartiges Konzept, aber das Seitenverhältnis ist weit entfernt sodass wir den größten Teil seines Sparkle verlieren. Als nächstes Foto Nummer fünf. Das funktioniert auch, aber ich denke, das vorherige passt besser. Das Hauptproblem ist das abgebildete Essen. Dies ist ein Salat auf Eierbasis. Jetzt erwartet die Zielgruppe qualitativ hochwertiges Essen, aber obwohl wir nicht über das obere Management sprechen, wir nicht von gehobener Küche. Ein Eiersalat sieht nicht richtig aus, ich denke, er wird nicht appetitlich aussehen. Ich denke, Hamburger, schnell, solche Sachen, werden für die Zielgruppe funktionieren. Endlich, Nummer sechs, das hat ein reiches, reichliches Aussehen. Aber ich liebe nicht das Essen selbst. Es konzentriert sich zu sehr auf Desserts. Wir sehen ein paar Eier im Hintergrund. Aber auch hier geht es mehr in Richtung Wüsten. Option dafür funktioniert und ich denke, es kreuzt alle richtigen Kästchen an. Eine gute Wahl fällt sofort auf, und dies ist eine davon. Es hat eine Ansicht von oben. Es bietet interessante mehrfarbige Lebensmittel. Der Holztisch hat ein schönes gemütliches, vertrautes Feld. Also ja, ziemlich gute Option für sieht am besten aus. Lass es mich jetzt zurückbringen. Nun, das wirft die Frage auf, was können wir hier noch tun? Die einzige Idee, die mir in den Sinn kommt , ist ein rein weißer Hintergrund oder vielleicht ein subtiles Muster , das vielleicht eine cremefarbene Farbe hat. Jetzt werde ich das nicht schaffen, weil Apps, die absolut schwimmen und weiß sind, normalerweise High-End haben. Und das ist nicht der Fall. Denken Sie an das Michelin-Sterne-Restaurant oder die große Mode mit dem Namen Produkte, z. B. sind Marken, die ein minimalistisches Design mit vielleicht einem Spritzer Farbe rocken können , aber das meiste davon ist rein weiß. Das ist hier nicht der Fall, also werde ich es nicht einmal versuchen. Zusammenfassend werden wir uns an dieser Stelle an das anfängliche 50-%-Black-Konzept und Foto Nummer vier halten . Damit kann unser Board weggeworfen werden. Es war eine anständige Idee, aber sie wird nicht funktionieren. Okay, wir sehen uns in einer Sekunde. 20. Erkunde verschiedene Ideen für die page: Willkommen zurück. Fahren wir mit dem Bildschirm mit der Restaurantliste fort, der die zweite Sache ist, die der Benutzer sehen wird. Dies ist einer der wichtigsten Bildschirme in der App. Wir müssen also mit verschiedenen Verzögerungen experimentieren . Von Anfang an. Ich weiß, dass ich eine Version ohne Hintergrund sehen möchte , also rein weiß. Und man wäre vielleicht ein Hellgrau, das den guten Kontrast für unsere Angebote bietet, die weiße Karten haben sollten. Jetzt bin ich auf diese Ideen gekommen, indem ich den Wettbewerb recherchiert habe. Und das sind sehr zwei gängige Stile, sehr beliebte. Okay, lasst uns mit dem eigentlichen Inhalt beginnen. Ich habe dieses Bild eines Pfannkuchens für das Cover des Restaurants vorbereitet , also ziehe ich es rein, aber lass uns über Zahlen sprechen. Die offiziellen Materialdesign-Richtlinien besagen, dass wir auf beiden Seiten 16 dB benötigen, was in unserem Fall 32 Pixel entspricht. Lassen Sie uns nun etwas rechnen, 720 -64, dass die beiden auf jeder Seite 656 Pixel bedeuten, 656. Das ist also die Breite des Rechtecks. Das müssen wir auch für die Teiler im Bearbeitungsbildschirm verwenden . Bitte zentrieren Sie es jetzt wieder, nachdem Sie die Größe geändert haben Es versteht sich von selbst, es wird wahrscheinlich besser aussehen mit leicht abgerundeten Ecken. Gehen wir also mit fünf Pixeln für den Eckenradius. Und während wir hier im Eigenschaftenfenster sind, haben Sie den Rahmen deaktiviert, falls Sie dies noch nicht getan haben. Wie gesagt, XD fügt sie standardmäßig hinzu. Ich werde auch einige Anleitungen herausziehen, weil wir sicherstellen müssen, dass alles auf dem neuesten Stand ist. Sie können Hilfslinien aufrufen, indem Sie zur linken Seite des Bildschirms gehen. Und Sie erhalten diesen Cursor, klicken auf Ziehen, und so haben Sie eine Anleitung. Dies funktioniert nur von der linken Seite und der Oberkante. Okay, wenn wir schon dabei sind, löschen wir den zweiten Eintrag. Wir sind dorthin gegangen, nur um zu sehen, ob wir zwei davon unterbringen können, ohne zu scrollen. Und das ist in der Tat okay. Lassen Sie uns jetzt über Hierarchie sprechen. Wir haben einige Artikel hier. Und die Frage ist, welches ist das Wichtigste? Ich müsste den Titel sagen, oder? Aber sehr nahe dran kommt die Bewertung, da dies der Hauptwert der App ist. Das steht sowieso in dem Brief. Als nächstes kommt die Lieferzeit, die sicherlich ein entscheidender Faktor ist. Und schließlich, auf dem vierten Platz mit wahrscheinlich den Tags, die sich auf die Lebensmittelart beziehen. Diese können verwendet werden , um ähnliche Lebensmittelarten oder die Küchen schnell zu filtern . Der Benutzer kann darauf tippen. Und offensichtlich wird die Liste mit diesem speziellen Filter neu geladen. Wir sprechen über die Wichtigkeit, weil dies uns sagt, wie diese Artikel platziert und gestaltet werden sollten. Diese gehen also Hand in Hand. Man schaut sich nicht an , was schön ist. Sie denken über ihre Bedeutung für die erste Version nach. Und ich möchte zuerst betonen, ich den Titel und die Bewertung in derselben Zeile platzieren werde , aufgrund dessen, worüber wir gesprochen haben, die Tags können die zweite Reihe einnehmen. Und ich möchte die Lieferzeit irgendwo über dem Foto platzieren , ähnlich wie wir es in Food Panda Zap gesehen haben. Verschieben wir das gesamte Element 32 Pixel aus der Aktionsleiste. Okay? Wann immer möglich, streben Sie bitte nach Symmetrie. Es lässt das Design nur noch viel ausgefeilter aussehen. Kunden, ich werde Ihnen nie die Entfernung an den Seiten sagen . Gibt es D2, aber oben sind es 38? Nein, das werden sie dir nie sagen, aber glaub mir, sie werden es merken, sie werden es in ihrem Bauchgefühl spüren . Es ist nicht intellektuell, es ist nicht etwas, das sie artikulieren können, aber sie fühlen es. Okay. Jetzt macht der Titel 40 Pixel, und lass es uns fett machen. Die Standardschrift ist völlig in Ordnung. Was wir suchen, unsere groben Ideen, machen es auch rein schwarz. Das Standardgrau ist nicht großartig. Ich wollte es wiederholen. Das wird nicht die Schrift sein , die wir verwenden werden. Ich probiere nur Dinge aus, um zu sehen, ob die Bedeutung, die wir ihnen gegeben haben, Sinn macht Richten Sie den Titel an der linken Hilfslinie aus und lassen Sie etwa 20 Pixel zwischen dem Titel und dem Titelbild. Für die Lieferzeit werde ich oben links auf dem Titelbild ein schwarzes Rechteck platzieren . Und ich glaube, ich könnte die Uhr daneben hinzufügen. alles machen wir später. Aber lassen Sie uns vorerst sicherstellen, dass dies gut positioniert ist. Sortieren Sie dann, dass der Text und das Ebenenbedienfeld angehoben wurden der Text und das Ebenenbedienfeld damit Sie es tatsächlich sehen können, und lesen Sie es dann. Okay, jetzt reduzieren wir die Deckkraft der Rechtecke auf 30 Prozent. Das wird uns also einen großen Kontrast geben, aber Sie können immer noch das Fototor sehen. Dies wird uns auch mehr Platz für alle anderen Elemente geben , mehr Platz. Aber die Frage ist, sollte dies weiß mit schwarzem Text darüber gehalten werden oder umgekehrt? Jetzt denke ich, dass ein schwarzes Rechteck etwas besser funktioniert. Lass es uns ausprobieren. Ändern wir es also von weiß auf schwarz. Deaktiviert den Rahmen und wechselt dann zur Textebene. Dies muss weiß sein, aber ändern Sie das Gewicht auf halb fett. Es fällt also ein bisschen mehr auf, sodass Sie es leicht lesen können. Wenn Sie fertig sind, wählen Sie beide Ebenen aus und zentrieren Sie horizontal und dann vertikal. Dieser Artikel sollte wieder oben links platziert werden. Jetzt ist die Frage warum da und nicht woanders? Nun, ich habe unzählige Apps gesehen, die diesen bestimmten Standort nutzen . Also werde ich dasselbe tun. Okay, wir werden die Tags genau so lassen, wie sie sind, aber wir werden sie links am Titel ausrichten. Das ist einfach, weil wir diesen Leitfaden für die Entfernung haben. Lassen wir etwa 20 Pixel dazwischen. Lassen Sie uns sie eigentlich mittelgrau machen , etwa 777. Jetzt hat ein Hex-Code normalerweise sechs Zeichen. jedoch in Adobe XD Wenn Sie jedoch in Adobe XD die ersten drei eingeben, werden die anderen automatisch kopiert und eingefügt. Okay, lass uns über die Bewertung sprechen. Ich möchte etwas Ähnliches wie die Leberregel. Ein Smiley-Gesicht ist also ganz nett, dass der beste Ort im Web Will Icons slab icon.com ist. Bitte beachten Sie jedoch, dass die meisten Icons ein Abonnement benötigen . Ich werde dir nicht zeigen, wie ich nach dem Smiley-Gesicht gesucht habe , weil daran nichts Besonderes ist. Wisse nur, dass ich immer die SVG herunterlade, ist keine PNGs, und das ist sehr wichtig. Ich empfehle Ihnen auch, das zu verwenden. Also hier ist das Endergebnis. Vielleicht möchten Sie wissen, wie Sie fantastisch aussehende Icons finden. Aber darauf kommen wir später im Kurs zurück. Für die Größe 40 x 40 ist das ein guter Weg. Normalerweise würde ich kleiner gehen, aber das ist eine fantastische Ikone, ist ziemlich glücklich. Warum also nicht zeigen? Platziere es dann Pixel vom Text entfernt. Übrigens denke ich, dass es am besten ist den Prozentsatz fett und grün zu machen , denn das ist der Teil , der in der Auflistung wirklich auffällt. Sie kommen rein und die Leitung, alles schön. Halten Sie diese beiden auf der gleichen Linie wie die Bibel, aber lassen Sie das Element die richtige Anleitung berühren, okay, mit guten Fortschritten. Aber es gibt noch nichts, worüber man schreien müsste. Denken Sie daran, dies ist nur die erste Version. Kümmern wir uns um den oberen Teil , weil es mich tatsächlich abschreckt. Ich wollte dieses Design ohne Ablenkung beurteilen und diese grauen Rechtecke tun es nicht für mich. Lassen Sie uns das im nächsten Clip regeln. Danke. 21. Richte die Statusleiste und die bar ein: Willkommen zurück. Wenn ich das Design analysiere, würde ich es gerne im Kontext machen. Könnten wir jetzt alles isolieren und uns auf diese Karte konzentrieren? Sicher könnten wir, aber warum sollten wir uns deshalb mit der Aktionsleiste und der Statusleiste befassen. Die erste Option ist ein sehr sauberes Aussehen. Beide Formen sollten weiß sein, aber wir haben einen Schlagschatten für die Aktionsleiste, damit sie nicht verloren geht. Wir müssen sie irgendwie trennen. Das ist weitaus besser als die Verwendung eines Strichs, eines Schlagschattens. Denken Sie also bitte nicht einmal daran, einen Strich hinzuzufügen. Ein Rahmen, der eine Kontur ist, befindet sich in Photoshop, der Rahmen in Adobe XD. tut mir leid. Okay. Für die Einstellungen, Sex und Sex. Und das war's. Gut zu gehen. Nichts besonderes. Wir haben einen guten Schlagschatten. Geht weiter. Uns fehlen wichtige Elemente in der Statusleiste. Also hier ist eine Akte, die das ungesund herausbringt. Diese Ressource ist beigefügt und ich erwarte, dass Sie sie in all Ihren Projekten verwenden. Verwenden Sie jetzt erneut Shift, falls erforderlich. Die Idee ist folgende. Es gibt nichts wirklich Besonderes hier. Die Statusleiste ist einfach und super einfach, sodass wir keine Zeit damit verschwenden sollten. Kopiere es einfach und füge es ein und fertig. Okay, lassen Sie uns die Ebene der Stadttexte durch San Francisco ersetzen , fett geschrieben, 40 Pixel, reines Schwarz, keine Weinblätter. Das ist genau das Gleiche wie der Name des Restaurants. Zentrieren Sie es mit der Aktionsleiste. Denken Sie daran, obwohl dies wie ein großer durchgehender Block aussieht, gibt es tatsächlich ein separates Rechteck für diesen speziellen Bereich. Links. Richten Sie es mit unserem Leitfaden aus und wir können weitermachen. Wenn Sie sich mit XD immer vertrauter machen, schlage ich vor, dass Sie die Befehle zum horizontalen und vertikalen Ausrichten erlernen . Diese helfen wirklich, sodass Sie Ihre Maus nicht ganz oben rechts bewegen müssen . Verschieben Sie das Dropdown-Symbol auf, falls Sie dies noch nicht getan haben. Schließlich werde ich aus Zeitgründen weitermachen und Ihnen die Symbole zeigen, die ich für diesen richtigen Bereich ausgewählt habe. Sie haben sie angehängt. Diese sollten ebenfalls 40 Pixel groß sein. Zentriert sie innerhalb des Rechtecks. Bitte beachten Sie, dass Sie sie nicht direkt über das Rechteck fallen lassen, wenn Sie sie innerhalb des Projekts Sie sie ablegen, da Sie keine gute Zeit haben werden. Das willst du nicht. Eigentlich muss man sie etwas tiefer platzieren. Okay, jetzt schreibe die Zeile, das Suchsymbol zwischen ihnen lässt 40 Pixel übrig, damit dicke Finger kein Problem darstellen. Wir haben das Hamburgermenü links vergessen. Das ist eine Selbstverständlichkeit, das ist ein Muss. Bitte gib mir eine Sekunde, um die Magie von allem zu machen. Hier ist eine schöne Ikone. Nochmals, was Sie vermeiden möchten, sehen Sie sich das Highlight an. Wenn ich hier loslasse, wirst du keine gute Zeit haben. Also lasst uns die Kontrolle rückgängig machen Z. Das ist es, was wir eigentlich wollen. Ich werde meine Guides verwenden , um es richtig zu positionieren. Ich lasse 30 Pixel dazwischen und San Francisco. erneut sicher, dass Sie vertikale Mittelpunkte ausrichten und das Tor verwenden . Sie fragen sich vielleicht, warum ich zwischen diesen beiden Elementen keine 40 Pixel verwendet habe. Zwei in der Mitte, das Feld rechts. Und das liegt daran, dass hier auch die Adresse des Benutzers angezeigt wird , wenn er angemeldet ist. Wir brauchen also so viel Platz wie möglich. Wir haben noch eine letzte Sache , die geklärt werden muss. Der Dropdown-Pfeil sollte auf etwa 20 mal zehn Pixel verkleinert werden. Und ich denke, es sollte so nah wie möglich an der Stadt platziert werden . Obwohl 30 Pixel besser aussehen würden. Ich bleibe jetzt bei zehn, okay? Ja, damit bin ich mehr als zufrieden. Nachdem alles gesagt und getan ist, wählen Sie bitte alle diese Elemente aus und zentrieren Sie sie in der Aktionsleiste. So. Großartig. Wenn alles in Ordnung ist, sollte sich nichts bewegen. Nun, vielleicht ein Pixel von zwei. Beachten Sie, dass die Schrift nach unten versetzt zu sein scheint. Das nervt mich wirklich, aber denken Sie daran, dies ist nicht die endgültige Schrift. Damit wir die Dinge voranbringen können. Darüber machen Sie sich keine Sorgen. Okay, das ist unser erster Entwurf. Wählen wir den Eintrag aus und wir werden endlich diese Option verwenden. Wiederhole Gitter. Wie gesagt, ich möchte es im Kontext beurteilen. Ich würde also gerne sehen, dass die gesamte Höhe von Einträgen belegt ist. Insgesamt. Es ist ein grober Entwurf. Es ist nur eine Idee, aber sie hat alle erforderlichen Elemente und wir können anfangen, mit ihnen zu spielen und uns mindestens zwei der anderen Optionen auszudenken. So läuft es und ich empfehle Ihnen, dies auch in Ihren eigenen Projekten zu tun. Okay, lass uns nach einer kurzen Pause weitermachen. 22. Erstelle schnell eine andere Version – die einfache Methode: Willkommen zurück. In diesem Video werden wir verschiedene Versionen für diese Karte untersuchen. Wir werden es duplizieren, also werden wir die Dinge schön und sauber halten. Dies wird uns auch helfen, alle Versionen, alle Iterationen zu vergleichen . Okay, das erste, was wir ausprobieren sollten, ist ein hellgrauer Hintergrund. Ich habe tatsächlich die schöne Farbe von Dribble gesampelt , die einen schönen Hauch von Blau hat. Der genaue Farbcode ist jedoch f z, F11, F8. Und es ist sehr subtil. Bitte beachten Sie, dass keine Rechtecke als Hintergrund festgelegt sind. Dies ist die Farbe für die gesamte Kunsttafel, Sie müssen sie also auswählen, um die Füllung zu ändern. Okay, jetzt sieht der Text auf diesem grauen Hintergrund nicht gut aus. Erstellen wir also das Basisrechteck für die Karte. Hier ist der schnelle Prozess. Wählen Sie das Bild aus, indem Sie darauf klicken. Erstellen Sie nun eine Kopie mit Control D, D wie im Duplikat. Gehen Sie zum Ebenenbedienfeld und wählen Sie das untere aus. Okay, jetzt lass uns die Höhe auf 500 erhöhen. Im Moment ergibt es keinen Sinn, aber hier ist die Sache. Klicken Sie auf die Füllung, um die Farbe Bettler zu öffnen , bewegen Sie sie herum. Und jetzt werden Sie sehen, dass das Rechteck angezeigt wird, machen Sie es natürlich rein weiß. Und das war's. Wir haben jetzt eine Karte. Okay, sicher. Der Text passt nicht und dann fügen Sie ein paar Dinge hinzu, die repariert werden müssen. Aber das ist der Prozess. Duplizieren Sie also erneut, wählen Sie die unterste Ebene im Ebenenbedienfeld aus, erhöhen Sie die Höhe und spielen Sie dann mit der Füllfarbe. Zurück an die Arbeit. Wählen wir das Bild aus und ändern den Koordinatenradius unten. Bitte beachten Sie, dass wir hier ein Wiederholungsraster haben. Einerseits ist das großartig, weil wir alle Kopien von unten beeinflussen. Aber der Nachteil ist, dass wir jetzt die Kontrolle behalten und auf das Bild klicken müssen , um es tatsächlich auszuwählen. Wenn du das nicht tust, wird Folgendes passieren. Lass mich die Auswahl aufheben, überprüfe das Ebenenbedienfeld, richtig? Nichts ist ausgewählt. Okay? Wenn ich jetzt einfach über das Bild klicke, wähle ich das Raster aus, nicht das Foto selbst. Die Schlussfolgerung ist also, dass Sie die Kontrolle gedrückt halten und klicken müssen , um ein Element auszuwählen. Okay, zurück zum Eckenradius. Wir haben dieses Feld schon früher hier benutzt, oder? Aber wenn wir einzelne Koordinaten ändern wollen, müssen wir hier klicken. Mein Rat ist, dass Sie auf den ersten klicken und das Symbol überprüfen. Dies zeigt Ihnen , welche Ecke Sie tatsächlich beeinflussen. Verwenden Sie die Registerkarte, um schnell zu einem neuen zu wechseln. Was wir eigentlich wollen ist z obwohl du für die letzten beiden bist, einfach so. Nun, okay, großartig. Jetzt können wir beginnen, unsere Textebenen anzuordnen. Bitte wählen Sie diese beiden Elemente aus und bewegen sie um 30 Pixel nach innen. den Abstand auf der vertikalen Achse betrifft, so spielt das im Moment keine große Rolle, aber ich habe versucht, diese beiden irgendwo in der Mitte, auf der rechten Seite, zu platzieren , genau das Gleiche dort, die Pixel. Aber behalte das im Einklang mit dem Titel. habe diese Situation nie geschrieben. Stellen Sie sich diese als zwei einzelne Reihen vor. Dies ist übrigens eine Methode, um zu wissen wie man Control und Shift verwendet. Lassen Sie mich die Dinge klären. Halten Sie also die Kontrolle und klicken Sie auf den Dipol. Nun das wähle das aus. Angenommen, wir wollen auch die erbeutete Wüste, müssen wir Shift halten. Überprüfen Sie nun das Ebenenbedienfeld darauf. Denken Sie daran, dass Sie bei gedrückter Strg-Taste eine einzelne Ebene auswählen können. Wenn Sie dann mehrere andere Ebenen aufnehmen möchten, müssen Sie die Umschalttaste einfach so gedrückt halten. also die Umschalttaste verwenden, um mehrere Ebenen auszuwählen, daran, dass wir all diese letzten Anpassungen, diese Feinbearbeitungen, neu vornehmen all diese letzten Anpassungen, werden, wenn wir zur Typografie-Vorlesung kommen, wenn wir tatsächlich wähle eine Schriftart und so weiter. Nach ein bisschen Basteln ist dies die erste Narbe. Bitte bewegen Sie Ihre Maus zwischen die Karten, damit wir auch dieses Feld anpassen können. Sehen Sie sich dieses rosa Rechteck an, klicken Sie auf Halten , damit Sie den Abstand ändern können. Da. D ist absolut in Ordnung. Das ist es, was wir anstreben. Okay? Dies ist unsere erste Option. Ich sehe sie Seite an Seite an Seite an. Ich denke, es ist eine Verbesserung, aber insgesamt bin ich mit dieser Größe nicht allzu glücklich. Lassen Sie uns die gesamte Kunsttafel duplizieren damit wir etwas anderes ausprobieren können. Bitte achten Sie darauf, dass Sie genügend Platz haben. Wir haben jede Menge Platz und Adobe XD. Nehmen wir an, wir verkleinern die Karte um 40 Pixel, z. B. bedeutet dies, dass das Basisrechteck auf 460 reduziert werden muss und das Ende des Rechtecks nur 60 sein muss. Als Nächstes müssen wir diese Textebenen behandeln. Und hier spielt Ihre Geschwindigkeit wirklich eine Rolle bei der Geschicklichkeit. Das ist das Schlüsselwort Rapid File. Wähle sie aus und verschiebe sie für die Pexels nach oben. Und weißt du was? Während wir hier sind, wollen wir diesen Tags auch einen Farbtupfer hinzufügen. Sie sehen so langweilig aus wie sie sind. Außerdem würde er nicht wissen , dass dies Aktionen sind. Sie können sie tatsächlich antippen und filtern Ihre Suchergebnisse. Also wird jede Farbe reichen. Aber ich würde lieber nicht das Grün aus der Bewertung verwenden. Ich möchte jegliche Verwirrung vermeiden und diese beiden so weit wie möglich trennen. Roter Schrägstrich Orange wäre das genaue Gegenteil. Also lass uns mit so etwas weitermachen. Auch hier spielt der farbige Code zu diesem Zeitpunkt keine große Rolle, da wir das Farbschema etwas später festlegen werden. Denken Sie daran, dass wir immer noch am Header arbeiten und immer noch an den Karten selbst arbeiten. Okay, ich bin ziemlich zufrieden mit diesem. Insgesamt ist das Seitenverhältnis ziemlich gut. Es ist nicht so groß, wie ich es gerne hätte, aber es ist immer noch ziemlich groß. Und das führt zu einer starken visuellen Wirkung. Wenn du die App öffnest, wird sie wunderschön aussehen. Die Fotos werden dich wirklich treffen. Lasst uns darüber nachdenken, was wir sonst noch tun können? Machen Sie eine weitere Kopie, bitte steuern Sie D oder Alt, ziehen Sie. Und denken wir, wir könnten diese Tags und die einfarbige Hintergrundfarbe haben , um die Schaltflächen antippbar zu zeigen, da steckt eine Aktion dahinter, oder? Aber weil ich möchte, dass die Bewertung auch viel Aufmerksamkeit erregt, denke ich, dass ich sie über das Foto verschieben werde. Also lasst uns loslegen. Verschieben Sie die Bewertung in die untere rechte Koordinate des Fotos. Etwas in dieser Gegend. Natürlich können wir es sehen, aber wir können ein Rechteck hinzufügen, das einen guten Kontrast bietet. Die Größe nach dem Hin- und Her-Bit auf 50 mal 60 Pixel. Das wird gut funktionieren, und natürlich muss es rein weiß sein. Jetzt, hier ist die Sache. Möglicherweise haben Sie Probleme beim Verschieben des Rechtecks unter den Texten und Emoji. Das liegt daran, dass wir ein Wiederholungsraster haben. Also was ist die Lösung? Nun, es ist ganz einfach. Sie müssen eine Hotkey-Steuerungstaste in der linken eckigen Klammer verwenden. Dadurch wird die ausgewählte Ebene nach unten verschoben. Einfach so. Wenn du es erhöhen willst, dann ist es Control, richtig? Schlüssel mit eckiger Klammer Dies ist eine der einfachsten Möglichkeiten, um eine gute Lesbarkeit zu erreichen , ohne Kompromisse einzugehen. Füge einfach das Rechteck hinzu. Lassen Sie 30 Pixel vom unteren und rechten Rand entfernt. Wie Sie sehen können, behalte ich ihn, sobald ich den Wert festgelegt habe, in diesem Fall 30. Als Nächstes erhöhen wir die Rundheit auf den Maximalwert und das entspricht der Form der Smiley-Gesichter. Übrigens, Sie können hier jeden lächerlichen Wert angeben, wie 90 oder was auch immer, wird maximal gehen, und das war's. Okay, machen wir die Grenze außer Gefecht. Falls Sie das noch nicht getan haben. Es hilft uns in keiner Weise. Aber ich denke, es ist an der Zeit, das Emoji und die Texte direkt in die Mitte dieser Form zu bewegen , ungefähr so. Beweg es einfach. Achten Sie immer auf beide Banklinien. Jetzt, wo wir hier sind, wählen Sie die Basis gut und erstellen Sie eine Gruppe mit Control G. Warum brauchen wir die Gruppe? Es sind nur drei Schichten, oder? Nun, wir werden das wahrscheinlich verschieben, also ist es am besten, wenn wir organisiert bleiben. Nennen wir es Bewertung und das Ding Das ist es. Machen wir eine kurze Pause und wir machen gleich weiter. 23. Weitere Varianten für die Karte: Willkommen zurück. Kümmern wir uns um die Taschen. Hier. Ich werde ein weiteres abgerundetes Rechteck erstellen, ungefähr 40 Pixel hoch. Die Breite wird je nach Länge des Wortes variieren , aber wir wollen ungefähr 20 Pixel auf jeder Seite. Seien Sie also bitte großzügig damit. Denken Sie daran, dass sie die linke eckige Klammertaste des Hotkey-Steuerelements verwenden , die Position, die sie korrekt im Ebenenbedienfeld nach unten bewegt. Okay, das sollte orangefarbener Schrägstrich rot sein. Aber mach dir keine allzu großen Sorgen um den Schatten. Stellen Sie einfach sicher, dass rein weißer Text sichtbar ist. Ich bewege mich ziemlich schnell, weil das Standardzeug ist. Sie sollten also mitmachen können. Aber natürlich musst du das Video oft pausieren und natürlich bei deiner zweiten Betrachtung mitarbeiten. Die Koordinaten müssen auf das Maximum gerundet werden , um der Bewertung zu entsprechen. Natürlich muss alles zentriert sein. Jetzt ist die Sache. Die Höhe der Karte ist nicht gut. Wir können das einfach nicht schaffen , auch wenn wir den Titel etwas erhöhen. Ich schlage vor, wir ändern dies auf 470. Und nachdem alles gesagt und getan ist, soll es so aussehen. Die Sache ist, nicht alle deine Ideen werden großartig sein und das ist völlig in Ordnung. Es ist wichtig, dass Sie sie so schnell wie möglich erstellen und sie dann alle beurteilen, indem Sie sie nebeneinander betrachten. Beenden wir diese Version, indem diese Lieferung von der oberen linken Koordinate nach unten bewegen. Dies sollte eigentlich in derselben Zeile stehen wie der Titel des Restaurants. Schreiben wir in 30 Minuten in Lieferung. Diese grundlegende Schriftart ist vorerst in Ordnung. Was wir suchen, ist Ausgewogenheit. Sieht die Karte gut aus? Jetzt kann ich mit einer Bewertung auf der rechten Seite nicht sagen, dass ich es liebe. Nun Gate, am Ende dieser Sitzung, können wir dieses Design kopieren und herauszoomen, um alle Optionen zu sehen, die ihr die Chance der Fed geben. Stellen Sie sicher, dass alles zugeknöpft ist. Wenn Sie viel Zeit mit Ihrem Design verbringen, werden Sie natürlich eher dazu neigen, es besser zu mögen. All diese letzten Anpassungen sind also wichtig, sie beeinflussen dich. Okay. Wir haben hier ohne Hintergrund und mit großen Karten angefangen. Das sind eindeutig die Worte wenn die zweite Version gut aussieht, aber die dritte ist aufgrund der kleineren Kartengröße definitiv besser. Mir hat auch der Farbtupfer gefallen , dass Orange tatsächlich sehr hilft. Aber wenn ich diese beiden vergleiche, denke ich, dass solide Tags ein Fehler waren. Das ist ein bisschen zu beschäftigt und nicht ausgeglichen. Es war einen Versuch wert, aber ich werde Sie nicht darauf hinweisen. Mir hat das variable Rating gefallen, aber wir müssen noch mehr daran arbeiten. Okay, machen wir eine Pause und wir machen gleich weiter. Danke. 24. Erkunde ein endgültiges Layout: Willkommen zurück. Ich hoffe du hast Spaß und du arbeitest mit mir zusammen. Aber natürlich haben wir bei Ihrer zweiten Betrachtung zu diesem Zeitpunkt mit verschiedenen Optionen herumgespielt und wir wissen mit Sicherheit, dass wir bei dieser Version bleiben wollen , aber ohne Tags. Also lass uns das machen. Erstellen Sie eine weitere Kopie der neuesten Grafiktafel und löschen wir die orangefarbenen Rechtecke. Ich mag die Farben, also denke ich, dass wir sie auf diese Texte anwenden werden. Ebenen teilen sie mit einem Bindestrich und bereinigen dies. Diese Trennwand kann schwarz oder so ähnlich sein. Was den Abstand zwischen ihnen betrifft, würde ich sagen, irgendwo 15-20 Pixel. Die Frage ist, sollten wir diese Position beibehalten? Ich denke, wir können ein bisschen mehr damit spielen. Hier ist meine Idee. Verschieben wir die Lieferzeit unter den Titel, da der Brief besagt, dass dies ein sehr wichtiger Faktor für die Nutzer der App ist. Das bedeutet also, dass die Eier wie zuvor auf der rechten Seite sitzen , 30 Pixel vom Rand entfernt. Schon bald werden wir anfangen, Schriften auszusuchen und das wird noch viel besser aussehen. Während unserer Pause nahm ich mir die Zeit, das Uhrsymbol zu finden , das zu allen anderen passt. Hier ist es. Und Sie können mit 30 mal 30 oder 40 mal 40 gehen, was auch immer Ihrer Meinung nach am besten funktioniert. Die kleinste Größe ist in Ordnung , weil es keine Aktion ist. 40 Pixel haben wir in der Aktionsleiste verwendet. Das wäre also angemessen gewesen, aber insgesamt werde ich mit dem niedrigsten Wert gehen , 30 mal 30. Okay, bitte nehmen Sie sich einen Moment Zeit, um alles zwischen der Uhr und der Uhrzeit zu arrangieren . Ich denke, zehn Pixel sind in Ordnung. Und natürlich muss alles vertikal zentriert sein. Das Uhrsymbol, die Lieferzeit und schließlich die Kategorien. Einfach so. Als optionalen Schritt können wir diesen Text verkürzen , um die 30 Minuten zu liefern. Ich denke, das ist klar genug. Wir könnten sogar die Lieferung entfernen , weil wir dieses Uhrensymbol haben. Aber ich denke, ich werde es in dieser Version belassen. Schließlich, obwohl ich das Bewertungsdesign geliebt habe , deckt es einen erheblichen Teil des Fotos ab. Also hier ist was ich vorschlage. Ich habe mich vom Leberblau inspirieren lassen. Ich möchte also, dass die Bewertung an diesem Rand liegt. Dies sollte auch das Design ausgleichen. Die Sache ist, wir brauchen den Schlagschatten, also klicken Sie bitte bei gedrückter Kontrolle auf das Rechteck und aktivieren Sie es. Das nennt man übrigens die Rechnung ein Knopf, eine Rechnung. Bill wie in der Medizin, weil es ziemlich rund ist. Sie konnten es 30 Pixel von rechts messen und platzieren. Aber hier ist die Sache. Obwohl dies nicht die endgültige Schriftart ist, denke ich, dass das zu viel leerer Platz auf beiden Seiten ist. Wählen Sie also das Basisrechteck aus, nicht die Gruppe . Übrigens würden Sie alles andere tun und die Größe ändern. Und hier ist ein großartiger Trick wenn Sie die Größe einer Ebene ändern möchten, aber ihre Position beibehalten möchten. Halten Sie beim Ziehen die Alt-Taste gedrückt. Das ist Alt oder die Wahltaste auf dem Mac. Wie Sie sehen können, wirken Sie sich auf beide Enden aus. Das bedeutet, dass der Inhalt im Inneren zentriert bleibt. Das ist also die Alt-Taste und die ideale Version. Diese Form ist so breit wie diese beiden Tags. Aber diese werden sich natürlich ständig ändern , basierend auf den tatsächlich gezeigten Wörtern. Hier ist International ziemlich lang, aber offensichtlich können andere Kategorien kurz sein, also verschwenden Sie keine Zeit damit. Aber ja, das wäre die ideale Situation. Trotzdem denke ich, dass dies eine große Verbesserung gegenüber der vorherigen Version ist. Der Schatten ist zu stark. Einmal haben wir es nur ein bisschen abgeschwächt. Das wird ganz nett aussehen. Deckkraft von sechs Prozent ist in Ordnung. Bitte beachten Sie, dass die Deckkraft von diesem Feld aus gesteuert wird. Sie könnten diesen vertikalen Bereich auch verwenden, aber ich verwende stattdessen gerne das Feld, es ist einfacher. Ich bin fest davon überzeugt, dass dies bei weitem die beste Version ist. Das ist meine Meinung, aber was denkst du? Lass es mich im Kommentarbereich wissen und bitte stelle sicher , dass du an deiner eigenen Version arbeitest , wenn du diese fertigstellst. Okay, lass uns eine Pause machen. 25. Creatie Varianten für die action: Willkommen zurück. Konzentrieren wir uns im Moment auf die Top-Region, wir haben etwas sehr Sauberes geschaffen, auch iOS mag, aber ist das der richtige Weg? Denken Sie daran, wir sind ziemlich schnell auf die Breite gegangen, weil wir die Karten analysieren wollten, ohne weggeworfen zu werden. Aber es ist Zeit, einige Modelloptionen zu erstellen. Lassen Sie uns eine Kopie erstellen, damit wir einige Optionen erkunden können. Schaffen Sie Platz und fangen wir an. Das erste, das mir in den Sinn kommt, ist sehr kreativ und das ist die Verwendung von Fotos für diesen gesamten Bereich. Dies kann ein Bild der Stadt sein und das wäre San Francisco, da dies das aktuelle ist. Löschen wir die Statusleiste und erweitern die Aktionsleiste und diesen Bereich. Warum wollen wir es jetzt entfernen? Weil es viel einfacher ist, ein Foto innerhalb eines einzelnen Rechtecks hinzuzufügen . Wenn es uns gefällt, können wir mit einem Programmierer sprechen und sehen wie viel Aufwand es tatsächlich kosten würde , dies zu erreichen. Denn auch dies ändert die Kostenstruktur. Die Sache ist, ich weiß, dass das möglich ist, aber ich bin mir nicht sicher, wie teuer es ist, wie schwierig es ist. Aber wir werden diese Diskussion führen, wenn wir es lieben. Mal sehen. Ich habe das Video angehalten und bin auf unsplash.com gegangen , um mehrere Fotos dieser ikonischen Brücke auszuwählen. Hier sind sie, und lass uns das ausprobieren. Also hier ist der erste. Wir haben einige Elemente, die auf einem farbigen Hintergrund nicht funktionieren. In diesem Fall mache ich sie also schnell weiß. Nichts anderes, bitte lassen Sie sich nicht von Gelb, Orange oder Limettengrün verführen . Das sind die schlimmsten Spreads des Teufels. Nur Weiß funktioniert. Okay, das ist gar nicht so schlimm. Und wir können das schwarze Rechteck mit einer geringen Deckkraft hinzufügen , um die Lesbarkeit dieses Textes zu verbessern. Aber jetzt lass uns mit den Fotos weitermachen. Denken Sie daran, dass Sie jederzeit auf das Bild doppelklicken und es neu positionieren oder sogar die Größe ändern können. Adobe XD versucht sein Bestes, um das Foto innerhalb des Rechtecks zu platzieren, aber es leistet nicht immer gute Arbeit. also keine Angst, da reinzugehen und es zu ändern. Zum Beispiel für das letzte Bild, Nummer sechs, sollte dieses viel weiter unten platziert werden. Aber wir müssen über diese Strategie nachdenken. Wollen wir wirklich viel Aufmerksamkeit auf die Aktionsleiste C lenken ? Wir lieben zwar die Einfachheit der Leber, aber das bringt uns davon ab. Und ich glaube wirklich nicht , dass es das wert ist. Einige dieser Fotos sehen okay aus. Aber das heißt, es ist nicht erstaunlich, es ist nicht fantastisch, es ist einfach okay. Also lasst uns die Dinge nicht komplizieren. Also werden wir diese Idee zunichte machen. Stattdessen. Lass uns eine solide Heather ausprobieren, etwas Einfaches, eine neue Kopie. Und wir werden mit einigen kräftigen, leuchtenden Farben experimentieren , etwas ziemlich gesättigtes. Ganz oben auf meiner Liste stehen Grün, Orange, Lila und Blau. Die grundlegenden sicheren Optionen , die die meisten Menschen mögen. Also werde ich sie nebeneinander stapeln, damit wir ihnen eine faire Chance geben können. Erstellen von Kopien ist also sehr wichtig. Gib mir einen Moment, während ich all diese Versionen durchgehe . Ich muss das Video ziemlich beschleunigen. Aber es ist nichts Besonderes los. Es spielt nur mit dem Farbwähler herum. Okay, hier sind sie. Hast du jetzt einen Favoriten? Denken Sie, dass eine farbige Option besser ist als die rein weiße? Weil das Ding von dem ist, wo ich stehe, denke ich, dass das Weiße am besten ist. Die Fotos sind reich an Farben, also denke ich, wir bitten hier um Ärger. Weiß ist viel eleganter. Mein Fazit: Nehmen wir es mit und verfeinern es. Wenn Sie anders denken, fahren Sie einfach mit Ihrer Wahl und zeigen Sie mir Ihr Endergebnis. Dies ist eine Geschmacksmethode, aber auch wie Sie den Auftrag interpretieren, wie Sie sehen, was der Kunde will. Okay. Machen wir eine Pause und wir sehen uns in einer Sekunde. 26. Design-Konzepte für die restaurant (3) Bildschirm: Willkommen zurück. Wir sind bereit, sie zu überprüfen, aber das Design der Restaurantdetails. Mal sehen, welche Variationen wir uns für dieses Grün einfallen lassen können . Aber zuerst wollen wir das aktualisieren. Diese Rechtecke müssen weiß sein. Und für die Tabs muss ein Schlagschatten aktiviert sein. Bitte denken Sie daran, dass wir dafür spezielle Einstellungen hatten, nicht die Standardeinstellungen. Es war Sex und Sex. Dies ist sehr wichtig, wenn es um Schatten geht, da wir nicht möchten, dass der Schatten oben im Rechteck angezeigt wird. Daher ist es wichtig, die Einstellungen zu ändern. Nun zur Statusleiste, die rein schwarz sein muss, mit Ausnahme des Rechtecks selbst. In der Vergangenheit habe ich PNGs verwendet, echte Fotos, aber für die Statusleiste ist es am besten, wenn Sie ein Element verwenden, das einstellbar ist. Und das Format, nach dem Sie suchen, ist SVG. Aber noch besser, Sie können einfach eingefügte Inhalte aus jedem Werbegeschenk kopieren, von jeder Ressource aus dem Internet. Schauen Sie sich einfach ein Werbegeschenk für Adobe XD an und Sie werden es wahrscheinlich finden. Okay, wenn wir nach unten gehen, müssen wir Symbole hinzufügen. Ich habe mir etwas Zeit genommen, um den passenden Rückpfeil und das Entzündungssymbol zu finden. Diese müssen genau wie ein Bildschirm platziert werden , aber alle in derselben Zeile. Breite genug Platz. Ich denke, wir haben das Hinzufügen der Anleitungen zu diesem speziellen Bildschirm übersprungen . Also lass uns das hier hinzufügen. Es gibt eine Spur. Fügen Sie jedes Rechteck hinzu, das 656 Pixel breit ist. Wie üblich ist das Eigenschaftenfenster der beste Weg , wenn Sie nach der spezifischen Größe suchen. Wenn Sie es dann haben und das Rot senden, können Sie die Hilfslinie herausziehen und dann die zusätzliche Ebene löschen. So einfach ist das. Das ist einer dieser Hacks , die ich absolut liebe. Diese Technik entstand aus der Not heraus. Und nur ein Freelancer , der seine Zeit wirklich schätzt, verfolgt diesen Ansatz. Wenn Sie jemanden sehen, der eine Hilfslinie Pixel für Pixel manuell bewegt, wissen Sie, dass er viel zu entspannt ist. Bitte entfernen Sie innerhalb des Geschäfts die Informationstexte, falls Sie dies noch nicht getan und platzieren Sie das Info-Symbol neben dem Leitfaden. Wiederhole das für die andere Seite. Bitte nehmen Sie sich Zeit damit und stellen Sie sicher, dass Sie es richtig machen. Der einfachste Weg, diese anzuordnen, besteht natürlich darin , die große Box auszutrocknen , in der sie alle erfasst sind, dann den Befehl Ausrichtung zu drücken und Sie haben einen ziemlich großen Schritt gemacht. Fantastisch. Lassen Sie 30 Pixel zwischen dem Pfeil und dem Titel. Es ist also schön luftig. Diese Schriftart ist gar nicht so toll, aber schon bald werden wir anfangen, den letzten Schliff zu geben. Das wird etwas später sein. Nun k, um Bildschirm Nummer zwei zu finden, werden wir den Bildschirmtitel auf 40 Pixel in Fettdruck ändern . Behalten Sie diese Schrift wieder bei. Bitte mach es aber rein schwarz. Das könnte ein bisschen riskant sein. Making wird so groß, aber wir werden alles früh genug regeln und wir können verschiedene Änderungen vornehmen. Die Hauptidee dabei ist , konsequent zu bleiben. Ich verwende nicht gerne unterschiedliche Werte auf zufälligen Bildschirmen. Nachdem Sie es beiseite gelegt haben, müssen Sie dabei bleiben. Und oh, übrigens, wenn du deine Größe änderst, ist es am besten, wenn du alles noch einmal ausrichtest. Für die Tabs. Lass uns das machen. Wählen Sie alle auf einmal aus da dies die intelligenteste Art zu arbeiten ist, und ändern Sie dann die Ausrichtung in Mitte. Dadurch bleiben sie an Ort und Stelle, da ich vorhabe, die Größe auf etwa 24 Pixel zu erhöhen. Das gilt für mach sie mutig und offensichtlich schwarz. Wenn sie nicht schon schwarz sind, macht mich das Grau wirklich verrückt. Ich mag es nicht. Wir haben ziemlich viel Zeit damit verbracht, sie mit Hilfe der Zeile zu arrangieren , die den aktiven Tab anzeigt. Und die Sache ist, ich möchte nicht , dass all diese Anstrengungen umsonst sind. Deshalb ändern wir diese Ausrichtung. Okay, lass uns weiter runter gehen. Wählen Sie den ersten Eintrag aus und Sie sollten ihn gruppieren lassen, wenn Sie mitverfolgt haben. Wenn nicht, bitte Gruppieren Sie jetzt mit Control G. Lassen Sie uns nun wieder ein Wiederholungsraster von rechts aktivieren. Hervorragend. Ziehe das nach unten, damit wir ein paar Kopien bekommen. Offensichtlich scheint der Abstand nicht richtig zu sein, aber das sind kurze Fakten. Wir suchen nach 30 oder 32 Pixeln. Dies ist eine der Gewinnänderungen gegenüber dem Photoshop-Wiederholungsraster, das uns zeigt, wie unser Design aussehen wird, wenn wir viele Einträge haben , und das mit minimalem Aufwand. Nehmen Sie diese Zeile als Beispiel. Es hat nicht die richtige Größe. Es muss 656 Pixel breit sein. Wählt einen von ihnen aus und verwendet den Transformationsbereich im Eigenschaftenfenster, geben Sie 656 ein und verschieben Sie ihn an die gewünschte Stelle. Lassen Sie uns diese Gelegenheit übrigens nutzen, um auch das x-Feld zu verwenden. X steht für den horizontalen Zugriff. Wenn wir hier 32 Pixel eingeben, bedeutet dies, dass die Ebene 32 Pixel vom linken Bildschirmrand entfernt platziert wird . Also x horizontale Achse, und es beginnt von der linken Seite. Und y vertikale Achse, es beginnt von oben. Okay, jetzt für die Fotos müssen wir unsplash.com benutzen. Wieder einmal habe ich bereits etwas vorbereitet, also ziehe ich sie alle auf einmal über das erste Rechteck. Und weil es sich um ein Wiederholungsraster handelt, weiß XD, dass ich in jedem Eintrag ein anderes Foto haben möchte. Übrigens, wenn Sie die Grenze nicht deaktiviert haben , tun Sie dies bitte. nicht nötig. Und während wir hier sind, möchte ich Ihnen ein weiteres Feature von Repeat Grid zeigen. Ich habe diesen einfachen Knoten schlecht. Dies ist nur eine Standard-Punkt-TXT-Datei mit mehreren davon. Wenn ich das mit einer der Textebenen rüberziehe, sagen wir den Titel des Gerichts, schauen Sie, was passiert. Magie. Ich werde diesen Schritt für den Beschreibungspreis wiederholen, und schließlich für das Gewicht ist der Name des Notizblocks nicht wichtig. Ich benenne sie einfach um, damit Sie sie leicht verfolgen können. Das einzige, was Sie beachten müssen, ist einen leeren Bereich zwischen Ihren Eingaben zu lassen. So sieht die Description dot TXT-Datei aus. Obwohl das Ventil mehrere Leitungen hat, weiß XD anhand dieses leeren Raums, wann das nächste Jahrhundert beginnt. Und falls zu viel Text vorhanden ist, reduzieren Sie einfach die Höhe der Textebene und fertig. Der Überschuss wird versteckt. Cool. Wenn das erledigt ist und Sie bereit sind, weiterzumachen, konzentrieren wir uns auf In den Warenkorb, die Hauptaktion in diesem Grün. Hier ist die Sache. Ich habe lange und genau geschaut und mich für dieses Pluszeichen entschieden. Soweit ich weiß, wird , wenn Sie auf diese gesamte Region tippen Produkt automatisch in den Warenkorb gelegt, wenn Sie auf diese gesamte Region tippen. Es gibt keine andere Seite, es gibt keinen anderen Bildschirm. Nun, da die Stylingphase noch nicht hinzugefügt wurde, hellen Sie bitte die Trennwand damit sie nicht ablenkt. Diese Farbe funktioniert bei mir einfach nicht. Ein sehr helles Grau. Leute wie ddd sollten als vorübergehende Lösung gut funktionieren. Und ja, Sie können Buchstaben im Farbcode hinzufügen. Der Hex-Code enthält nicht nur Zahlen, er kann auch Buchstaben enthalten. Um unsere Befehlskette vom Screen-Tool aus fortzusetzen, werde ich Titel, Preis und Gewicht fett machen . Stellen wir sie auf etwa 30 Pixel ein. Obwohl das ein bisschen viel sein mag, könnte es ein bisschen schwierig sein. Sobald wir ins Rollen kommen, können wir ein besseres Gefühl für unseren Abstand bekommen. Oh, übrigens, du verschiebst den Titel bei Bedarf etwas nach unten. Dies ist jedoch ein optionaler Schritt, denken Sie daran. Wir werden früh genug eine andere Schriftart wählen. Idealerweise sollte der Titel an der Miniaturansicht ausgerichtet sein. Der Preis wartet, ein Symbol sollte unten an der Miniaturansicht ausgerichtet sein, aber als ganze Einheit. Okay, in der Zwischenzeit möchte ich dich daran erinnern, dass ich zwei Designs von dir sehen möchte. Willst du eine perfekte Nachbildung dessen, was ich hier mache , mit genau den gleichen Symbolen, Schriftarten, Größen und Farben , die du im Kurs siehst. Und noch eines, das sind deine eigenen neuen Fotos, neuen Schriftarten, neuen Icons, neues Layout, die Werke. Ich möchte auch andere Inhalte sehen. Bitte posten Sie Ihre Arbeit nicht, ohne ein Wiederholungsraster zu verwenden. Wählen Sie verschiedene Restaurantnamen, Tags, Preise usw. Seien Sie nicht faul. Bevor wir fortfahren, machen Sie bitte diese beiden Menüpunkte, grau 777, bitte. Ich denke, das ist es, was wir bisher verwenden. Und das liegt daran, dass wir zeigen wollen, dass sie nicht aktiv sind. Okay. Mal sehen, was wir hier tun können. Ich muss um Anweisungen bitten. Eine besteht darin, ein Foto anstelle der Aktionsleiste zu verwenden, was hier möglicherweise besser funktioniert als auf Bildschirm Nummer zwei. Und die dritte besteht darin, dem Client eine scrollbare Ablenkung anstelle des festen Drei-Deb-Designs zu bieten. Lass uns das alles im nächsten Video nach der kurzen Pause machen. Danke. 27. Variante für die Details des Restaurants: Willkommen zurück. Lassen Sie uns eine Kopie erstellen und an der ersten Variante für diesen Bildschirm, dem Rechteck der Führungslinienstatusleiste, arbeiten der ersten Variante für diesen Bildschirm, dem Rechteck der Führungslinienstatusleiste und die Aktionsleiste anheben. Wir möchten ein Bild in dieser Region hinzufügen. Aber hier ist die Sache. Wir könnten diesen Bereich noch größer machen, obwohl es nicht so häufig vorkommt. Wir haben diese Option. Von meinen Tests und Nachforschungen. Eine Höhe von etwa 270 wird ziemlich gut funktionieren. Und wieder, obwohl es kein Standard ist, ist es sehr machbar. Die Laschen müssen natürlich zusammen mit allen anderen Gerichten darunter bewegt werden . Denken Sie daran, intelligent zu arbeiten, z. B. um besser zu sehen, woran wir arbeiten, ändern Sie die Hintergrundfarbe in etwas wie Grau. Auf diese Weise wissen wir, wo die Tabs beginnen müssen. Die Idee ist, etwas Ähnliches wie Food Panda zu kreieren. Nehmen Sie sich Zeit, denn es gibt ziemlich viele Schichten. Ich empfehle Ihnen, ein- und auszuzoomen damit Sie mehr Kontrolle haben. Mit dieser Änderung muss wahrscheinlich eines der Gerichte vom Boden entfernt werden. Aber ich denke das ist in Ordnung. Wir haben mehr als genug. Okay, jetzt können wir anfangen, auf dieser Ebene aufzubauen. Fügen wir das Schrankfoto des Restaurants hinzu. In diesem Fall ist es ein Bild von einer Pizza. Ich habe schon etwas vorbereitet. Natürlich können wir den Text sehen, aber lasst uns die vorherige Technik üben. Der doppelte Breiten-Controller spielt mit der Füllung, sodass das Bild durch eine Farbe ersetzt wird. Entscheide dich für reines Schwarz. Nun, verringerte die Opazität auf vielleicht 40 Prozent. Wir brauchen vielleicht mehr, aber wir werden sehen, dass alles in diesem Bereich weiß gemacht werden muss, einschließlich der Statusleistensymbole. Das wird eine Minute dauern, aber lassen Sie mich Ihnen zeigen, wie gerne ich arbeite, besonders wenn ich das nicht aufgenommen habe. Ich sehe, dass die Statusleiste gruppiert ist. Das ist nicht gut. Lassen Sie uns die Gruppierung so aufheben. Als Nächstes ziehe ich ein Feld heraus , um alle diese Ebenen auszuwählen. Überprüfen Sie das Ebenenbedienfeld auf Bestätigung. Das Problem ist, dass ich zwei zusätzliche Wunden habe, das Foto und das schwarze Rechteck, obwohl sie gleich benannt sind, ich weiß, welche welche ist. Okay, halten Sie die Steuerung gedrückt und klicken Sie im Ebenenbedienfeld darauf, um die Auswahl aufzuheben. Das ist jetzt erledigt. Ich kann all diese Typen einfach so auf einmal ändern. Fantastisch. Denken Sie daran, dass wir uns im Iterationsmodus mit Bank-Gauss-Umleitungen befinden, obwohl die Aktionsleiste per se nicht vorhanden ist. Ich werde diese beiden Ebenen immer noch an Stelle positionieren, den Zurück-Pfeil und den Titel. Lassen Sie uns jedoch das Info-Symbol fallen , da es im Mix verloren geht. Und fügen wir die Bewertungselemente irgendwo in der Mitte dieses Bereichs hinzu. Obwohl es nicht erforderlich ist, ist es eine nette Geste. Holen Sie es sich von einem der vorherigen Kunsttafeln, die wir erstellt haben. Der Schlagschatten muss vielleicht intensiviert werden, obwohl es am Ende keinen großen Unterschied machen wird denn hier ist die Sache. Selbst bei einer Deckkraft von 50% ist es kaum sichtbar. Auf einem Telefon. Sie werden den Schatten wahrscheinlich nicht bemerken , wenn alles gesagt ist. Und dann sieht die Variante so aus. Persönlich mag ich es mehr als die saubere Version, aber es ist alles Geschmackssache. Und in diesen Situationen, in denen Sie zwei sehr solide Optionen haben, können Sie den Kunden entscheiden lassen. Ich werde beide behalten und dann können wir mit der scrollbaren Tab-Option fortfahren. Verwenden wir dafür das ursprüngliche Konzept, bei dem die Aktionsleiste Standard ist. Also lasst uns noch eine Kopie machen. Und diese sollten übrigens alle nebeneinander stehen, damit wir sie leicht beurteilen können. Hier besteht der Hauptunterschied darin, dass die Menüpunkte alle auf einer einzigen Textebene platziert auf einer einzigen Textebene sind und nach rechts verschoben werden. Löschen Sie also diese beiden und überlegen Sie sich fünf oder sechs Lebensmittelkategorien. Ich habe etwas in einem Notizblock vorbereitet, aber Sie können sich Ihr eigenes einfallen lassen. Die Sache ist, dass dies alles aus der offiziellen Materialdesign-Richtlinie stammt. Es sind entweder die festen oder die scrollbaren Tabs. Hier bekomme ich jetzt all diese Optionen in Bezug auf scrollbare Tupfer. Wenn Sie die Gesichtsmaße verwenden, könnten Sie sie möglicherweise beflügeln und die Dinge einfach so ausrichten, wie Sie es für richtig halten. Schau es dir einfach an. Oder Sie können die offizielle Messung verwenden. Ich werde mich für diese Option entscheiden und Sie können sie in Aktion sehen. Sie können also sehen, was ist, was. Zunächst muss das Rechteck auf 180 Pixel geändert werden, was laut Anleitung das Minimum ist. Dann müssen Sie es 140 Pixel vom Rand entfernt platzieren. Das sind 52 dp aus dem offiziellen Guide. jetzt daran, wie Sie das einfach machen können. Sie können das x-Feld aus dem Eigenschaftenfenster x für die horizontale Achse verwenden, und es beginnt immer von links. Hervorragend. In Bezug auf meinen ersten Schritt muss dies horizontal am Rechteck ausgerichtet werden. Aber das ist natürlich ein Problem, da diese Ebene viele Menüelemente enthält. In diesem Fall gehe ich davon aus, dass wir auf beiden Seiten ein Rechteck hinzufügen könnten und wir könnten ein manuelles Hin und Her machen. Aber ich werde es mir nur annähern. Wenn Sie fertig sind, ändern Sie bitte die Farbe aller anderen Tabs in ein verwaschenes Grau. Die Farbe des Codes haben wir auf Triple Seven gesetzt , also 777. Es gibt eine Sache, die ich ansprechen möchte. Sie sind vielleicht neugierig auf den Hintergrund und warum ich ihn weiß gelassen habe, weil wir eine cremefarbene Farbe ausprobieren könnten. Aber hier habe ich beschlossen, es nicht zu tun Ich habe es außerhalb der Kamera versucht und es sah einfach nicht richtig aus. Aber entwickeln Sie einfach keine Geheimnisse, die Kinder haben , die aussehen würden, und meiner Meinung ist das schlammig, dreckig, beschäftigt, weit weg von der Luft der Look, den wir kreieren wollen. Jetzt, hier ist die Sache. Eine andere Möglichkeit wäre, Rechtecke zu erstellen, weiße Rechtecke, die für jedes Gericht Karten genannt werden. Aber das ist eine andere Sache, gegen die ich mich entschieden habe. Und die Argumentation ist Beispiel Nummer eins, es würde entweder den Raum unter Druck setzen, weil jeder von ihnen mehr Polsterung und Abstand erfordern würde. Das ist also keine gute Idee. Und zweitens, das ist eine Liste, also gehören Karten eigentlich nicht hierher. Gemäß den offiziellen Materialdesign-Richtlinien gehören alle Artikel zusammen. Und wenn Sie sich an den Vortrag über Wachen erinnern, wurden dort tatsächlich einzelne Gegenstände gezeigt , die nicht unbedingt zusammenpassen. Denken Sie an das Dashboard-Beispiel oder die Notes-App Deshalb habe ich mich am Ende des Tages entschieden, den Hintergrund nicht zu verwenden. Aber ja, da hast du es. Dies sind die Optionen, Vollbildnummer von v. Natürlich müssen wir eine Schriftart oder ein Farbschema auswählen und einige Feinschliffe anwenden. Wir können mit diesem Teil fortfahren, weil ich keine anderen Ideen über den Bildschirm habe. Also lasst uns loslegen. Lass uns die Dinge verfeinern. Wir sehen uns gleich. 28. Die Auswahl der besten Schriftart: Willkommen zurück. Es ist Zeit, über Topographie zu sprechen, und wir werden auf diesen wenigen Bildschirmen denselben iterativen Prozess verwenden . Wählen Sie die besten Versionen aus und Sie sind die Ansicht und stellen Sie sie nebeneinander, damit wir schnell zwischen ihnen hin und her wechseln können . Wenn Sie sich nicht sicher sind, ist das in Ordnung. Aber Blätter wählen drei verschiedene Kunsttafeln aus, damit wir jede Schrift in einer Reihe von Situationen erkunden können . Ich habe meine bereits von hinten getrennt und wir werden an Kopien arbeiten. Wir halten es also einfach mit einer einzigen Schrift, die mindestens zwei Gewichte hat, normal und fett. Es hat mehr, das ist großartig. Ein weiterer Faktor ist jedoch die Größe. Hier ist die Sache. Wir wollen, dass es in Kilobyte so klein wie möglich ist. Wenn wir uns also bei zwei ähnlichen Schriften nicht sicher sind, entscheiden wir uns für die kleinere. Wir suchen nach serifenlosen Schriften, weil wir diesen sauberen, scharfen und modernen Look wollen. Und Serifenschriften sind umso schwieriger. Sie funktionieren nicht so gut. Schließlich ist der entscheidende Suchpunkt die Persönlichkeit. Wir möchten, dass etwas Ähnliches geliefert , abgerundet, interessant und mit ein wenig Persönlichkeit, das dem Design einen Mehrwert verleiht. Vielleicht kratzen Sie sich deswegen am Kopf. Was heißt das, Persönlichkeit? Nun, sagen wir es so. Wenn wir z.B. Arial verwenden gewinnst du kein Design. Die Worte in meinem Buch widmeten vielen Schriften, die keine Persönlichkeit haben. Sie sind einfach, sie erregen dort in keiner Weise Aufmerksamkeit, die Mischung, und das bedeutet , dass sie vielseitig sind und unter vielen Umständen verwendet werden können. Im Kontext eines AB-Designs möchten wir, dass unser Text auffällt, daher ist es sehr wichtig, dass unsere Wahl das Design beeinflussen oder brechen könnte . Nun, ich habe Ariel bereits erwähnt, aber spät bestimmte Gewichte von Open Sans Robo, obwohl Source Sans Pro und vieles mehr in diese glanzlose Kategorie fallen. Das sind die Schriften , die Sie vermeiden sollten. Okay, lass uns mit Google Fonts loslegen. Ich werde serifenlos und handgeschrieben. Und ich werde in die Stadt gehen und nach mindestens vier oder fünf Schriften suchen . Der erste, der meine Aufmerksamkeit erregt, ist Montserrat , der ein Favorit von mir ist. Ich werde diese schnell durchgehen, da die eigentliche Recherche mindestens 20 Minuten dauert. Okay? Jetzt hat Ubuntu eine Menge Layer. Also das sind zwei, ich bin mir nicht sicher , ob du es so aussprichst. Ich glaube, es ist Ubunto. Jedenfalls. Weiter, Nieto, das sieht toll aus, also werde ich es auch hinzufügen, sagt, es ist ein bisschen zu leicht, aber vielleicht hat es andere Gewichte. Und wir können sehen, dass es ziemlich viele Stile enthält. Endlich Treibsand, das ist auch sehr schön. Um die Dinge kurz und knapp zu halten, werde ich hier aufhören. Aber wenn Sie das selbst tun, gehen Sie bitte zu mehr Schriften. Je mehr desto besser. Und während Sie üben, werden Sie anfangen, eine mentale Datenbank mit hochwertigen Schriftarten zu entwickeln . Sie haben entweder einen Händler mit Listen, was Sie als nächstes Projekt haben. Deshalb werde ich keine Zeit damit verschwenden, herumzuscrollen. Ich weiß bereits, wonach ich suche und Sie werden es auch tun, wenn Sie diese Übung durchlaufen, Archiv herunterladen, extrahiert. Und ich zeige Ihnen, wie ich sie schnell nach Größe sortiere, insbesondere wenn Sie viele Schriften ausgewählt haben. In diesem Ordner suchen Sie nun nach dunklem TDF. Und das wird sie alle enthüllen. Wenn Sie gesehen haben, dass die Dateien im Detailmodus angezeigt werden, sollten Sie die Größe und die separate Spalte erhalten. Und sofort können wir feststellen, dass Ubunto viermal so schwer wie Treibsand ist, 400 kb gegenüber 10. Im Moment werde ich es noch nicht von meiner Liste streichen. Aber es muss absolut fantastisch aussehen , um es als Option zu behalten. Und das liegt daran, dass jeder im Apsisbereich sehr sensibel für die Größe seiner App ist. In meiner Firma, in der ich ständig danach strebe, Fett zu reduzieren. Und das würde ganz oben auf meiner Liste stehen. Ladegeschwindigkeit ist unglaublich wichtig, daher ist es ein Muss, die App kleiner zu machen. Gehen wir zu Adobe XD und sehen, was was ist. Ich habe diese bereits in meinem Systemfonts-Ordner installiert . Du musst sie nur kopieren und einfügen. Schauen wir uns Treibsand an. Und hier gibt es keine Magie. Es ist einfach die Magie der Bearbeitung. Sie müssen alle Textebenen auswählen und ändern. Ich werde den Prozess beschleunigen, damit Sie das Endergebnis sehen können. Dies ist ein sehr zeitintensiver Prozess, aber ich möchte, dass Sie üben und ich möchte, dass Sie ins Internet gehen. Wir könnten verschiedene Funktionen in Adobe XD verwenden , um schnell dorthin zu gelangen. Aber an dieser Stelle möchte ich wirklich, dass du es manuell machst. Okay. Also, was ist dein erster Eindruck? Schauen Sie genau hin, zoomen Sie hinein und verkleinern Sie. Ist das ein Gewinner? Ich bin mir nicht sicher. Also lasst uns mit den anderen weitermachen. Bitte beachten Sie, dass diese Änderungen offensichtlich Ihre Ausrichtung ruinieren werden. Möglicherweise müssen Sie hier und da einige Änderungen vornehmen. Nun wieder, das sieht ziemlich solide aus, wenn man bedenkt, dass wir, wenn wir es ziemlich schnell durchlaufen , mit einem höheren Maß an Präzision arbeiten könnten, aber im Moment ist das in diesem Schritt des verarbeiten. Okay, lass uns zur nächsten Schrift gehen. Wir werden die Dinge später in ein paar Vorlesungen bereinigen . Vorerst mal. Lass uns die Dinge durchziehen. So toll, das ist ein bisschen leichter, aber sehen wir es uns in Aktion an. Bitte beachten Sie, dass es eine andere Version namens Nieto Sands gibt. Das wollen wir nicht, nur das normale. Mein Eindruck ist also, dass dies Treibsand ähnelt, aber etwas runder ist. Sie können sehen, dass der Fernseher besonders in der Lieferzeit viel schärfer ist als dieser. Aber es ist ein knappes Rennen. Es hängt wirklich von deinem Gesicht ab. Jetzt zoome ich weiter, während ich alle anderen Schriften ausprobiere. Gott sei Dank für die Macht von allem. Denken Sie daran, dass Sie dies selbst tun und viele Optionen entwickeln müssen, die für Google-Schriftarten verfügbar sind. Es gibt keine Alternative zu harter Arbeit. Versuche so effizient wie möglich zu sein. Sie können die fett gedruckten Textebenen auswählen und die Schrift direkt auf diese Gewichtung ändern. Das bedeutet, dass Sie mit Ihrer Konsolenklicktechnik sehr schnell sein müssen. Egal wie du es machst, es ist wichtig, dass du es tust. Außerdem müssen Sie eine gute Anzahl von Textebenen haben. Wenn wir das getan hätten, fügen Sie einfach den Standortbildschirm hinzu, den ersten. Es wäre nicht relevant. Es ist, als würde man Leute auf der Straße fragen , für wen sie stimmen. Sie sagen Kandidat X. Und dann werden Sie berichten , dass die Studie zeigt 100% der Menschen für den Kandidaten X stimmen wollen . So funktioniert das nicht. Machen Sie sich nichts vor. Um abzustimmen, reicht das nicht. Hier ist es genauso. Nur zwei oder drei Textebenen, das reicht nicht. Man muss es und Kontexte in vielen, vielen Situationen sehen . Verwenden Sie also verschiedene Arten von Texten, Ebenen, Überschriften, Beschreibungen, Unterüberschriften, Zahlen, weißem Hintergrund, gemischtem Hintergrund und so weiter. Beachten Sie jedoch, dass die Schwierigkeit steigt, je mehr Zeichenflächen Sie einbeziehen . diesem Grund haben wir nicht alle Screens erstellt und diesen Schritt am Ende verlassen. Nun, das ist auch möglich. Es ist viel besser, den Stil einer App zu bestimmen. In der frühen Phase. Das macht es viel einfacher , Dinge zu ändern. Hier sind alle Schriften, die ich auswähle, an die Sie diese Datei angehängt haben, und ich schlage vor, dass Sie die einzelnen Optionen erkunden. Xd gibt Ihnen möglicherweise einige Warnungen wenn Sie diese Schriftarten nicht installiert haben. Besuchen Sie zunächst Google Fonts, um Unterbrechungen zu vermeiden. Jede Schrift hat ihre eigenen Stärken. Aber was ich von Anfang an deutlich sehe, ist , dass Ubunto es nicht wert ist. Es sieht gut aus, ist aber nicht viermal so schön wie die anderen. Montserrat ist auch sehr nett. Aber alles in allem denke ich, dass das am besten aussehende Nu Need ist. Es hat viele Gewichte. Es ist ziemlich klein, sodass die App-Größe nicht in die Luft geht. Und es hat dieses spezielle Zink , das es besonders in seiner schwarzen Variante hervorhebt . Es ist ziemlich klobig und rund. In Anbetracht der Zielgruppe denke ich, dass dies eine gute erste Wahl ist. Falls zu einem späteren Zeitpunkt etwas auftaucht, können wir die Schrift leicht auf eine dieser Alternativen ändern die Schrift leicht auf eine dieser Alternativen einige andere untersuchen. Aber damit ist diese Vorlesung abgeschlossen. Wir haben große Fortschritte gemacht und ich möchte Ihnen dazu gratulieren, dass Sie an dem Projekt festhalten. Ich sehe dich gleich. Danke. 29. Definiere und verfeinere den Stil unserer App: Willkommen zurück. Es ist Zeit, ein paar Minuten Zeit zu nehmen, damit wir den AP-Stil definieren können. Wir suchen nach Farben, Schriftgrößen, Zeilenhöhen und so weiter. Also werden wir all dies auf den Rest der Bildschirme anwenden . Ich weiß, das mag langweilig sein, aber wir haben eine lebensrettende Technik und das ist das Asset-Panel. Fangen wir mit dem Farbschema an. Sobald dieses Panel aktiv ist, läuft der Prozess direkt von hier aus wie folgt ab. Nehmen wir an, wir wählen eine Pfeife, sagen wir San Francisco. Wir öffnen den Farbwähler und experimentieren mit verschiedenen Farbtönen, oder? Das Tolle ist, dass wir die Veränderung in Echtzeit sehen können. Um es kurz zu machen, habe ich beschlossen, dieses eins zu eins zu verwenden. Mach f49, was ein sehr dunkler Blauton ist. Ich sage die genauen Farbcodes, damit Sie mitmachen können. Aber ehrlich gesagt habe ich einfach mit dem Farbwähler herumgespielt , bis ich glücklich war. Das ist fast schwarz, aber es ist ideal für viele Textebenen. Wie wenden wir es jetzt an? Zuerst haben wir das Assets-Panel hinzugefügt. Gehen Sie zur Farbe und klicken Sie auf dieses Plus-Symbol. Und einfach so haben wir das Farbfeld hier, um Ihnen die Leistungsfähigkeit des Assets-Panels zu zeigen . Es gibt ein kurzes Beispiel, wie diesen Titel Desert Heaven , der gerade schwarz ist. Gehen Sie nun zum Assets-Panel und machen Sie es blau. Das ist schneller als die Verwendung des Füllbereichs im Eigenschaftenfenster. Aber das ist der wahre Grund, warum es dieses Panel gibt , das unglaublich wichtig ist. Sagen wir, der Kunde mag diese Farbe nicht. Stattdessen will er lesen. Okay, los geht's. Sie klicken mit der rechten Maustaste auf das Farbfeld und wählen Bearbeiten. Lassen Sie uns jetzt Änderungen vornehmen. Und so einfach ist das. Beide Ebenen werden automatisch aktualisiert. Zwei Schichten sind keine so große Sache. Stellen Sie sich vor, wir haben 200 Bildschirme und fast 1.000 Textebenen. Hier ist das Asset-Panel ein absolutes Muss. Drücken wir also Control Z, um das rückgängig zu machen. Um fortzufahren, wählen Sie bitte drei Kunsttafeln aus und verschieben Sie sie separat, falls Sie dies noch nicht getan haben. Wir müssen die Dinge nur ein bisschen aufräumen. Ich möchte den Standortbildschirm, den Hauptlistenbildschirm, auf dem die Bewertung am Rand schwebt, auf der rechten Seite. Und schließlich die Jungfrau, wo wir scrollbare Tabs haben. Also insgesamt drei Bildschirme und wir können unser Asset-Panel aufbauen. Okay, konzentrieren wir uns auf den zweiten. Der Titel ist blau, dargestellt in neuem Nieto Schwarz für die Größe, die wir für D wählen könnten. Aber ich denke, ein kleinerer ist vielleicht besser, ich denke, vorher ist eine gute Wahl. Das Styling sollte auch auf den Restauranttitel angewendet werden . Nun, im Assets-Panel können Sie das auch tun. Gehe runter zu Charakterstilen und triff dieses Plus. Und einfach so wirst du das neue Nieto 34 sehen. Mein Rat ist, dass Sie es umbenennen, indem Sie mit der rechten Maustaste klicken , es abrufen, Titel nennen oder so ähnlich. Als nächstes wenden wir es an. Klicken Sie bei gedrückter Ctrl-Taste auf, um das auszuwählen, und klicken Sie dann auf den Eintrag, um es zu testen Lassen Sie uns eine dramatische Veränderung vornehmen. Klicken Sie also mit der rechten Maustaste darauf und das Assets-Bedienfeld, klicken Sie auf Bearbeiten und machen Sie es zB 50 Pixel oder so etwas Und ja, es funktioniert. Drücke Escape und dann Control Z, um Rückgängig Also lasst es uns von oben nehmen. Der Titel ist fertig, oder? Aber was ist mit all diesen Icons? Ich mag diese Orange, also lass es uns ausprobieren. Schnappen Sie sich das Hamburgermenü und lassen Sie es uns auf die folgenden Farben Gold einstellen, F , F, E, C, Z, Z , was ein sehr schönes intensives Orange ist. Fügen Sie es dann dem Assets-Bedienfeld hinzu. Mein Plan ist es also, es auf all diese anderen Icons anzuwenden. Das Drop-down-Menü, der Filter und die Suche. Verwenden Sie Control, um die erste auszuwählen. Fügen Sie dann shift zur Mehrfachauswahl hinzu, und sie sind orange. Liebevoll. Bitte tragen Sie die gleiche Farbe auf die Etiketten unten rechts auf. Wie Sie sehen, mit minimalem Aufwand bei der Änderung des Designs und ohne Zeitaufwand. Im Grunde machen wir gerade mit dem Branding jedes einzelnen Artikels. Die Tags waren also bereits orange, aber wir wollten Adobe XD mitteilen, dass dieses spezielle Styling über das Assets-Bedienfeld angewendet werden sollte . Im Grunde verbinden wir die Punkte mit Verbinden der Ebene mit dem Assets-Bedienfeld. Was ist mit der Lieferzeit? Nun, das muss in der neuen Nieto Regular 24 angezeigt werden, die Pixel in einem ziemlich dunklen Grau. Lass uns mit 777 gehen. Wir können diese Farbe sowie den Charakterstil hinzufügen. Ich denke, es ist sehr wahrscheinlich , dass wir dies als Haupttext verwenden, also die Beschreibung jedes Gerichts. Benennen wir es also in body um. Ich möchte klarstellen , dass ich mir nicht 100% ig sicher bin. Ich ändere vielleicht meine Meinung. Wir werden sehen, wie wir weitermachen, aber da wir das Asset-Panel haben, können wir unsere Meinung über das Rating schnell ändern. Lass uns mit dem neuen Nieto 20 gehen. Also ziemlich klein. Wir können es grau machen, das ist 777-Farbcode wie so. Wählen Sie dann den 92-Prozent-Teil aus und machen Sie ihn schwarz. Schwarz in Bezug auf das Gewicht übrigens, weil wir für die Farbe tatsächlich grün bleiben. Sie können das Emoji dafür probieren, Sie können das Emoji dafür probieren weil wir die Schriftart und die Ausrichtung geändert haben ergibt keinen Sinn. Aber das ist eine schnelle Lösung. Eine Frage, die Sie vielleicht stellen, ist Chris Wie haben Sie sich für 34. Schwarz für die Titel entschieden? Warum nicht 30, nicht 40? Und die Antwort ist ziemlich einfach. Ich habe sie ausprobiert. Ich habe das Design auf mein Handy hochgeladen und vergleiche sie zuerst untereinander, dann mit anderen Apps, die wir zuvor analysiert haben, bevor die beste Wahl zu sein schienen. Das gleiche gilt für alle anderen Größen. Okay, schneller Vorlauf, und das ist unser Ergebnis. So sollte dein Projekt in dieser Phase des Spiels aussehen. Lass uns eine kurze Pause machen. Danke. 30. Übe deine Geschwindigkeit: Willkommen zurück. Wir sind auf Bildschirm Nummer zwei, und ich möchte hier all diesen Dummy-Inhalt aller Ressourcen ersetzen , die ich für dieses Raster vorbereitet habe. Zuerst die Fotos, schnapp sie dir und ziehe sie über den ersten Eintrag. Wenn Sie der Meinung sind, dass einer von ihnen nicht richtig eingestellt ist, doppelklicken Sie darauf und Sie können sie neu positionieren oder sogar manuell ihre Größe ändern. Als nächstes ziehe ich die Titel hinein. Denken Sie daran, dies ist nur eine Standardtextdatei. ist nichts Besonderes. Okay? Die Position ist nicht in Ordnung. Aber der Hauptpunkt ist folgender. Wir müssen zuerst den Text ändern, um eine Zeile zu schreiben. Und erst jetzt können wir es 30 Pixel vom Rand entfernt richtig positionieren . Und das liegt daran, dass sich die Länge ändert. Fantastisch. Schließlich die Abstimmungen. Wenn Sie den Inhalt ziehen, das Styling ändert sich das Styling und Sie können nichts tun, um dies zu verhindern, außer zwei separate Ebenen zu haben. Ich will das nicht tun, also werde ich es so lassen wie es ist. Falls ich Zeit habe, ändere ich vielleicht jeden Eintrag manuell, aber zähle nicht darauf. Du fragst dich vielleicht, Chris, warum machst du das alles? Und es ist ganz einfach. Einerseits ist es eine großartige Praxis. Sie müssen Tag für Tag Sport treiben und vorbereitet sein. Zweitens ist es wichtig, dass wir dem Kunden und dem Entwickler etwas gezeigt haben, auf das wir stolz sind gefälschte, sich wiederholende Inhalte zu haben, viel Lorem Ipsum, es bricht einfach die Magie. Deshalb muss ich es tun. Und nur um es nach Hause zu bringen, verringern wir die Größe des Fotos um 40 Pixel. Ich denke, das ist nötig. Klicken Sie also bei gedrückter Ctrl-Taste darauf und lassen Sie uns nach ihnen suchen. Drei Sechstel, gehen wir zu 320. Und für die Karte für sie für 70 gehen wir zu 430. Natürlich ist nichts mehr ausgerichtet, aber wir wissen, dass Shift uns hilft, Dinge und dann Pixelinkremente zu bewegen . Wir brauchen also vier Tabs. Die Frage ist, müssen wir die Größe ändern? Nein, aber wie gesagt, ich möchte nicht die harte Arbeit investieren und sehen, ob ich das Design verbessern kann, ob ich es noch besser machen kann. Und ich denke, das sieht besser aus. Okay, wenn Sie bereit sind, gehen wir zum Bildschirm über, um mit dem Titel zu beginnen. Wählen Sie den Charakterstil aus und wenden Sie ihn an, der von Bell genau so genannt wird. Für den Zurück-Pfeil und das Informationssymbol müssen diese orange sein. Hervorragend. Zum Schluss wählen wir alle diese Elemente aus und richten sie korrekt aus. Wunderschön. Wenn Sie nach unten gehen, muss die aktive Registerkarte ebenfalls orange sein, damit Sie wissen, was damit zu tun ist. Okay. Das Rechteck ist jetzt orange. Cool. Für die Tabs. Nun, um ehrlich zu sein, bin ich mir nicht sicher. Fangen wir mit dem Titelstyling an. Jetzt. Natürlich ist das zu groß, aber wir können es wie zuvor auf vielleicht 26 Pixel reduzieren, die inaktiven Tabs erhalten die blaue Behandlung. Also müssen wir das in Ordnung bringen. Folgendes schlage ich vor. Wählen wir alle anderen Elemente aus und platzieren sie in einer separaten Textdatei. Dieser muss wie zuvor auf Nieto 26 gesetzt werden, aber in der regulären Form sollten Sie niemals die Größe der Schriftart ändern, sollten Sie niemals die Größe der Schriftart ändern auch wenn sie inaktiv ist. Es ist keine gute Praxis, nur das Gewicht und die Farbe. Was den aktiven betrifft, sollte dieser orange gemacht werden. Jetzt ist die Sache. Möglicherweise wissen Sie nicht, wie viel Platz Sie zwischen Pasta und Pizza lassen sollten. Schließlich wollen wir die Mitte, den Raum zwischen Pizza und Risotto, oder? Da es sich jedoch um eine einzelne Ebene handelt, können Sie nicht herausfinden, wie hoch die tatsächliche Entfernung ist. Nun, hier ist der Hack. Fügen Sie das Rechteck zwischen diesen beiden hinzu und sehen Sie sich die Breite an. Sobald Sie diesen Wert haben, ist es mit der ausgewählten Ebene ganz einfach. Halten Sie die Alt-Taste gedrückt und überprüfen Sie die vorhandene Messung. Dann stimmen Sie es mit Ihren Pfeiltasten fein ab. Vielleicht wechseln Sie und schon kann es losgehen. Okay, gehen wir die Namen der Gerichte runter. Nun, ich denke, die sollten die gleichen sein wie die Registerkarte. Das ist also Nadelschwarz, 26 Pixel, aber dieses Mal blau, was ich liebe, ist die Tatsache, dass dies ein Gitter ist, Wiederholungsraster. Also ändert sich alles. Es ist also ziemlich einfach , die Größe zu beurteilen. Damit kannst du ganz einfach herumspielen. Aber ich bin wirklich glücklich damit. Für die Beschreibung verwenden wir das Körperstyling. Nieto ist eine größere Schriftart als die Standardschrift, aber ich möchte nur drei Textzeilen beibehalten. Ändern Sie die Größe bei Bedarf. Für den Preis und warten Sie, lassen Sie uns das 26 betitelte Styling anwenden und die Position Wanted Bottom an der Miniaturansicht überprüfen . Aber hier ist die Sache. Möglicherweise müssen Sie es im Auge behalten. Möglicherweise müssen Sie sich dem annähern. Und das liegt daran, dass diese spezielle Schriftart oben und unten ziemlich viel zusätzlichen Platz hat . Und du kannst nichts dagegen tun. Die Ausrichtung zweier Welten wird also nicht gut funktionieren. Ich denke allerdings, dass der Preis in Orange angezeigt werden sollte. Ja, ich denke das ist meilenweit besser. Schließlich sollte das Hinzufügen in den Warenkorb ebenfalls orange sein. Schließlich ist es eine Aktion und sie muss auffallen. Und ob Sie es glauben oder nicht, ich denke wir haben mit diesem Bildschirm tatsächlich fertig. Wenn Sie noch etwas bearbeiten möchten, ist jetzt die Zeit dafür. Z. B. das Gewicht des Produkts. Ich bin mir nicht sicher, ob das es verdient, so klobig zu sein. Es ist nicht so wichtig. Machen wir es also eher fett als schwarz. Die Sache ist, das Assets-Panel ist absolut fabelhaft. Und du könntest für jede Kleinigkeit einen Eintrag machen. Wie Sie vielleicht bemerkt haben. Das habe ich aber nicht getan. Ich habe nicht jedes einzelne Styling zum Assets-Panel hinzugefügt , und das ist beabsichtigt. Ich möchte nicht zu viele Dinge hinzufügen und mich damit verwirren. Es ist Zeit für eine kurze Pause. Danke. 31. Beende den ersten Bildschirm: Willkommen zurück. Lassen Sie uns den ersten Bildschirm behandeln, den Standort. Nehmen wir es von oben und stellen sicher, dass wir auf derselben Seite sind. Das Symbol muss 18180 sein, reinweiß. Platzieren Sie es 80 Pixel vom oberen Rand entfernt. Dies ist eine großartige Gelegenheit , das y-Feld zu verwenden. Denken Sie daran, dies ist die vertikale Achse und sie beginnt von oben. Der Name der App, in die live geschrieben werden muss. Wählen wir es auf folgende Weise. Ich denke, Einheit komplett schwarz, 70 Pixel in reinem Weiß. Oh, übrigens, ich denke, es ist am besten, wenn wir auch White- und Asset-Panel hinzufügen . Es ist nur eine schnelle Sache. Wenn wir in diesem Bereich ständig die Maus bewegen , ist es am besten, auch hier Weiß zu haben. Okay, jetzt zentriert auf der Leinwand. Und platzieren wir es etwa zehn Pixel vom Symbol entfernt, Geben und Nehmen. Das ist dann das nächste Mal. Ich denke, man kann mit Sicherheit sagen, dass Orange die Hauptaktionsfarbe sein wird. Wenden wir es auf diese beiden Schaltflächen an. Was ist mit dem Text? Nun, lassen Sie uns das zunächst ändern, um Restaurants zu zeigen , was mehr als aussagekräftig ist. Beginnen wir mit 26 Titeln und sehen, was die Größe selbst ist ziemlich okay, aber es ist ein bisschen zu klobig für diese kleine Größe. Lassen wir es uns also auf fett reduzieren. Und das macht tatsächlich einen großen Unterschied. Ich bin mir nicht sicher, ob Sie es durch die Aufnahme sehen können, aber glauben Sie mir, es ist ziemlich umfangreich. Überprüfe es auf deinem Handy und die Sache, die du mir zustimmst, okay. Zentriert den Text und zentriert dann die Schaltfläche. Wenn du das noch nicht getan hast. Das Problem, das ich hier habe, ist, dass die Hierarchie unklar ist. Also lasst uns das durchdenken. Wir haben drei verfügbare Aktionen, oder? Sie können den Standort und dann eine Sendenschaltfläche eingeben, diesen Schritt überspringen und zum nächsten Bildschirm übergehen, oder schließlich Nummer drei, ein Konto erstellen oder sich anmelden. Im Allgemeinen können diese als zwei separate Richtungen betrachtet werden , Login und Registrierung, aber ich werde sie kombinieren, um es einfach zu halten. Wie sollen wir also vorgehen? Es ist zwar in Ordnung, zwei Buttons mit der gleichen Wichtigkeit zu haben , aber ich denke, es ist am besten, wenn wir ein anderes Styling anwenden , um ein Konto zu erstellen. Soweit ich aus dem Brief verstehe, der Registrierungsprozess gar nicht so wichtig. Sie können die Restaurants sehen, ohne sich zu registrieren. Das bedeutet also, dass Show-Restaurants Priorität haben. Dies ist die Nummer eins und dieser Bildschirm. Machen wir es also super breit, 656. Okay, wir sollten auch die Höhe auf 90 Pixel erhöhen , nur damit es besser auffällt. Die Texte übrigens noch einmal zentriert . Im Moment muss das Feld mit den Schaltflächen übereinstimmen, die wir haben. Also 656 auch, die Dinge ändern sich schnell, aber denken Sie so oft an die Balken wie Sie müssen. Für den Text. Dies wird offiziell als Hinweis bezeichnet. Bitte tragen Sie das Styling der Körpertexte auf Wenn der Benutzer das Feld berührt, geht die Hand weg, zentriert sie und lässt etwa 30 Pixel zu seiner Linken zurück. Das sollte okay aussehen, und ich finde es ganz nett. Unsere Fortschritte sind soweit anständig, aber lassen Sie uns das Tempo beibehalten. Ich habe die Aufnahme angehalten und dem schönen GPS-Symbol gesucht. Hier ist es, du hast es angehängt. Die Größe beträgt 28 mal 40 Pixel. Wenn Sie Ihre eigene Version erstellen, stellen Sie bitte sicher, dass Sie Ihre eigenen Icons finden. Machen Sie es orange, weil Sie darauf tippen können damit die App Ihre Adresse automatisch abrufen kann, platzieren Sie sie auf der rechten Seite des Feldes und lassen Sie 30 Pixel auf der rechten Seite. Apropos 30, das ist es, was ich zwischen diesen beiden Punkten lassen möchte . Wählen Sie also das Feld aus, geben Sie die Nikon an und gruppieren Sie sie zusammen. Dies wird es einfacher machen, es bei Bedarf neu zu positionieren. Wie gesagt, lassen Sie 30 Pixel zwischen den beiden und platzieren Sie sie irgendwo in der Mitte des Bildschirms. Nehmen Sie sich Zeit damit, bewegen Sie sie herum und lassen Sie sich von X d helfen. Okay, denken wir, das ist der wichtigste Teil auf dem Bildschirm. Aber was kommt dann als Nächstes? Ich denke, das Erstellen eines Kontos steht an zweiter Stelle. Jetzt könnten wir ihm auch einen orangefarbenen Knopf geben, aber ich denke, das wird mit Show-Restaurants konkurrieren . Als solches. Ich denke, es ist am besten, wenn wir es am unteren Bildschirmrand platzieren. Aber zuerst, lasst uns gehen und diesen Schritt für das Styling aus dem Weg räumen. Lass uns das machen. Erhöhen Sie die Höhe auf 100 Pixel, damit Sie sie nicht verpassen können. Das ist nicht gerade riesig, aber etwas größer als der Hauptaufruf zum Handeln. Machen Sie den rein schwarzen Hintergrund seiner Deckkraft auf 60 Prozent. Keine Grenze dafür, nur für den Fall, dass du es noch an hast. Die Idee ist, ihm viel Platz zu geben, ohne dass es jedoch zu sehr auffällt. Deshalb habe ich mich für Schwarz entschieden und die geringe Deckkraft sorgt dafür, dass es sich über die gesamte Breite des Bildschirms erstreckt. Das bedeutet also 720 Pixel. Richten Sie es richtig aus und Sie sollten jetzt sehen, wohin ich damit gehe. Wenn Sie fertig sind, ändern Sie bitte den Text, um ein Konto zu erstellen, oder melden Sie sich mit einem großen C an. All diese Details sind am Ende des Tages wirklich wichtig. Zum Schluss senden wir die rote Verschiebung M, wobei M für Mitte steht und Shift C mit C für Mitte steht. Aber natürlich müssen beide Ebenen das auswählen. Gutes Zeug. Insgesamt ist dies ein gutes Design für die Reaktion im zweiten Jahr. Lassen Sie uns in einer kurzen Pause einen guten Blick auf unser Design werfen . Danke. 32. Ein neuer Stil der Taste, um einen tollen Fluss zu haben: Willkommen zurück. Wir haben noch einen Hauptpunkt übrig. Überspringe diesen Schritt. Ich benutze etwas Neues. Beginnen Sie mit einem Rechteck , das 300 mal 90 Pixel groß ist. Behalten Sie den äquivalenten Radius wie zuvor bei, fünf Pixel. Das steht außer Frage. Mischen Sie niemals diese Werte. Du wählst einen aus und bleibst dabei. Wenn es dir nicht gefällt, ändere es in zehn, aber du musst es überall ändern. Jetzt zentriert auf der Kunsttafel. Und hier ist die Sache, bitte deaktiviere die Füllung. Was wir tun werden, ist eine Schaltfläche namens Ghost Button zu erstellen . Ghost, weil es keinen Körper hat. Deshalb deaktivieren wir die Füllung. Stattdessen verwenden wir einen dicken Rand, drei Pixel, reines Weiß. Bitte stellen Sie übrigens sicher, dass Ihre Schreibweise korrekt ist und dass Sie jeden Buchstaben, den ersten Buchstaben des Wortes, groß schreiben, das heißt , alles richtig zentrieren. Aber hier ist die Sache. Möglicherweise ist der Kontrast zum Hintergrundbild nicht ausreichend, insbesondere wenn Sie ein anderes Foto verwenden. Nun, sicher, dass wir die Opazität erhöhen könnten, aber selbst das reicht vielleicht nicht aus. Und das Wichtigste ist, dass , wenn Sie keine Füllung haben diese Schaltflächen unglaublich schwer auszuwählen sind, wenn Sie keine Füllung haben. Es. Folgendes schlage ich vor. Aktivieren Sie das Feld wieder und machen Sie es rein schwarz, dann verringern Sie seine Opazität auf etwa 30 Prozent. Also. Möglicherweise müssen Sie das Ebenenbedienfeld aktivieren und die Reihenfolge dieser Ebenen ändern. Aber das ist kein Problem oder die Taste der quadratischen Klammer. Übrigens hasse ich es , dass ich sowohl mein Ebenen-Panel als auch mein Assets-Panel gleichzeitig sehen kann sowohl mein Ebenen-Panel . Es ist Jahre her und ich denke, es wird uns bald schwimmende Paneele geben. Ziemlich schade. Zurück zum Design. Analysieren wir das. Das Logo ist also oben. Sie schauen es an und dann bewegen Sie sich in der Mitte nach unten, Sie haben den Hauptbereich in den Sie Ihren Standort eingeben müssen. Tolles, cooles Zeug. Es ist groß, hell, es fällt auf. Jetzt ist die Frage, können wir weitere zusätzliche Details hinzufügen , damit es noch schöner aussieht? Nun, eine Idee ist, ein Symbol in den orangefarbenen Knopf einzufügen . Aber lasst uns stattdessen etwas Interessanteres machen, einen Bluteffekt. Wählen Sie also das orangefarbene Rechteck aus und aktivieren einen Schlagschatten falls Sie einen Rand haben, deaktivieren Sie ihn bitte. Wir brauchen es nicht für die Farbe. Wir wollen nicht, dass der Schatten schwarz ist. Verwenden Sie also die Pipette und wählen Sie diese Orange aus. Beachten Sie, dass Sie das Asset-Panel in diesem Fall nicht verwenden können. Für die Einstellungen. Ich habe das 1 Million Mal gemacht. Also hier ist, was am besten funktioniert, fünf für das Y-Feld und 15 für das B. Stellen Sie schließlich die Opazität auf etwa 60 Prozent ein. Sobald Sie die Auswahl aufheben, werden Sie sehen , was ich meine, einen Blutungseffekt. Im Grunde ist es ein neonähnlicher Effekt. Es fällt ziemlich auf. Und es ist nur ein zusätzliches Detail , das manche Kunden lieben könnten, oder sie könnten das sagen. Aber auf jeden Fall werde ich es verlassen, weil ich still bin. Sehr geschätzt. Okay. Was sonst? Nun, ich mag die Position, diesen Schritt zu überspringen, nicht. Es schwebt einfach herum. Wir könnten es näher bringen, aber ich möchte lieber nicht versehentlich darauf tippen. Also lasst uns das stattdessen tun. Holen Sie sich das Typwerkzeug, Hotkey D und Schreiben oder Nadel, fett, 26 Pexel, reinweiße Scheidung. Das ist, oder alternativ, zentrieren Sie es horizontal und bewegen Sie es 50 Pixel über die orangefarbene Schaltfläche. Hier ist die Sache, die wir in allen Fällen Symmetrie wollen, es ist etwas, das Sie immer anstreben sollten. Wenn wir also 50 oben haben, brauchen wir 50 zwischen dem Überspringen dieses Schritts und diesem Artikel hier. Halte Alt gedrückt und messe die Dinge aus Dann benutze deine Pfeile auf deiner Tastatur. Okay, das fängt Form an, aber es ist noch nicht das Ende. Mach die Zeile gut, Hotkey L. Lass uns etwas rechnen. Wir wissen, dass diese Typen 656 Pixel breit sind. Ich möchte also den Teiler hier haben, aber ohne dieses Wort zu überschreiten, denke ich, dass 50 Pixel schon genug sind. Also lass uns das machen. 656 -50 ist 606/2, das sind 30 zu B. Okay, ziehen wir eine Linie heraus und ändern dann die Größe dieser 303 Pixel. Halten Sie die Umschalttaste gedrückt, wenn Sie eine Linie hinzufügen, um eine gerade Linie 1303, rein weiß, Linien haben keine Füllungen, versuchen Sie also nicht, das Assets-Bedienfeld darauf zu verwenden. Es wird nicht funktionieren. Machen Sie es natürlich im Eigenschaftenfenster weiß. Und für die Dicke nehme ich zwei Pixel. Einer ist ein bisschen zu klein , um so viel zu sein. Jetzt duplizieren Sie es, ziehen Sie Control D oder Alt und platzieren Sie es auf der anderen Seite. Es sollte ziemlich einfach auszurichten sein. Du hast den orangefarbenen Knopf oben, also benutze ihn bitte. Wenn Sie bereit sind, zentrieren und gruppieren Sie alles zusammen mit Control G. Und ich denke, dieser ist wirklich der Kuchen. Es sieht interessant aus und hilft dem Benutzer, durch seine Optionen zu navigieren. Okay, machen wir eine Pause und danach machen wir eine komplette Analyse. Danke. 33. ÜBERSICHT: Willkommen zurück und herzlichen Glückwunsch. Sie haben gerade den ersten Teil unserer App für die Lieferung von Lebensmitteln fertiggestellt. Ich weiß, es war eine ziemliche Reise, aber hoffentlich sind Sie an diesem Punkt mit minimalem Nägelkauen, Fluchen und Kopfkratzen angekommen diesem Punkt mit minimalem Nägelkauen, . Der Prozess ist am Anfang etwas schwierig. Sehr ähnlich einem 1.000 v. Chr. Puzzle. Aber wenn Sie Stück für Stück Fortschritte machen, das gesamte Bild klarer und Sie können an Geschwindigkeit gewinnen. Ich kann den Wert von Patienten und Engagement nicht betonen. Diese Liefer-App ist ein reales Projekt, das Sie in Ihrem Job stoßen können, als die Designagentur oder auf einer freiberuflichen Plattform. Das ist nicht meine Prahlerei, aber die meisten entwickelten Tutorials zeigen Ihnen keinen Rückfall. Es sind nur schöne Fotos und das war's. Es gibt keinen Gedanken oder die Funktionalität dahinter. Und das ist, als würde man Fahrrad fahren lernen, wenn die Welt voller Monstertrucks ist. Während der Lernprozess schwierig ist, bin ich fest davon überzeugt, dass der Kampf umso einfacher ist, je härter das Training ist. heißt, wenn Sie den Job bekommen, können Sie wirklich glänzen, weil Sie diese Ausbildung absolviert haben. Wir haben noch einen langen Weg vor uns. Aber schauen Sie, wo wir angefangen haben, ein Drahtmodell , das Layout, dann einige Designexperimente, wir wählen eine Schrift oder ein Farbschema und wir lösen die eigentlichen Probleme, indem wir versuchen, so viele Restaurants und wie viele Gerichte wie möglich, ohne dass der Bildschirm voll aussieht. Wir haben über das richtige Seitenverhältnis für die Fotos gesprochen , die Befehlskette, auch bekannt als Hierarchie. Wir verwenden Karten, Symbole, verschiedene Topographietechniken und wir haben gelernt, das Asset-Panel zu verwenden. Nochmals von ganzem Herzen, herzlichen Glückwunsch, dass du es so weit geschafft hast. Bleib bei mir und du wirst es noch besser machen. Der erste Bildschirm ist jedoch wahrscheinlich der schwierigste. Das liegt daran, dass Sie Ihren Standort in dieses Feld eingeben können , aber Sie können auch das GPS Ihres Telefons verwenden. Sie können diesen Schritt auch überspringen. Und die App zeigt Ihnen die Restaurants aus dem Labor, nur die Stadt. All dies steht in dem Brief und ich hoffe, dass Sie es lesen. Schließlich können Sie sich registrieren oder einloggen. Zu wissen, wie man all diese Aktionen strukturiert, ist kein Scherz. Es ist keine Kleinigkeit. Wir haben sie nach ihrer Wichtigkeit sortiert und dann entsprechende Designentscheidungen getroffen. Deshalb verwenden wir den Ghost-Button, deshalb haben wir z.B. die Deckkraft für dieses Rechteck verringert. Alles in allem nochmals herzlichen Glückwunsch, fantastische Arbeit, um hierher zu kommen. Wir sehen uns in einer Sekunde.