Pro-Android-Appdesign mit Adobe XD und Google Materialdesign

1. ♥ Was in diesem Bereich von Adobe XD Android Designkurs angibt.: Hallo, alle. Willkommen zu meinem Kurs über Android-Materialdesign mit Adobe X'd Und wir werden uns alle Materialdesign-Spezifikationen von Google Material entworfen, um Point und ich werde Ihnen zeigen, was sind die verschiedenen Spezifikationen aus verschiedenen Tasten Liste Artikel und wie Sie mithilfe von Google-Materialdesign-Richtlinien und -Einschränkungen entwerfen und fantastisch aussehende APS erstellen können. So werden wir alle Möglichkeiten diskutieren, die auch in Google-Material zu zeigen, das ist die neueste Version von Google Material Design. Jetzt sind die Werkzeuge, die wir verwenden werden, dass X'd gehorchen. Wenn Sie ein großes haben in Adobe X'd, sollten Sie meine anderen Kurse oder andere Kurse über Toby X'd nehmen, weil ich nicht werde, um Ihnen die Grundlagen angeboten über 60. Also, wenn wir Adobe X'd verwenden, um hauptsächlich zu entwerfen und für die Übergabe von Entwicklern entwickelt , werden wir Siplin Gott sind Sie verwenden. Und auch werden wir Rauch oder andere Online-Tools verwenden, um neun Patch-Assets für Ihr Android zu generieren . APS. Wenn du nichts über neun Pass weißt, mach dir keine Sorgen. Wir werden das ganze Zeug in diesem Kurs lernen. Und wenn Sie mit Adobe vertraut sind, eigentlich sollten Sie in der Lage sein, genial aussehende Android abs zu entwerfen und wir werden Design und Android-App, die im Grunde eine tatsächliche Android-App für Ärzte in juke it ist. Das ist es, was wir die Übung gestalten werden. Und davor werde ich in eine Menge Details zu verschiedenen Spezifikationen graben. Wie Sie verschiedene Farben verwenden können, wie Sie Farbschemata und Farb-Teaming erstellen können, was eine neue Ergänzung zu Google-Material ist, das darauf ausgelegt ist, das Teaming genannt wird. Also werden wir uns über AB mit all der Farbe, sekundären primären alle ihre Sachen. Also werde ich dir in diesem Kurs eine Menge Dinge beibringen. Wenn Sie also Fragen oder Kuriositäten haben, was Probleme in Bezug auf diesen Kurs sind , können Sie mich kontaktieren. Du kannst mir eine E-Mail schicken, du kannst mir eine Nachricht schicken. Ich bin sehr geantwortet. Ich wirklich, dass in 24 geboren sind, so dass Sie es wissen müssen. Mach dir keine Sorgen um den Sport, den ich dir geben werde. Also werden wir auch mehr Lektionen erstellen, wenn Sie irgendwelche Probleme bekommen oder Sie haben einige Anfragen aus der Erstellung einer anderen Lektion, Ich werde das für Sie erstellen. Lassen Sie uns also anfangen, Android APS zu entwerfen, wie wir unsere Android-App abgeben können. Store-Entwickler. Lasst uns das gemeinsam lernen. Wir sehen uns bald in diesem Kurs. 2. ♥ Wie sieh dir diesen Kurs an?: Das ist also der wichtige Teil. Wenn Sie bereits mein Android-Design mit Fotoshop-Kurs angesehen haben, dann werden Sie viele Übungen und viele verschiedene Lektionen überspringen, weil sie in diesem zusätzlichen Kurs dupliziert werden. Also die Vorträge auf leben mit und sie haben das Herz und den Start aus ihrem Titel, Sie werden auf Lee sehen. Diese dies ist spezifisch für nur die Schüler, die meine angesehen haben oder bereits meine Klasse gesehen haben, die ah ist, Android-Materialdesign mit für den Shop. Also, äh, wenn Sie das ganze Glas gesehen haben, haben Sie das Glas perfekt gemacht. Dann überspringen Sie die Vorlesungen. Also die einzigen Vorträge, die Sie gehen, um unsere zu sehen, die einige harte Icon am Anfang haben ihren Titel. So können Sie in der rechten Leiste mit den Vorlesungstiteln sehen sind Sie brauchen toe Sehen Sie sich einfach die Lektionen an, wo sie das Herz haben. Ich bin am Anfang gegangen, also werde ich dir meinen Bildschirm zeigen. Was bedeutet dieses Herz-Symbol und wie gehst du auf den Fuß? Sehen Sie sich einfach diese harten Symbole an. Wenn Sie bereits meine und richtige Material Design Gerichte mit Fotoshop gesehen haben, weil einige den Vorträgen sind sie die gleichen 50%. Fast das Material. Wie ist das Google-Materialdesign? Wie all diese Dinge funktionieren. Sie sind ähnlich. Dies sind die ähnlichen Inhalte in Bord der Kurse. Also will ich deine Zeit nicht verschwenden. Wenn Sie meinen Kurs bereits angesehen haben, überspringen Sie die Vorlesungen und sehen Sie sich nur die Vorträge mit dem Herzen an. Okay, das ist also der Zweck dieser Lektion. Also werde ich dir meinen Bildschirm zeigen. Wie ist das harte Symbol Sieht aus. Also lasst uns auf den Bildschirm wechseln. Ok. Also, ähm hey, wie Sie sehen können, füge ich gerade diese Lektionen in meiner Ansicht von Mr Dror Lehrern hinzu. Und du kannst das sehen. Es gibt ein kleines Herz. Ich gehe zu Beginn dieser Lektion. Das meine ich also. Also, wenn Sie das schwer sehen, ich habe es bedeutet, es ist die neue Lektion und es ist aufgelistet. Was gehorcht X'd. Und wenn Sie bereits meine andere Klasse gekauft haben, ist dies die andere Lektion als die andere. Also müssen Sie es so beobachten, wenn Sie es haben. Wenn Sie diese Klasse von Grund auf neu starten und Sie keine von meinen anderen Kursen gewaschen haben oder meine anderen Klassen am Ende entworfen sind, dann können Sie einfach normal zuschauen. Okay, ich hoffe, du hast das Konzept von diesem Herzen verstanden und wie ich es bin. Du musst diese Klasse waschen. Fahren wir mit der nächsten Lektion fort. 3. Was ist Bildschirmauflösung und Dichte: jetzt in diesem Abschnitt, werden wir Zehe gehen. Beginnen Sie mit dem unterschiedlichen Typ der Bildschirmauflösung Bildschirmdichten. Was ist DP I Bildschirmauflösung und was ist der SP? Skalierbare Pixel und DP-Dichte Unabhängige Schweine ist so Dies sind alle Begriffe, die Sie meistern müssen , bevor Sie in Fotoshop oder Adobe X T oder sogar skizzieren, um Ihre Android abs zu entwerfen . Okay, jetzt, in diesem weniger und zuerst gehen wir zu Fuß, kümmern Sie sich um Bildschirmauflösung versus Bildschirmdichte. Okay, in dieser Lektion werden wir diese beiden abdecken. Lasst uns auf unsere erste Folie gehen. Jetzt. Zuerst werden wir uns ansehen, was der Unterschied zwischen Bildschirmdichte und Bildschirmauflösung . Bildschirmauflösung ist immer in Pixeln, was ist, dass mein Handy 9 20 Pixel von oder 10 80 Pixel x 9 20 Pixel, das ist Full-HD-Auflösung oder 12 80 Pixel von 7 20 oder 5 40 Pixel von 9 60 Bildern. Also das sind verschiedene Schweine, kranke Auflösungen, dass wie viele Schweine krank gibt es auf Ihrem Bildschirm? Okay, also ist es die Gesamtzahl der Pixel in einem Anzeigegerät. Es könnte Ihr LED-Bildschirm sein oder es könnte Ihr ich fünf k Bildschirm machen, so wird es eine Pixelanzahl, dass diese vielen Pixel thes viele Türen digitale Darts sind auf diesem Bildschirm vorhanden. Okay, jetzt, wegen der Dichte des Bildschirms bedeutet, wie dicht dieser Bildschirm ist mit der Anzahl von Schweinen entkommen . So ist es die Anzahl von Bildern innerhalb von einem Zoll außerhalb des Bildschirms. Okay, so zu mögen, können Sie hier auf der rechten Seite sehen, es gibt zwei Bildschirme von der gleichen Größe. OK, so sind sie beide, wie fünf Zoll-Bildschirme oder vier Zoll mobile App mobile Bildschirme und Sie können sehen, die Anzahl von Pixeln auf ihnen sind unterschiedlich. Dies ist mehr als die rechte ist dichter als die linke links. Eines hat die gleiche Bildschirmgröße in Zoll, aber es hat weniger Pixel. So werden die Bilder auf diesem linken Bildschirm weniger gestochen. Okay, so weiter und die Bilder hier drüben auf dem rechten Bildschirm werden gestochen scharfer und haben mehr Auflösung und mehr Pixel. So ist es genau wie Sie vielleicht aus dem Begriff auf Sie gehört haben, wenn Sie etwas drucken, dass dies ein 300 dp ich drucke oder 600 Leute, die ich drucke, also ist es im Grunde zu Hause Geldpunkte der Drucker in einem Zoll aus dem Papier gedruckt hat. Okay, wenn es also 600 Leute I oder 600 FBI Tür Spot Zoll ist, wird es 600 Dollar in den einzelnen Zoll drucken. Okay, also wird es mehr Farben haben und es wird natürlicher leben und mehr knackig haben. Man kann Erfahrung sagen. Hier können Sie sehen, dass 10 80 Pixel x 9 20 Auflösung und Dichte 401 Dark Spot Zoll oder DP ist . Ich glaube, du hast verstanden, was das eigentlich bedeutet. Jetzt werde ich Ihnen Beispiele von meinen zwei verschiedenen mobilen Bildschirmen und ihre tatsächliche Auflösung und ihre Dichte zeigen. Okay, jetzt sehen Sie auf der rechten Seite, ich habe diese Introspektion. Es ist eine mobile App, Android-App. Sie können es auf Ihrem Android-Handy installieren. Und tatsächlich, wenn Sie zu dieser Anzeige-Tab gehen, können Sie verschiedene Größen hier sehen. Okay, jetzt oder wir gehen zu dieser horizontalen Dichte und vertikalen Dichte. Sie können sehen, es ist 403.41 db I Also das ist die eigentliche dp I, die dunkle Fleck Zoll aus dem Bildschirm ist. Es ist sehr hohe Auflösung Bildschirm an der Spitze. Hier sehen Sie 10 80 Pixel und auf der linken Seite sehen Sie 1920 Pixel. So ist es eine Aktivität fast. SD Display Foon Und es ist von Samsung im Grunde. Und das ist eigentlich der Bildschirm von meinem eigenen mobilen Gerät, den ich benutze. So groß ist der Bildschirm 5,46 Zoll. Okay, also ist es im Grunde dieser Diagonalabstand. Eigentlich ist dies diagnostiziert Distanz. Es ist nicht der Abstand von rechts nach links oder das Ganze viel breit es ist. Basierend auf dieser Berechnung, eigentlich, eigentlich, was ich getan habe, ist, dass ich meine Gesamtzahl der Pixel geteilt durch meinen dp. Ich und ich haben die Größe von meinem Bildschirm abgenommen. OK, also, wenn mein Bildschirm 10 80 Pixel breit ist, werde ich es durch die Tür Spottings Rdp I 403.41 teilen und es wird mir 2,67 Zoll geben , so ist es fast 2,7 Zoll breit. Okay, so gehen wir auf die Zehe. Holen Sie sich die Beziehung zwischen Bildschirmauflösung und DP-Augen außerhalb der Bildschirmdichte. Hier ist ein weiteres Beispiel. Dies ist mein altes Samsung-Handy Android-Handy, und Sie können sehen, was Hier hat es fast fünf Zoll-Bildschirm fast, denke ich, halb weniger als der vorherige Bildschirm. Aber Sie können hier sehen, die horizontale Dichte ist fast halb bis 21 GPS. Also die Bilder auf dem Bildschirm können Sie hier auch diesen Bildschirm kurz sehen sieht ein wenig pixelig und es ist nicht so viel klar wie ein vorheriger Bildschirm. Das ist also ein anderer Unterschied zwischen DP I. Wenn Sie ein Handy und Gewehr kaufen, müssen Sie wissen, wie viel dp i disportieren. Moment gibt es Lebensmittel, die 6 40 db I unterstützen. So sind sie sehr hohe Auflösung und sehr genaue Bilder. Sie können die Videos und Farben und alles genauer sehen als dieses. Sie sind dichter mit Verbannten mit Farben, so dass Sie hier den Bildschirm sehen können. Aber ich habe berechnet ist 2,44 Zoll und es ist tatsächliche Pixelgrößen. 5 40 Bilder von 9 60 Bildern. Ich hoffe, Sie haben Industrie diese Dichte versus Auflösung. Was ist Auflösung und was ist Dichte? Auch, wenn Sie zu den LED-Bildschirmen oder den meisten Monitoren gehen, können Sie sehen, dass es zwei gibt. Okay, ist vier K und voll tatsächlich Bildschirme. Sie haben unterschiedliche Auflösungen und unterschiedliche Austrittsdichte ist Apple-Geräte, auch wenn es Sie mit einem Mac Book Pro oder I American und ich machen ihre Dichte ist immer fast doppelt als Windows oder normale Bildschirme oder PC-Bildschirme, obwohl es eine Menge von neuen Allergien und Monitore, die kommen, und sie haben mehr Dichte und mehr Auflösung und erstellen Sie ein Pixel und Tanz Pixel in kleineren Räumen. Nein, ich hoffe, Sie haben diesen Unterschied zwischen Dichte und Bildschirmauflösung und Bildschirmdichte verstanden . Ich hoffe, Sie genießen diese Lektion. Und vergessen Sie nicht, diese introspect Abit ist kostenlos zu installieren und gehen Sie zu diesem Display Tab und sehen, was Ihre Geräte sind Sport. Was ist die Dichte von Ihrem Gerät? Was sind die Schweine ist Pixelauflösung von Ihrem Gerät und ich hoffe, Sie bald in der nächsten Lektionzu sehen nächsten Lektion 4. Beziehung von DP und PX: in dieser Lektion werden wir darüber sprechen, was DP ist, die Dichte, unabhängige Pixel und was tatsächlich Pixel ist. Also, was ist der Unterschied zwischen diesen beiden und wie Sie diese Zehe miteinander verwenden und konvertieren können? Wenn Sie für Shop oder irgendwelche Schweine l basierte Entwürfe aus Okay, also lasst uns jetzt loslegen. Auf dem Bildschirm können Sie sehen, dass es drei verschiedene Geräte mit drei verschiedenen Dichten gibt. 1. 1 ist 1 60 dp, die sehr weniger dicht ist und sehr geringe Anzahl von rühmt Brei. Dann gibt es 2 40 p A, das ist eine mittlere dp I und dann haben wir die Straße, wenn TDP I oder extra High Definition High Definition und dunklen Fleck in Ihrem Definition-Bildschirm kam. Jetzt können Sie sehen, dass es eine Taste oder an der Unterseite. Hier drüben. Sie können sehen, dies ist eine blaue Taste und dunkelblaue Taste, und es ist die gleiche Größe auf all diesen drei Geräten Es ist. Und wenn die Größe in Pixeln jetzt können Sie auf diesem linken Bildschirm sehen wir weniger Pixel. So ist es schaut erstellen. Jetzt, auf dem mittleren Bildschirm, haben wir mehr Pixel. Und jetzt sieht die gleiche Übung ein bisschen klein aus. Nun, auf diesem Bildschirm, haben wir zu viele Bilder. Also haben wir Dieser Bildschirm ist dicht mit Verbannten mit Schweinen gesichert. Wenn wir also ein paar schweinkranke Meyer-Münzstätten benutzen, wird es damit geschehen. Also, wenn ich eine Schaltfläche erstelle und möchte, dass sie auf all diesen drei Bildschirmen genau ist, was soll ich tun? Ich sollte noch ein Denkmal schaffen. Sind noch eine Skala Zehe meiner Jahre. Es wird also unabhängig von der Dichte sein, also hängt es nicht von der Dichte ab. Also, jetzt können Sie es hier sehen, wenn ich diese Schaltfläche in DPs definiere Dichteunabhängige Bilder, meine Programmierer sind, wird es auf all diesen Geräten gleich aussehen. OK, also wird es 1 50% auf diese 1 200% oder dieses skalieren und es wird sein, dass es all meine Probleme lösen wird . Deshalb ist Android, ein materielles Design. Sie kamen mit dieser Pixel-Millionen-Einheit, die DP dist Dichte unabhängige Bilder. Also diese Pixel, diese Denkmäler, wenn Sie Ihren Quartier geben, dass meine Taste 200 dp leer von 36 TB hoch ist. Es wird gleich proportional zu ihrer Bildschirmgröße auf all diesen drei Geräten bleiben , es wird gleich erscheinen. Okay, das ist also das Problem. Warum sie DP anstelle von Pixeln erstellt haben. Weil Pixel kleiner aussehen werden, sobald wir auf Ah, höherer Dichte Bildschirm bekommen . Nein, ich werde Ihnen ein Beispiel von der gleichen Introspect-App zeigen, die ich auf meinem Android-Gerät installiert habe . Und Sie können sehen, ob Sie hier oben die Schweine, Übel Kunst und 80 Pixel sehen. Teil Abgewandt in DP ist 3 60 dB. Und jetzt, wenn Sie diesen Bildschirm betrachten, sind unsere Pixel unterschiedlich, aber die Dichte unabhängigen Pixel sind die gleichen. Es ist 3 60 dp void. Okay, wenn Sie also eine Schaltfläche wie eine 300 DP für den Bildschirm definieren, möchten Sie, dass es wie 300 DP nehmen , wird es auf diesen beiden Geräten gleich aussehen, auch wenn ihre Bildschirmauflösung oder die Anzahl der Pixel sind unterschiedlich. So werden wir DPs verwenden. Unsere Größen werden die gleichen sein und ah, das wichtigste DP-Denkmal für jeden mobilen App-Bildschirm. Wenn Sie Android-System verwenden und Materialdesign schreiben, wird es 3 60 dp von 6 40 dp Okay, so denken Sie daran, und wir werden kümmern sich um alle Ihre variiert in den nächsten Lektionen. Lassen Sie sich nicht verwirren, wie ich diese DPs in meinem Fotoshop oder einer anderen Design-Software verwenden werde. Okay, also gehen wir weiter und sehen uns bald in der nächsten Lektion. 5. Dp zu Px Online-Tools: in diesem s und ich werde Ihnen ein paar Online-Tools zeigen, mit denen Sie leicht Pixel in Ihre DPs konvertieren können. Und das ist eins von den Schweinen. Kranke Schweine Ort Stadt und Sie können hier unten sehen, können Sie die Pixel eingeben. 48 Pixel. Dies sind die Pixel. Wissen Sie, DPS Pmm Zoll zeigt jede beliebige mein Jahr bedeutet, dass Sie Zehe DPs in Ordnung konvertieren wollen, und Sie werden dieses MTP auswählen Ich gerade jetzt werde ich kümmern mich um das in einer anderen Lektion. Dies sind Exult und Stadt Eimer und halten Sie diese Einstellungen, wie sie sind, und Sie können sehen wenn ich es zu 100 ändern und jetzt können Sie sehen, ob wir mit diesem MDP I beginnen Meine 100 Pixel werden gleich sein wie 100 dp's auch auf dieser DVD p I es ist 1 33 Schweine ist das gleiche 100 dB auf HDB I-Bildschirmen. Es wird sein 1 50 Bilder auf überschüssige dp ich diese Atmore Dichte Bildschirme, sie haben eine höhere Dichte. Sie können sehen, dass dies 200 Pixel doppelt so groß ist wie die tatsächliche Größe. Dies ist 100 Pixel. Aber auf diesem X db I ist es doppelt so groß. Dann hat es die Größe verdreifacht, dass es viermal so groß ist. Deshalb nennen wir diese Bildschirme 1,5 x zwei x drei x vier X s. Deshalb nennen wir sie so, weil sie doppelt so groß sind oder 1,5 die Größe oder so etwas. So können Sie umwandeln. Sie können auch auf diesen verschiedenen Start eine APP Icons auswählen. Dies sind verschiedene Größen. 36 48 Bilder und das sind alle Pixelgrößen. 1 44 96 Aktionsleiste Kleine kontextbezogene Größen, Benachrichtigungssymbole 24 Bilder und Sie können bei XX dp i sehen Diese 24 spricht. ALS wird mit drei multipliziert haben, weil es drei x Bildschirm ist. 72 Pixel ist die Größe und auf vier Ausgang ist 96 Bilder, weil wir mehr Pixel und dichtere Bildschirme auf der höheren Auflösung oder höher DPS-Bildschirme haben. Sehen wir uns nun einen anderen Stuhl an , der einfacher sein wird als dieser. Jetzt können Sie sehen, ich werde Zehe überprüfen diese Baseline Dies ist die 1 60 MDP itis gehen auf die Grundlinie von Ihre alle verschiedenen Designs sind für Android Material Design. Nun, wenn ich wie 50 Pixel aus der Größe wähle, können Sie sehen, dass bei L d P i, das ist Punkt Ton fünf x es ist im Grunde multipliziert mit 50.75 So 50 db wird 37,50 Schweine ist jetzt. Ich glaube nicht, dass es vielleicht vier oder fünf Leute auf dem ganzen Planeten geben wird, die diese LDP benutzt haben. Also gehen wir auf die Zehe. Kümmere dich um all diese Kräfte für fünf Resolutionen nördlich dieser hier. Also mdb Augen im Grunde Avanex, die die Standardgrundlinie ist. Also alle die tiefsten werden gleich toe die gleichen Fiktionen sein, als wir tatsächlich P I haben, was 1,5 sein wird, also multipliziert mit 1,5 es sind 75 Pixel, so dass Sie sehen können, dass Sie die Beziehung zwischen DPs und Pixeln auf verschiedenen diese Dichten und Bildschirme Auflösungen und Sie können hier sehen, um zu beenden wird mit zwei multipliziert werden, was für ex sdp I und dann XX sdp I drei x multipliziert mit 31 50 dreifach X HDP I Es wird mit vier multipliziert werden, und Sie können sehen Hier haben wir 200 Pixel, so 50 50 DP wird 200 Pixel auf diesem Bildschirm diese Bildschirme thes große oder hohe Dichte Bildschirme und das gleiche für andere sein. Okay, also hoffe ich, dass Sie diese Beziehung nicht zerstört haben, wie Sie die verschiedenen Pixelgrößen für verschiedene DPs auf unterschiedlichen Bildschirmdichteauflösungen berechnen können . Eine zusätzliche Arbeit, drei x und vier X. Wir werden mehr über STP XXV p A. in den nächsten Lektionen sprechen . Ich hoffe, Sie haben diese Lektion genossen. Fahren wir mit der nächsten Lektion fort. 6. Was sind Density: Jetzt werden wir darüber reden, was unsere Dichte Eimer und warum brauchen wir sie? Und warum wollten wir unsere grafischen Assets erstellen? Unser Großbritannien ist unsere Symbole in mehreren verschiedenen Versionen von jeder Bit-Karte, die wir erstellen werden. Okay, Also, wenn Sie eine Schaltfläche oder ein Symbol für Ihre Android-mobile App entwerfen, werden Sie das gleiche Symbol im Schlepptau fast drei oder vier verschiedene Größen extrahieren. Und warum brauchen wir das? Weil wir verschiedene Geräte unterstützen werden. Einer hat mehr Pixel. Mischer-Dichte. Man hat weniger eine und eine andere, die sehr hohe Dichte hat. Also brauchen wir separate Icon separate Größen von Schaltflächen für jeden von ihnen. Sonst, was wird es tun? Ist Android-System wird Ihr ein Bild zu skalieren? Wenn Sie nur ein einzelnes Bild verwenden, wird es Ihr Bild skalieren und es wird Zehenunschärfe. Blooding wird auf Ihrem Bildschirm auftreten. Okay, also pixelig, es wird verschwommen und pixelig aussehen, also brauchen wir das nicht. Also werden wir untersuchen, dass verschiedene Dichte Eimer und es gibt wie Tonnen von verschiedenen Geräten, die unterschiedliche Schweine, kranke Revolutionen und Dichte Eimer haben . Und wir gehen die Zehe. Kategorisieren Sie sie in drei oder vier auf diesen verschiedenen Eimern. Okay, lass uns mal sehen. Was sind das? Okay, jetzt auf dem Bildschirm gibt es fünf verschiedene Dichte-Eimer. Eine, die ich weggelassen habe, das ist LDP, die ich glaube nicht, dass Sie Zehendesign benötigen oder für sie entwickelt haben. Okay, das ist also ihre Basislinie MDP. Ich habe 60 GPS gewonnen. Also jedes Gerät, das eine Auflösung oder Dichte hat, die näher an dieser 1 60 es wird in diesen Eimer fallen als alle Geräte, die 2 40 p a r näher an dieser 1 20 Zehe 210. Sie werden in diese Dichte, dann extra hohe Dichte Bildschirme. Dies ist zwei X, alle Bildschirme, die etwas näher an 3 20 Sie werden in diese fallen. Dann haben wir 40 db i oder XX sdp I drei x Bildschirm und alle verschiedenen Bildschirme, die hohe extra High-Definition-Bildschirme haben . Sie werden hier drüben sein, Dichte, Dichte, also gegen die Bildschirme. Und dann haben wir diese extra extra extra hohe Dichte Bildschirme, die 6 40 db I sein werden und sie werden in diese Kategorie fallen. Jetzt können Sie sehen, dass ich die gleiche blaue Box oder mit verschiedenen Größen auf dem Bildschirm gezeigt habe. Der Grund ist, dass dies die gleiche Pixelgröße von der gleichen Belastung ist, die auf verschiedenen Bildschirmen wie diesem erscheinen wird . Okay, wenn wir also diesen Knopf haben, der diese Größe hat, sind es Exzise wie etwa 200 mal 100 Pixel. Es wird 350 Bilder wie diese ein großes bisschen größer sein, 1,5 mal größer auf dem Bildschirm zu Buddha. Zwei Mal größer auf diesem, drei Mal größer auf diesem einen und vier Mal größer auf diesem hier. So können Sie sehen, wie wir verschiedene Assets für all diese Bildschirme erstellen können. Wir brauchen ein Asset, und wir brauchen verschiedene Größen von diesem Asset für den Sport all diese verschiedenen DPS-Bildschirme . Jetzt werden wir uns ein Beispiel ansehen Jetzt können Sie sehen, dies ist das Bild von Google Material Design ihrer eigenen Linie Dokumentation genommen , und Sie können sehen oder hören, sie haben gezeigt, wie verschiedene Größen und wie verschiedene Symbole oder Bilder sie gehen Toe haben unterschiedliche Auflösungen oder Skalen auf verschiedenen DP-Augen oder Dichte-Screens. Jetzt können Sie sehen, dass dies unsere Grundlinie ist. Wenn also ein Symbol 48 mal 48 Pixel auf dieser Grundliniengröße ist, wird es ein bisschen größer. 1,5-mal an, Http. Ich als auf X bei X HDP I zusätzliche Höhe und Dichte Bildschirme die nächsten zwei extra hohe Dichte Haut, so dass Sie sehen können, wie diese Größe ist. Skilling ein x 1.5 x zwei x drei X und vier x Also das ist, müssen Sie diese Punkte in Ihrem Kopf behalten , dass wir entwerfen vielleicht für dieses eine, oder wir werden eine Vorlage verwenden, die wir waren. Wir werden für Hälse entwerfen und wir werden unsere Grafiken in all diese verschiedenen Größen exportieren , wo Sie das tun können für den Shop und gehorchen X t Skizze auf jeder Software Sie verwenden. Mach dir also keine Sorgen darüber machen. kümmern wir uns in den nächsten Lektionen. Ich hoffe, Sie verstanden haben, Junge anders diese DP Augen, Eimer, gespannt Eimer haben und warum kümmern wir uns um sie und wie wir können. Wir werden erwarten, verschiedene Größen von verschiedenen Bildern für Sport all diese Dichte und Dichte hohe Dichte Bildschirme. Ich hoffe, Sie genießen diese Lektion. Fahren wir mit der nächsten Lektion fort. 7. Online-Tool zur Bildschirmauflösung, Gerätegröße und Dichte: Ok. Jetzt werde ich Ihnen ein sehr einfaches Werkzeug zeigen, das von Material Design-Material dot io Schrägstrich Geräte ist, und Sie können hier sehen Sie alle verschiedenen Höhen und geschriebenen Pixel sehen. DP's in Punkte-Seitenverhältnissen von Ihren Geräten, Zoll und Zentimeter, Bildschirmabmessungen und die Plattform, und auch Sie können auf der rechten Seite sehen, sagt Dichte. Also, wenn ich darauf klicke, können Sie sehen, dies sind die Bildschirme mit einem mdb I oder Geräte mit mittlerer Dichte. Chromebook 11 Chromebook 30. Dies sind sehr große Dimensionen, die Sie sehen können, sind Zoll, und wenn wir Fuß gehen, Ich mache Sie sehen, es hat verschiedene Größen. Und wenn Sie durch, dass blättern, können Sie sehen, wenn Sie zu diesem drei X gehen, können Sie sehen, es gibt 5.1-Zoll-Geräte, und Sie können hier sehen wir Sony Xperia und Itis 5.2 und 2.5 ist das Dorf und 4,5 Zoll die Höhe aus ihre Geräte. sind also die verschiedenen Auflösungen, und Sie können hier die Bildschirmauflösung sehen. Hier ist der Chirurg in DPs, und Sie können auch sehen, es gibt verschiedene DP-Dimensionen für andere Geräte wie Google Pixel Excel Order. Also, wenn Sie für ein bestimmtes Gerät wie Nexus fünf für Nexus sechs entwerfen, wie Sie als nächstes ein sechs oder sechs p sehen oder hören können , haben sie DPs dimensionale vier Lemon von 7 31 Aber sie werden in 3.5 XXX als dp Ifallen I Also diese nehmen im Grunde, dass Sätze aus diesem Dichteeimer, und es gibt verschiedene Größen. Sie können umblättern, wenn Sie möchten. Wenn Sie nach einem bestimmten Gerät suchen, können Sie den Aspekt betrachten. Verhältnisse. DP's Hide A Bildschirmauflösung in Pigs ist auch Bildschirmdichte, Bildschirm, Dimension und Zoll und Zentimeter, und auch die Plattform auf, was sie arbeiten. Das geht also alles darum. Material Design-Geräte skizziert, und Sie können für alle verschiedenen Größen, wenn Sie wollen. Oh, ich hoffe, Sie haben diese Lektion genossen. Fahren wir mit der nächsten Lektion fort 8. Was sind die SP type im SP Design?: jetzt in diesem s und wir werden über skalierbare Pixel oder SP sprechen. Dies ist eine weitere Einheit, die das Android-Materialdesign verwendet, aber für verschiedene Zwecke. Jetzt haben Sie alle bereits gehört und wir haben über DP-Dichte unabhängige Pixel für Ihre Bildschirmauflösung und Layouts und verschiedene Größen verschiedene Tasten und Behauptungen gesprochen . Aber dieser SP ist vier Kraft, wie ähnlich wie BB. Es ist für uns für Kraft und es wird alle vier Einstellungen im ertragenen Materialdesign speichern . Also, wenn Sie gehen, um Ihre Größe ist Ihre vier Größen zu Ihren Entwicklern, werden Sie in SPs und skalierbaren Pixeln sprechen. Ihre Entwickler wissen also, dass dieser Designer meine Sachen wirklich kennen. Okay, der Hauptunterschied besteht darin, dass SP ndp sie tatsächlich gleich sind. Aber SP wird alle Einstellungen speichern. Sie stellen daher fest, wie groß es ist. Sehr, es ist mutig oder nördlich oder so etwas. Dies wird also eine relative Zehe Ihrer Bildschirmgrößen sein. Also, wenn Sie SP in Ihren vier Größen verwenden, es wird relativ zu Ihrem Bildschirm und Dichten sein, und es geht toe die gleiche Größe, Es wird auf der gleichen Größe auf verschiedenen Geräten erscheinen. Jetzt werde ich Ihnen ein Beispiel von 20 s vor so auf verschiedenen Dichten zeigen. So haben wir unsere nächsten 1,5 x zwei x drei x und vier X Bildschirme. Jetzt können Sie sehen, ich finde amüsant 20 Pixel, die auf mtp I ist, weil auf MDP I dies die abgeschirmte und Stevia ist . Meine tatsächlichen Bildschirmpixel werden gleich dem tatsächlichen SP oder DB sein. Okay, also 20 s p ist gleich 20 Pixel auf meinem mtp I, was unsere Grundliniendichte ist. Dann haben wir 1,5, so können Sie sehen, 20 multiplizieren mit 1,5 30 30 Pixel. Jetzt können Sie sehen, dass sich dieser Rahmen im Grunde ändert, weil nur ein Beispiel wie dies eine Last ist und das ist ein Text auf der Schaltfläche. Nun, wenn Sie auf dieser Größe die Bitterkeit klein sehen, so dass der Text klein sieht gut aus, aber auf dieser Größe, dass Text, wenn Sie die gleichen Schweine schlechten Wert aus dem Text hier verwenden, wird es sehr klein aussehen und es wird unlesbar sein. Blei-Fähigkeit wird viel leiden. Auch die Lesbarkeit. Was wir also verwenden werden, ist, dass wir die Realität vier Größen verwenden, die SP sind. Das wird also 30 sein, weil es tatsächlich ist und es wird toe übersetzen SP, die gleich 20 s ist, 1,5 30 20 multipliziert werden, jemals physisch, 40 und 20 mehrere jemals drei ist gleich 60 Pixel und 20 multiplizieren, bevor 80 Plektren ist. Wenn Sie also für drei X-Geräte oder zwei Wochen Geräte von 1,54 X entwerfen, müssen Sie Ihre vier Größen mit diesem Dichteverhältnis multiplizieren und wenn Sie mit Ihren Entwicklern darüber sprechen , werden Sie ihnen nicht Größen in Pixel. Du wirst jetzt mit Espys reden. Dies ist eigentlich die verschiedenen typografischen Skala off android Material Design, die von Ihnen hier sehen können wir die Taste, alle Kappen 14 sp, mittlere Größe. Sie benutzen einen Roboter leisten. Dies ist im Grunde Roboto und Sie können sehen, dass dies die Größe für Untertitel ist. Reguläre 20 sp Körpergröße, eine Körpergröße, auch. Sie können 14 SP regulär verwenden. Alles, was Sie Medium 14 SB oder Medium SP für Desktop verwenden können. Also, wenn Sie für Desktop mit Materialdesign für die Stop-Anwendungen Chrome oder so etwas entwerfen , werden Sie diese drei Werte verwenden. Dann haben wir Titel, die mittlere sehen können 20 SP Headlines werden 24 SP und höher sein. Sie können sehen, dieses Spiel ist auch Überschrift Verzweifelt war größer Überschrift Anzeige Bäume viel größer Überschrift und Anzeige für ist sehr, sehr große Überschrift. Das heißt also im Grunde typographische Skalen und ich habe in meinem Kurs Typographie für Designer und Entwickler viel über sie gesprochen typographischen Rhythmus, radikalen Rhythmus und typographischen Skalen . So haben sie diesen SP entwickelt. Es wird gleich bleiben, weil es nicht von Pixeln abhängig ist. Es ist fähig Pixel. Grundsätzlich hoffe ich, Sie haben das Konzept von SP und ah Android Material typografische Waagen verstanden und wie wir gehen, um verschiedene Schriften und Größen für verschiedene Anzeige auf dem Display zu verwenden . Zwei Titel Unterüberschriften, Hauptkörper im Wesentlichen für Absätze, Beschriftungen und Belastungen. Ich hoffe, Sie haben diese Lektion genossen. Fahren wir mit der nächsten Lektion fort 9. ♥ Wie die DP Einheit in Adobe XD funktioniert: Okay, jetzt in der Ferne. Und wir werden über getrocknetes Design bei der Verwendung von Adobe X'd sprechen. Welche Dateigröße oder Vorlage sind Art Board, die wir verwenden werden. Dies ist Adobe X T. Und auf diesem Bildschirm, dieser Willkommensbildschirm können Sie sehen, dort haben wir dieses Android-Handy, und Sie werden darauf klicken und es wird mit und rechts Mobile Herz Buch beginnen. So ist es sehr einfach in diesem, also seien Sie extra, weil es nicht Ah ah, Schweine, krank basierte Software ist. Es ist eine vektorbasierte Software, und es ist einfacher, darin zu entwerfen. Okay, also ziehen und elipse einfach so, und, und, äh, Jack, ein Bild hier drüben, und du wirst etwas Ähnliches wie die gleiche noch-Taste erstellen, und ich bin hier drüben etwas zu erschaffen. Also, wenn Sie nicht wissen, wie man dieses Adobe x t verwendet, können Sie meinen Adobe X'd natürlich nehmen, ich habe ah, vollwertigen Kurs von der Großheit in Richtung Mars Ebene alles, was ich in diesem Kurs besprochen habe . Also, wenn Sie nicht wissen, wie Sie es benutzen, können Sie gehen und überprüfen Sie diesen Kurs. Oder du kannst mir sogar mitteilen, dass du den Kurs auf einen Rabatt oder so etwas nochmals erhältst. Also werden wir hier drüben einen Text benutzen. Das bin ich. So etwas wie das. Das ist die gleiche Übung, die ich für Ah mache, im Fotoshop. Ich habe nicht Fotoshop in der vorherigen Hören, dass Sie gehen, um hier zu tun, und ich werde dieses Fahrzeug oder hier so verwenden, und Sie können etwas verwenden. Stellen Sie mir so etwas ein. Also werde ich dieses Bild von meiner Tochter ziehen. Und Sie können sehen, was? Hier, dieses Bild und ein Decks hier drüben. Und auch dein Name. Ja. Sieht, oder so etwas. Und ich werde mich um den Rest kümmern. Ok? Erstellen Sie so etwas in Edo, Android Mobile und Ah, noch eine Sache. Ich würde gerne, wenn Sie auf diese Kunst Grenze mit Größe klicken. Hier ist es 3 60 mal 6 40 Wenn Sie das Fell erhöhen wollen oder Sie für so etwas wie 411 davon entwerfen wollen und ah, 411 mit und 700 etwas 1937 war die Höhe für die nächsten sechs oder größeren Geräte wie, Ah, Samsung s acht oder so etwas, dass Sie speziell für sie entworfen, wenn Sie wollen. Sie können so etwas verwenden Jetzt gibt es noch eine Sache, die ich hier diskutieren möchte , die sich von Fotoshop unterscheidet. Ist das in einem no b x d Sie werden immer in einem X entwerfen. Okay, Also, wenn Sie hier gehen und gehen Sie zum Export Overhead Export und ausgewählt, Sie können sehen, wenn Sie zu Android gehen, Sie werden wählen, welche MDP ich Sie waren verwenden. Okay, also gehen Sie immer gehen, um diese 100 MDP I und nur gehen, um alle Ihre Vermögenswerte mit, dass zu exportieren ? Wir werden später darüber sprechen behauptet und diese Probleme jetzt möchte ich, dass Sie so etwas erstellen und würde in der Mitte. Okay, so etwas und gerade exportiert werden, nehmen Sie einen Screenshot von Ihrem Design und Gipfel in dieser Aufgabe. Ok? Sie können Ihre Arbeit auch über Fragenantworten einreichen, wenn Sie möchten. Oh, wenn Sie also nicht mit Zuweisung einreichen können oder Sie Zuweisungen übersprungen haben, können Sie das später tun. Ich hoffe, Sie haben diese Lektion genossen, wie Sie verschiedene Kunsttafeln erstellen werden, auf welche X Größe oder Dichte Sie sind Sie entwerfen gehen zu entwerfen. Das wird X'd sein. Gehen wir zur nächsten Liste. 10. ♥ erstes Projekt für Schüler: Nun, das ist die Zeit für Ihre erste Aufgabe, und es wird sehr einfach sein. Sie müssen Ihre Adobe X'd öffnen und ein neues Dokument erstellen, das das Kunstboard von Android Mobile sein wird, die 3 60 mal Kunstboard von Android Mobile sein wird, 6 40 Sie wissen bereits, wie Sie diese Vorlage öffnen. Und wenn Sie nicht wissen, können Sie auf die Kunst Boards klicken und lassen Sie mich die ausgewählten und Sie können hier sehen wir diese Android-Handy und Sie können auch Exzesse aus dem ersten Bildschirm aus diesem Adobe X t. Und jetzt, was wir tun müssen, ist Sie Zehe brauchen. Verwenden Sie Ihr Bild, wenn Sie möchten. Oh, wenn Sie Ihre E-Mail nicht verwenden möchten, können Sie jedes andere Bild verwenden. Aber ich ziehe es vor, dass du dein Bild so verwendest, wie du es siehst. Das ist mein Bild. Verwenden Sie so etwas wie dieses Avatar-Bild. Dann können Sie etwas Essenzen oder, ähm, den Basen oder wie auch immer Sie heißen. Okay, dann werden Sie vielleicht einen einleitenden Text über sich selbst schreiben. Was machst du da? Welchen Job machst du? Was suchen Sie auf, was sind die Dinge, die Sie mögen Was? Was sind die Dinge, die Sie gerne lesen? Wie Sie hier sehen können, habe ich meine Interessen gezeigt, und am Ende werden Sie diese Last nutzen. Uh, Zeh hat Schatten drauf und weißen Text. Und es wird alle Kappen sein, weil die meisten Tasten in Android Material Design sie alle Kappen sind. Nun über die Größe ist dieses Ding wird 1 10 mal 1 10 dp, die tatsächlich die gleiche Größe in Adobe x t ist . Also nur 1 10 mal 1 10 dies wird 20 sp oder ah, skalierbare Schweine ills sein. Dann wird dies auch 16 Größe sein und dies ist dieser Text auf dieser Schaltfläche wird auch 16 sein. Die Tastengröße wird 200 x 48 BP sein Also, warum ich bekomme, geben Sie Ihnen diese Aufgabe, nur um Sie mit all diesen Größen vertraut zu machen, dass Dip-Größen und Größen in Adobe Entschuldigung verwendet werden. Sie werden die gleichen sein, die Sie für Avanex entwerfen. Sobald Sie diese Aufgabe abgeschlossen haben, werden Sie einen Screenshot daraus machen. Sie können auch dieses kostenlose Software-Kabel verwenden, um Ihren Bildschirm kurz zu machen. Und sobald es wie im Anfang ist, können Sie auf diese auswählen und Sie können Es war so etwas. Capture-Bildschirm abgetrennt und hochgeladen. Und zeig mir deine Entwürfe. Spiel einen anderen Weg aus Extrahieren Sie diese Android Material Designer gehen, um alle Kunstbohrungen zu exportieren und wir werden diesen Android auswählen und wählen Sie eine vier Ordner, in denen Sie unsere Kunst Bullen exportieren und exportieren möchten . Okay, jetzt werden wir die für den Exportordner durchsuchen Wenn Sie darauf doppelklicken und Sie hier sehen können , haben wir es. Und ah, lasst uns etwas in der Mitte benutzen, vielleicht überschüssiges dp Ich benutze diese Größe und lade es einfach hoch, OK? Und ich werde es überprüfen. Also nur um sicherzustellen, dass, wissen Sie, einige der Dinge zu verstehen und wie Sie leicht mit Adobe X'd zu entwerfen beginnen können. Wenn Sie also Schwierigkeiten haben, X t zu verwenden und zu befolgen, können Sie meinen anderen Kurs Art X T Design-Prototyp in Collaborated nehmen , der alle Grundlagen abdecken wird. Okay, also freue ich mich auf deinen Auftrag, dein Gesicht, deine Vorlieben und Abneigungen und was planst du in der Zukunft? Ich hoffe, Ihre Entwürfe bald zu sehen. Fangen wir jetzt an, deine erste Aufgabe zu machen. 11. UI von UI: Nein. Bevor wir in unser Design gehen, werden wir uns mit den verschiedenen Strukturen und Wasser vertraut machen. Die verschiedenen Bereiche der Benutzeroberfläche. Und was sind ihre Namen von Android Material Design? Weil wir uns damit vertraut machen müssen, weil wir mit unseren Entwicklern darüber sprechen werden. Und als wir entwarfen, müssen wir wissen, was diese Region Name ist in Android-System entwickelt System. Also lasst uns anfangen. Okay, Okay, zuerst sehen wir dieses Bild hier drüben. Dies ist Material sind Ihre Richtlinien und Sie können sehen, was? Hier. Dies ist unsere Akbar, die Sie vielleicht eine Menge von APS-Titel hier in der Primary Toolbar gesehen haben. Dies ist Inhaltsbereich. Dies ist die untere Leiste, wo wir unten navigiert haben. Einige Symbole, vielleicht drei oder vier. Dies ist im Grunde diese hellblaue Seoane Farbe. Dies wird als schwebende Aktionsschaltfläche bezeichnet. Jetzt, auf der linken Seite, können Sie sehen, dies ist Seite nie, die auch Navigation gezeichnet genannt wird. Navigationsschublade Knave zu zeichnen. Okay, also ist es auf der linken Seite. Und wenn du hier auf das Hamburger-Menü-Symbol tippst, wird es hier rüber rutschen. Jetzt können Sie sehen, dass das richtig ist. Navigation. Es wird einige von den Bereichen zu erweitern. Wenn Sie irgendwo tippen, wird es die Zehe hineinrutschen. Aber man kann sehen, dass es ein wenig Unterschied zwischen der Seite gibt. Nie. Und jetzt haben die Seite nie mehr Priorität. Es wird den ganzen Bildschirm nehmen. Während diese rechte Navigation, wird es die Statusleiste verlassen. Okay, also die obere, die der dunklere Bereich ist, wird Statusleiste genannt. Okay, jetzt, wenn man sich die etablierte Struktur anschaut, ist es auch dasselbe. Nur ein bisschen verbraucht. Wir werden jetzt nicht für Tablet entwerfen. Aber wenn Sie für Tablet und diesen Stopp entwerfen, müssen Sie diese sehen, da gibt es nur wenige weitere Optionen hier zur Verfügung. Wie Sie sehen können. Was? Hier und Desktop mehr. Wir haben eine sekundäre Symbolleiste oder eine andere Symbolleiste mit dem primären Werkzeug, aber weil wir mehr Platz haben. So ist dieses Design Material Design wirklich genial. Es erweitert sich mit seiner, Sie wissen, Bildschirmgröße. Okay, also gehen wir zum nächsten. Okay, also ihr Agenten, ihr könnt vertikale Trennwände sehen. Wie sie es verwenden Dies ist horizontale Trennwand. Hier oben. Dies ist eine vertikale Trennwand. Gerade fragte graue Linie und ah, trennt den linken Bereich von rechts. Okay, also haben sie gesagt, dass, wenn Sie so etwas erstellen möchten, Sie Leerraum verwenden müssen, anstatt, wissen Sie, viele verschiedene Regionen zu erstellen. Versuchen Sie nicht, zu viele Regionen zu erstellen, nur eine Region und Leerraum verwendet, um andere Elemente zu trennen, wie Autos und andere Dinge. Okay, lass uns jetzt darüber reden. Werkzeugleisten Jetzt haben Sie alle die Hockerstangen an der Spitze gesehen. Sie haben verschiedene Werkzeuge wie diese. Ah, solche Symbole. Thes drei Darts, das ist weit mehr. Ich wollte dir nur noch mehr Dinge zeigen. Und das ist der Titel hier drüben. Diese werden als Werkzeugleisten bezeichnet und Sie können sehen, dass es viele Variationen für diese Werkzeugleisten gibt. Es gibt schlanke Werkzeugleisten, ein bisschen Provider Werkzeugleisten. Und dann gibt es Werkzeugleisten, die sich gelöst haben. Diese sind für Tablet- und Desktopansichten geeignet. Dies ist eine weitere Symbolleiste namens Kartensymbolleiste. Sie wissen, Sie können hier sehen, dass sie einige Kartenstil abseits der Art und Weise stört für die Erstellung dieser Symbolleiste verwendet haben . Dies ist eine schwebende Symbolleiste und diese ist getrennt. OK, also möchte ich nicht in ah viele Details bekommen, aber Sie müssen wissen, dass diese Balken gesagt werden, dies ist die untere Symbolleiste, weil viele Male ihre Designer, werden sie mit ihren Entwicklern sprechen und ich denke, sie sollten im gleichen Tempo sein. Sie wissen zumindest, wie man verschiedene Elemente nennt und wie sie interagieren werden . Okay, jetzt ist die Hauptsache, lass uns über diese Luft reden. Aber das ist sehr wichtig, weil jede App wird diese Akbar haben. Und sobald wir mit dem Design beginnen, werden wir uns die verschiedenen Spezifikationen ansehen. Aber jetzt werden wir uns ansehen, was verschiedene Teile sind. Das sind Action-Symbole. Diese sind nie ein Symbol, das unsere Navigationsschublade nach oben gleiten wird. Dies sind viele Symbole, um mehr Menüoptionen zu sehen. Dies ist so und das sind mehr Aktionssymbole. Sie können hier ein oder zwei Symbole setzen. Okay, hier sind verschiedene Variationen von hellen und dunklen Teams. Sie können hier drüben sehen. Das ist wie er. Sprich mit ihm. Sie können auch sehen, der Schatten ist ein bisschen heller in unserem hier von einem dunkleren hier drüben. Okay, also gibt es noch eine Sache. Sie können es auch transparent machen. Also jede Farbe, die auf dem Hintergrund aus Ihrer App auf dem gesamten Bildschirm ist, wird es Zehe Mischung in diese. Das sind also verschiedene Optionen. Dies sind eine andere App. Abstrakte Farben wie ich habe diese blaue Farbe und ein bisschen dunkleres Blau für diese Statusleiste. Und wir werden uns diese Konstruktionsspezifikationen jetzt nicht ansehen. Okay, jetzt können Sie hier sehen, wir haben ah, Menüs. Und ah, Sie können sehen, das sind Menüs. Wenn Sie hier gehen, werden Sie sehen, diesen oder Veranstaltungsort tippen Sie auf diesen Bereich. Dies ist ein Filtersymbol. Dies ist der Abwärtspfeil-Filter. Es wird ein Streik auf genannt. Und wenn Sie auf diesen klicken, wird es dies zeigen. Okay, Also ein wenig darüber, wie diese Statusleiste aussehen wird und wie Sie gehen,wissen Sie, wissen Sie, verwenden Sie es in Android-Design-System. Okay, Jetzt können Sie sehen, es wird an der Spitze sein, und es ihsaa Ich werde nicht in die Größen gehen Wir gehen in die Größen sind in DP's in der nächsten Lektion. Moment werden wir uns nur ansehen, was verschiedene Bereiche sind und wie wir sie repräsentieren können oder wie sie in unterschiedlichen Erscheinungsbildern variieren können . Okay, also gehe ich jetzt runter. Sie können hier drüben sehen. Hier ist eine weitere inhaltsbasierte Farben, die sie aus diesem Hintergrund genommen haben. Dies ist ein bisschen transparent, aber es ist schwarz. 000 20% 0 zurück. Ok, also haben sie Jean. Sie ändern die Deckkraft Ich liebe wirklich, wie sie,wissen Sie, wissen Sie, ändern die Dinge dort auf getrocknetem Design-System oder Android-Materialdesign. Jetzt können Sie hier sehen, dass wir den Lagerstatus Teil haben. Dieser Zustand ist davon ausgeschlossen, die Farbe von hier zu nehmen. Dies ist Lebensstatus bar 70% weiß f f f. So gibt es viele Variationen, die Sie brauchen Zehe. Halten Sie Ihren Kopf offen, dass, wenn Sie etwas im Android-Materialdesign entwerfen, können Sie viele Variationen für diesen Cop Titel haben. Aber jetzt ist das Android Navigationsleiste. Es ist auf einigen von den Telefonen vorhanden. Meistens Google-Telefone, schätze ich. Und es wird dunkel und hell sein. Was auch immer. Sie können es verwenden, wenn Sie wollen. Oh, okay. Also lasst uns über die Seite reden. Ich weiß nie, dass die Seite nie so viel Platz in Anspruch nehmen wird und einige von dem Raum hier drüben gelassen . Es wird auf alle Elemente dahinter überlappen. Okay, das sind verschiedene Beispiele. Lassen Sie mich es Ihnen zeigen. Dies ist das Beispiel der linken Seite. Nie. Und mal sehen, was? Sein Beispiel aus dem Augenblick. Okay, also werde ich das spielen. So ist das gerade jetzt können Sie das Gleiten nach innen nur im Inhaltsbereich sehen. Es geht also mehr um dieses Bild. So haben sie das Bild geöffnet, das Sie führen können. Du kannst zurückgehen. Okay, das ist gerade jetzt, ist tatsächlich als zusätzliche Männer fungiert. Männer, Männer Sie für dieses Bild. Okay, das ist also der Unterschied. Wenn Sie sich fragen, warum es gerade jetzt, aber links nie die Seite. Nie. Das ist der Unterschied. Dies wird den ganzen Bildschirm nehmen, und Sie können hier nichts tun, was einige vom Bildschirm hinter zeigt. Aber es geht toe das gerade jetzt wird den ganzen Bildschirm zu nehmen, und es wird Ihnen mehr Optionen über den gleichen Inhaltsbereich zeigen. Es wird nur den Inhaltsbereich aufnehmen, nicht den gesamten Bildschirm. Okay, jetzt sind das weiße Rahmen oder Karten, schätze ich. Okay, so ist es nur, um nur im Auge zu behalten, dass die meisten der Inhalte auf Android ihr Design-System ist es 100 Materialdesign. Es ist in der Form von diesen Karten, und sie werden so sein. Haben Sie etwas Schatten. Dies ist der Knopf an. Und wir haben mehrere Karten. Nehmen Sie eine übermäßig andere Autos wie, und Sie können sehen, was hier gekrempelt Inhalt und erweitert und zusammenbricht. Und das ist eine konzentrierte ihre Bar auf mobile und andere Dinge. Dies sind also alle Elemente Karten, Navigationsleisten, Status- oder Systemleiste, Status- oder Systemleiste, primären Symbolleisten-Inhaltsbereich, untere Leiste. Okay, also werde ich Ihnen ein weiteres Beispiel geben. Wie ich dir zeige, das ist ah, Bottom Bar. Sie können hier sehen, ist die Navigation und Navigation, und oben dran, Sie können sehen, wir haben Favoriten erkunden ein Konto ähnlich, dieses und dieses sind dies drei Teams und das sind im Grunde die untere Navigation , die für die gesamte App global sein wird. Global bedeutet, dass es bleiben wird. Halten Sie sich an diesem Boden während der gesamten Anwendung oder einer Portion angeboten. Also das ist, denke ich, alles über all die verschiedenen Regionen, die Sie alle Karten studiert haben Stop Statusleiste an einem Balkeninhaltsbereich unten Navigation links nie oder zeichnen links jar und rechte Navigation und schwebende Aktion -Taste. Okay, ich hoffe, Sie haben diese Lektion genossen. Wenn Sie Fragen haben, die Sie mir stellen müssen, fahren wir mit der nächsten Lektion fort. 12. Wie das Material funktioniert: Okay, schauen wir uns an, was ist das Team oder die Grundlagen aus Android Material Design. Nun, dieses Android-Materialdesign basiert auf Papier stapeln übereinander. Jetzt können Sie in diesem Diagramm auf der rechten Seite sehen gibt es zwei Elemente. Eins ist dieses Papier, weißes Papier. Und es gibt einen anderen Knopf oder und eine abgerundete Form Papier darüber. Sie können sehen, dass dies Z-Überschuss ist. So ist alles auf Ihrem Materialdesign mit einfachem Zugang erhöht. Okay, also jedes Element hat ah, Materialstärke von einem dp. Okay, also, wie Leute, haben Menschen eine sehr leichte Dicke. Sehr schlankes Papier, aber es hat eine gewisse Dicke. Okay, also Papier und Dinge übereinander, nur ähnliche Zehe stapeln Papier oben, abeinander, wie Origami. Sie können Sie erstellen wenige Design oder Schnittstellen, indem Sie verschiedene Schaltflächen. Verschiedene Luftstangen oben. Von der Basis sind das Basispapier. Weißt du, wie weit weiter auseinander liegen? Ein Element ist von einem anderen wird in Z-Überschuss versperrt werden. Wie viel ist es? Ach, erhöht von der Basis. Okay, verschiedene Elemente haben unterschiedliche Animationen und Schatten, aber im Moment sprechen wir darüber in der nächsten Lektion über Höhe und Schatten. Unterschiedliche Materialschatten. Im Moment müssen wir sehen und verstehen. Dies ist die überschüssige y-Achse und Exzesse Sache, dass wie viel ist eine Dicke aus? Etwas wie Sie sehen können, Ihren Kopf hier ist ein Smartphone und es ist Krankheit ist in Z OK versperrt , z Überschuss wird es nehmen Es wird einige drei d-Form haben. Wenn wir diesen einfachen Zugang entfernen, als es ist, tun Sie einfach die oder zweidimensionale. Also, um diesen Drei-D-Effekt und diese Tasten und Schatten zu machen, verwenden sie im Grunde zwei Schatten. Also hier haben wir, ah, einen Schatten vom Schlüssellicht ein Licht und den Schatten vom Umgebungslicht. Umgebungslicht bedeutet, dass wird sehr scharfes Licht und Sie können sehen, dass weiche Schatten auf der Seite haben . Und es gibt wir dunkle Schatten aufhellen, weil das Licht irgendwo hier oben ist und die Kombination beider haben sie diesen gemischten Schatten, im Grunde Androidschatten ist. Okay, also funktioniert das alles mit der Z-Achse, damit Sie dieses Papier sehen können. Sind diese Schaltfläche oder dieses Element wird von diesem Hintergrund mit diesem Schatten erhöht. Sie sind also, können Sie sagen, vorgeben, wie drei D-Elemente zu sein und den Schatten und diese Höhe zu verwenden. In der nächsten Lektion gehen wir zu Fuß. Sehen Sie, was anders ist. Schatten und Höhen und Wasser, verschiedene Höhen für verschiedene Elemente. Okay, so dass jedes Element unterschiedliche Höhe hat, wie viel höher es ist und wie viel erhöht es von der Basis ist. Gehen wir also zur nächsten Lektion über. 13. Material: Okay, jetzt, in diesem ist in, werden wir uns Android-Materialdesign, Schatten und Höhe ansehen und wie sie tatsächlich miteinander arbeiten. Okay, Nun, bevor Sie in weitere Details gehen, können Sie zu diesem Material Tochter gehen, Ihre Schrägstrich Richtlinien Schrägstrich Ressourcen Leben Schrägstrich Schatten Tochter CML und nein, Sie können hier sehen wir Skizze Illustrator und für die Show-Datei. Und Sie können diese Skizzendatei auch in Adobe X'd öffnen. Also, wenn Sie ein Nein haben, seien Sie extra, Sie können dieses verwenden. Okay, also müssen sie umbra Schatten und Penumbra von einem ist dunkler. Beschatten Sie das hier. Und dieser ist leichter oder weicher. Shero und ah, sie haben alle verschieden, weißt du? Ah, Richtlinien dafür, wie viel oder wie viel es verbreiten wird, wie viel OPEC es ist, wie viel Blut es haben wird. Das sind also alle verschiedene Einstellungen. Aber wir werden nicht daran erinnern, dass, weil wir bereits diese drei für eine Show herunterladen können , Datei unsere Illustrator-Datei oder Skizzendatei und verwenden Sie sie. Okay, jetzt gehen wir zu diesem Elevationseffekt. Ok? Höhe bedeutet nun, dass der Abstand in der Z-Achse von einem Element zum anderen liegt . Wenn also ein Element wie dieses am unteren Rand ist, können Sie sehen, dass es eine DP-Höhe hat. Es hat etwas Schatten und Sie können sehen, dass es von dieser Basis erhöht ist. Das ist die großartige Basis im Eric. Hier drüben ist es zu dp erhöht von der Basis. Es hat also einen sehr weichen Schatten, nicht etwas. Wenn etwas höher wird, wird es mehr Schatten haben und mehr vom Schatten ausgebreitet werden. Okay, also ist es sehr natürlich. Jetzt können Sie hier sehen wir haben Dies ist das Diagramm. Hier haben wir die Z-Achse Und wenn ZX sich oben bewegt und der Abstand zwischen diesen beiden Elementen 60 p ist also im Grunde die Höhe von diesem und diesem ist 60. Sei Höhe bedeutet, dass der Abstand von oben aus einem Element dieses untere ein, die beiden Angst, so dass dieses. Okay, also wird der Abstand zwischen diesem und dem hier die Höhe sein. Aber wie viel? Dieses Anschlagpapier ist vom unteren angehoben. Okay, wenn du das hast, dann hast du zwei Hände. Überlappen Sie sich einfach die an der Spitze und sehen Sie, wie viel die Entfernungen zwischen Port von ihnen. Das ist im Grunde die Höhe. Jetzt haben Sie die Idee von der Höhe gefangen. All diese Höhe wird durch Schatten gesteuert. Wenn Sie Wenn etwas höher ist, hat es mehr Schatten um sie verteilt und es hat mehr Schatten, dunklere Schatten. Das ist alles, was wir uns erinnern müssen. Und du kannst sehen. Hier sind die ergreifenden Erhebungen von verschiedenen Elementen. Nun, wenn etwas höher ist, wie Sie Höhe und DPS 24 sehen können, bedeutet das, dass es an der Spitze von jedem anderen Element sein wird. Wenn also einige Dialogfelder erscheinen oder eine Farbauswahl etwas auf dem Bildschirm erscheint , können Sie nichts anderes tun. Das wird also die meisten Höhen haben und mehr Schatten abgerundet haben, als wir Navigation ziehen Rij haben . Unser Modell Bodenblech als 12 dp ist schwebende Aktionsleiste. Sie haben sie viele Male die eingekreist in gesehen und dann haben wir Untermenü. Dann haben wir diesen Boden. Sie sind versperrte manuelle Karten. Sie haben eine DB aus Höhe und dann haben wir die sechs Floating Action-Button Snackbar. Und dann haben wir diesen Abbott-Snack. Aber es ist im Grunde Statusteil ein wenig Stater, dass etwas getan wurde oder Ihre E-Mail ihre E-Mails gelöscht wurden oder so etwas . Dann haben wir diese re frische Indikator Quick Land Solche Bar solche Angelegenheit, dass all dies hat es drei Erhebung aus. Drei dp. Dann haben wir Karte ruhen Höhe, raced Tasten, Festnahme Erhebung. Dies sind die Tasten, die ah haben, Verhaftung bedeutet, dass sie nicht gedrückt werden oder sie nicht berührt werden. Also, sobald sie gedrückt werden, werden sie einige verschiedene Schatteneffekte haben. Und das ist der Schalter. Es hat eine dp so fast keinen Schatten. Okay, hier haben wir das Diagramm, wo Sie sehen können, was hier, 24 das sind die Höhen, also und das ist im Grunde einfacher Zugang von unten nach oben. Und dieser hier ist am meisten an der Spitze. Das überlappt alles andere. Dies überlappt alle diese Elemente, und dies überlappt alle Elemente darunter. Das ist also, wie diese Erhebung und das, was? Android Material Design Schatten funktionieren jetzt. Sie können hier sehen, wir haben diese schwimmende Aktion, aber das ist ein sehr schönes Beispiel. Und dann haben wir diese AARP sind jetzt können Sie an Bar sehen ist ein bisschen unten in der Höhe, also hat es hellere Schatten, OK? Und wenn man sich diese schwimmende Extra-Bar anschaut, hat es mehr Verbreitung und mehr Arzt um sie herum, es hat mehr Verbreitung. So ist es oben in der Z-Achse, so dass es mehr Schatten hat. So wird es funktionieren. Dann haben wir diese App knave Schublade auf der linken Seite. Sie können sehen, was es Mawr Höhe hat, die beide Floating-Action-Schaltfläche in einem Balken enthält . Also überlappt es beide von ihnen. Sein Schatten überlappt alle Elemente dahinter. Es hat eine Höhe von 16, so dass Sie schwebende Aktion sehen können. Aber es ist dahinter. Ein Körper ist auch dahinter. Dies sind also ein paar weitere Beispiele, wie diese Schatten funktionieren werden. Sie haben gesagt, dass diese schwimmende Aktion einen guten Schatten hat, weil sie erhöht ist. Es sollte sich hier oben zeigen, weil dies Sie diese Ah abaaoud auf der Rückseite sehen können . Es hat auch etwas Schatten, so dass Sie alle diese lesen können. Was sind verschiedene Schatten und was sind unterschiedliche Werte? Aber wir werden uns nicht an all das erinnern. Sie können sehen, dass wir hier sind, um DP Arresting Taste und gedrückt Zustand ist es wird eine DP bedeutet, dass Taste wird mehr erhöht werden. Sobald Sie es drücken und mit ihm interagiert, wird es in der Z-Achse kommen. In ähnlicher Weise können Sie diese sehen, was hier? Sobald etwas gedrückt wird, wird es mehr Höhe und weicheren Schatten haben. Es ist mehr oben. Sie können sehen, Prostata ist doppelt so hoch wie Ruhezustand. Ruhezustand bedeutet normale Taste, die nicht gedrückt oder im Verkehr ist und mit interagiert wird. Und wenn Sie es drücken, geht es zu Fuß, bewegt sich nach oben oder unten und hat einige Schattenunterschiede. Hier haben wir diese Karte Karte ist im Grunde diese diese Informationskarte und es hat Ruhe . Starrte Pflicht übertragen werden. 80 sein Nein, Sie können sehen, es hat mehr Schatten, weil es angehoben wird und dann haben wir diese Menüs Untermenüs . Sie haben mehr. Sie können sehen, dass das Untermenü mehr Schatten hat, weil es oben neben diesem Menü ist. Dann haben wir diese Dialoge. Sie werden am meisten an der Spitze sein. Und dann haben wir diese Schnappschublade 16 dp Es hat sich hier auf der rechten Seite geteilt. Das ist ein sterbliches Bodenblech. Es heißt. Vielleicht haben Sie es gesehen, wenn Sie versuchen, etwas von einer App wie Facebook oder so etwas zu teilen . Oh, unsere teilen Sie Ihr Bild und versuchen, auf den Anteil klicken, aber Und es wird Ihnen zeigen, dass Sie gehen, um Gmail zu teilen. Hängen Sie Google oder was auch immer. So wird es sterbliche Bodenplatte genannt. Dann haben wir diese drei frischen Indikator drei dp Es ist auch Taste und dann haben wir diese solche Barcode Land. Sie können sehen, dass dies eine solche Bar ist und es hat ein dauerhaftes sagen, um State drei dp auf diesem Snack Bar zu schrauben . Dies ist im Grunde nur eine einzelne Zeile Aktion. Etwas wie dieser Indikator in der Anzeigeleiste 60 p Dann haben wir den Schalter. Dies ist der Schalter und es hat eine dp aus Höhe. Also denke ich, dass es darum geht. Ach, Höhe und Schatten. Ich werde Ihnen zeigen, wie ich diese Schatten habe. Ich habe Material heruntergeladen Io PST-Datei Und jetzt können Sie sehen, hier haben wir alle Schatten, so dass wir ich nicht brauchen, um alle Einstellungen zu vielleicht drei d p Ich habe alle Schatten mit mir Lassen Sie mich Ihnen zeigen Dies sind alle Hemden, Schatten auf der rechten Seite können Sie sehen und wir haben ah, vier dp. Und es gibt im Grunde zwei Schatten, weil die Lichter waren zwei Lichter, Es s so gibt es zwei Schlagschatten. Einer ist diese 176 und 10 24%, die Ah, ein bisschen Licht Schatten ist . Denk dran, denke ich. Und das hier ist Sempra, und ich bin mir nicht sicher, ob es sich um französische Wörter handelt, also spreche ich sie vielleicht nicht aus. Richtig. Okay, so haben sie also mehrere Multiplikationseffekte, weil diese Schatten zusammen mischen, so dass Sie herunterladen können, gehen Sie voran und laden diese materiellen Schatten von den Ressourcen. Denkt, ich muss alle Ressourcen-Links unterstützen, damit Sie diese herunterladen und mit diesen experimentieren können . Ich hoffe, Sie haben dieses Höhen- und Materialschattenkonzept verstanden. Und ich möchte wirklich, dass du das lernst, weil ich keinen Kurs gesehen habe, oder jemand all dieses andere Zeug predigt. Also dachte ich, dass ich den detaillierteren Kurs über Materialdesign machen sollte, also hoffe ich, dass Sie die Sitzung genießen. Wenn Sie Fragen haben, die Sie mir stellen müssen, fahren wir mit der nächsten Lektion fort. 14. ♥ 8-Punkt-Raster in Adobe XD und Material Design: Baum. Ich werde Ihnen zeigen, was acht Punkt Grid System ist und warum Android Mobile Design oder Google Material Design verwendet es. Okay, jetzt bin ich in Adobe Exit E und, ah, Sie können neue Kunsttafel erstellen, und wir werden dieses Android-Handy verwenden, und ich werde Ihnen beide die Gitter quadratischen Raster und Layout zeigen für und schreiben Sie mehr beißt. Ok? Nein. Zuerst gehen wir zu diesem Quark zu gehen, stellen Sie sicher, dass Sie dieses Kunstbrett ausgewählt haben, und die Spalten waren dabei, unsere sechs zu verwenden, und auf beiden Seiten waren dabei, den Rand von 16 Punkten zu verlassen. Dies ist also ihre Grundnote für das Layout. Also sechs Säulen auf beiden Seiten. 16 Rand Spalte Schrift ist 48 Katar Raum zwischen verschiedenen Spalten. Ist es das? Das ist also da. Im Grunde. Jetzt werden wir diese replizieren, indem wir Kunst oder Optionstaste drücken. Und jetzt wechseln wir zum Quadrat. Okay, Also quadratische Größe können Sie entweder verwenden, weil es Gier auf acht Punkt-Gittersystem basiert . Also werden wir die Noten von ihrer oder jeder Kiste aufteilen. Dies jede Box Übersetzung Zehe. Acht Punkte sind also die acht dp's. Ich schätze, im Moment werde ich vier benutzen. Jetzt. Warum verwende ich für Weil sie typografisch sind oder ihre typografische Baseline Lady Toe mit dieser vier dB-Baseline ist . Okay, also verwenden sie vier DP-Linien Zehe Sie Richten Sieihre Typografie aus und trennen Sie die Steuer voneinander oder den Abstand zwischen zwei Linien in irgendwelchen Decks. Okay, also lass mich dir ein Beispiel zeigen. Diese Zone rein und ich werde hier drüben etwas mit dieser Größe von 16 eingeben und ich werde benutzen Robertobenutzen, ich will sagen hallo, Liebes. Okay, jetzt kannst du ihren Anzug für das Brett sehen. Okay, jetzt können Sie sehen, ob Sie sich den Port von diesen Buchstaben ansehen, sie sitzen auf diesen Zeilen von vier DP. Okay, Sie können hier sehen, dass es hier drüben in der Linie sitzt. Dann gibt es eine Lücke von fast zwei Kisten hier drüben. Also eine DB-Lücke zwischen beiden von ihnen und dann berührt diese Linie auch dies am unteren Rand. So ist es, wie sie lügen, wird Zeh sitzen so. Okay, Also, wenn ich 16 verwenden werde, auch wenn ich 16 Punkte verwenden werde und dann werden wir 24 verwenden , die da liegt Höhe. So können Sie sehen, das ist, wie es geht Zeh aussehen so Zeilenabstand. Du brauchst Zeh. Stellen Sie immer sicher, dass es sich um ein Vielfaches aus vier handelt. Also, wenn ich zu 20 gehe, wird es wieder auf die Linien hier drüben sitzen. So funktioniert die Textausrichtung unserer Textbasislinie. Sie können auch so etwas verwenden, so dass Sie auch Schaltflächen hier auf ablegen können. Sie werden wieder ähnlich wie die DP übersetzt werden. Also gerade jetzt ist meine Balance Größe 10 voll dp breit und 36 dp hoch. Stellen Sie also sicher, dass Sie so etwas benutzt haben. Okay, also lassen Sie uns verkleinern und sehen, wie es Looking S O. Das ist das Raster. Ihr Kanus zieht eine Linie auf meine Jahre, Eure Elemente nach da, acht DP-Glaubensbekenntnis oder vier DP-Pixel. Großartig. Okay, also ist das im Grunde vier dargestellt, die ich benutze Es ist gleich im Schlepptau. Acht. Oder es ist ähnlich wie ADP, weil vier ein Vielfaches aus ist. Okay, also unsere achtziger Jahre Vielfaches von vier. Also sind sie beide vier ist im Grunde die Hälfte davon. Das macht also Sinn. OK, wenn Sie also in Adobe X T entwerfen, denke ich, Sie sollten versuchen, dieses quadratische große Leder als dieses zu verwenden. Vielleicht diese, die Sie für Layout verwenden können, aber ich lasse würde gerne sehen, mit diesem ein rechts Ein quadratisches Raster off square, Größe vier dp und verwenden Sie die Android Mobile Art Board Und das ist alles, was Sie brauchen. Okay, also hoffe ich, Sie haben diese Layout-Klasse genossen und acht DPP Excel Größere 40 Leute feiern und wie ich in Adobe X'd angelegt habe. Wenn Sie Fragen haben, die Sie mir stellen müssen, fahren wir mit der nächsten Lektion fort. 15. Matrizen und vertikale Räume im Design von Android App: Nein. Sie haben bereits verstanden, was eine DP-Rasterlinie oder ein 8-Punkt-Stromsystem ist und wie Enright Materialdesign darauf aufgebaut ist. Jetzt gehen wir in mehr Details über vertikale Abstände, wie verschiedene Elemente unterschiedliche Höhen haben, wie diese Höhen beibehalten wurden und warum dieses gesamte Materialdesign einzigartig und schlank aussieht , wenn jede App darin entworfen ist. Jetzt basiert alles auf der vertikalen Dimensionierung, den Linien und dem Abstand, und dieses ganze System wird zusammen mit Ihrem acht Punkt oder einem DP Cred arbeiten. Also lasst uns anfangen. Ich werde Ihnen zeigen Dies ist das Dokument, das ich von Google Material Design heruntergeladen habe und es ist in Adobe Illustrator. Und jetzt können Sie sehen, es geht um mehr mobile Schlüssellinien und Abstände. Jetzt gibt es ein paar Dinge, die Sie verstehen möchten. ADP ist der kleinste Block oder die vier DP ist die kleinste Blockgröße im Android-Materialdesign . Jetzt, wann immer du etwas baust, selbst wenn du ein Haus baust, muss es kleine Blöcke geben und es muss größere Blöcke geben. Zum Beispiel haben alle Ihre Fenster die gleiche Größe. Das ist also ein größerer Block. Es ist nicht gleich der Größe von dem Ziegelstein, den Sie verwenden. Also alle Steine, sie sind die kleinste Größe, die zum Beispiel ein TBI sein wird , und zum Beispiel die zweite Größe Blockgröße. Sie möchten einen größeren Block verwenden, Sie möchten dafür 56 db verwenden? Also im Android-Materialdesign, wenn Sie sich hier ansehen, fest, fest, inkrementell, bestimmen, mit aus strukturellen Elementen bestimmen. Also vor allem die U-Elemente. Sie haben ihre 50 60 p unclement Größe, so dass sie diese größere Pause für ihre U-Elemente verwenden. Dann gibt es die zweite Sache, die vertikale Größenschlüssel ist. Jetzt, wie verschiedene Elemente dimensioniert werden. Was wird der Abstand zwischen ihnen sein? Es ist auf all diesen Blöcken aus verschiedenen Größen gebaut. ADP Der Farbschlüssel ist dieser A tief ist die Größe 16 dp als 24 48 64 56 70 zu 80 ein Idiot. So basiert das gesamte Android-Materialdesign auf diesen Bausteinen. Wir haben 123456789 Typen aus verschiedenen Ziegelgrößen, und wir werden sie verwenden, um unser Android-Materialdesign zu bauen. Jetzt geht die vertikale Dimensionierung auch zu Fuß. Bestimmen Sie die Größen von verschiedenen Elementen. Auch die horizontalen Ränder werden hier drüben sein. Also werde ich es dir zeigen. Lassen Sie mich einfach die Schlüsselgröße hier einschalten. Jetzt können Sie sehen, ich habe meine vertikalen Schlüssellinien aktiviert und Sie können sehen, dass sie im Grunde zeigen die Ränder und die Bilder jetzt auf der linken und der rechten Seite. Wenn Sie, wenn ich vergrößern, können Sie auf der linken und der rechten Seite sehen. Es gibt eine Marge von 16 db auf beiden Seiten. Es ist gleich Rand und der ganze Text, der hier auf der linken Seite ist. Es ist mit 72 dp Abstand von der Grenze auf der linken Seite ausgerichtet. Der Text hat also eine Streichelung oder einen Rand von 72 beiden Seiten haben 16 dp abseits der Ränder auf beiden Seiten. Okay, lass uns andere Dinge sehen. Sie können sehen, wie das auf allen verschiedenen Geräten gut aussehen wird. Jetzt können Sie hier drüben sehen. Es gibt doppelte Marge von 16 und 32 auf diesem Handy App verwendet, wo sie mehr Symbole hier oben hier aufgereiht haben . So jetzt können Sie sehen, es gibt zwei Ränder hier 16 und 32. So gaben sie ein bisschen mehr marginale Haare, wenn es eine bessere noch hier. Also gaben sie ein bisschen mehr Abstand für diesen Inhalt in diesem Bereich hier drüben. Ok. In ähnlicher Weise können Sie hier drüben sehen. Dies ist Navigationsschublade, und Sie können hier sehen wir haben 56 dp Größe, die eine andere Ziegelgröße ist, unsere Hauptelementgröße. Und der Rest ist fast der gleiche. 16. 70 bis 16. Sobald Sie dies verstanden haben, können Sie einfach großartig aussehende APS entwerfen. Und es wird kein Rätsel für Sie sein, wie mit Materialdesigner Coogan Materialdesign zu entwerfen. Okay, jetzt kommen wir zurück zu diesem Partikelgrößenschlüssel, und ich werde hervorheben, was anders ist. Verstecken Sie einfach diese, und ich werde diese Größe inky hervorheben. Wenn man sich diese Farben anschaut,werden sie in diesem oder 80 hier drüben anwesend sein. Wenn man sich diese Farben anschaut, Jetzt können Sie sehen, dass dieser rote war gleich einer DP. Also ein dp Seitenabstand zwischen diesen beiden Elementen, dann haben wir acht und 8 16 db und dazwischen haben wir eine separate Linie. Lass mich das anstrengen und es dir zeigen. Sie können sehen, dass Sie wissen, wie der Abstand perfekt funktioniert. Dies wird als vertikaler Rhythmus bezeichnet. Sie haben einen schönen, schönen vertikalen Rhythmus mit diesen Schlüssellinien und vertikalen Key-Dimensionierungsblöcken erstellt. Und ah, wenn du dir das ansiehst, ist das violett. Lassen Sie mich sehen. Dies ist 72 DP in der Größe in Hyde. Das ist vertikal mit ihnen. Also ist alles. Die Größe ist vertikal. Jetzt ist das Ah, hellblau. Mal sehen. Was ist ein blassblaues hellblau ist 48 dp. Das ist also, äh, das ist 40 Jahre DP. Also dieser ist 48 dp Eine scharfe blaue Farbe, die 50 60 p ist, die Ihre Luftstange ist. Es ist in 50 60 p. Also, wenn Sie diese Datei haben, können Sie leicht das ganze verschiedene Dimensionierungssystem aus Materialdesign berechnen und es wird ein Stück Kuchen für Sie sein. Sie können sehen, dass das ein bisschen lila ist. Das ist blau, dann sind diese auch geblasen. Es bedeutet, ich denke, das ist ein oder zwei TB-Linie hier drüben. Öffnen wir jetzt die horizontalen Ränder. Dies sind die gleichen, die wir bereits vor 16 diskutiert haben. 72. Alle diese Zeilen sind 16 dp breit und diese ganze Entfernung ist von hier nach hier Es ist 72 db und der Text ist auf der 72. Sie sind auf der Seite. Okay, Ich hoffe, Sie haben diese Lektion genossen und Sie haben verstanden, was bedeutet diese vertikale Größenbestimmung und was ist die Ski? Dies sind alle Bausteine aus verschiedenen Größen für Android-Materialdesign. Eine weitere Sache, die ich hier erwähnen möchte, gibt es eine geborene Begrenzungsrahmen für jedes Element, das Sie sehen können, obwohl jedes Element anders ist diese Symbole um es herum oder so etwas . Aber sie sind Begrenzungsrahmen, die die tatsächliche Größe in diesem Android-Materialdesign ist anders. Das ist also 56 mal 56 DP. Das Haar ist der Knopf. Und ich denke, das hier ist ah, vielleicht 48 dp, schätze ich. Und diese Symbole sind 2040 Menschen würden später in der nächsten Lektion über diese Symbole sprechen . Ich hoffe, Sie haben diesen Schlüssel verstanden. Vertikale Linien, vertikaler Rhythmus, vertikaler Abstand. Wenn Sie nicht wissen, was vertikale Artikel ist, habe ich einen vollwertigen Kurs über Typografie, vertikal von ihnen und all das Zeug. Wenn du das nehmen willst, kannst du das nehmen. Ich hoffe, Sie haben diese Lektion genossen. Gehen wir zum nächsten. 16. Tastaturen und Symbole für die Android-App: in diesem. Hören Sie, wir werden über Schaltflächen, Symbole und Touch-Zielgrößen sprechen . Und was sind die Gemälde angewendet Zehe die Symbole auf Android-Geräte und Materialdesign. Jetzt gibt es Standard für jedes Touch-Ziel, weil Sie Symbole und Ihre Schaltflächen sind, werden sie interaktiv sein. Also, wenn jemand auf sie klopfen geht, müssen sie gleich Zehe ihrer Fingergröße sein. Oder zumindest ist es einfacher für sie, darauf zu tippen. Also die Standardgrößen 48 vor dem a. D. B. Und es basiert auf der Forschung, dass die Fingergröße jeden Finger 7 bis 10 Millimeter kentert . Also, nach, dass ihre Größe ist fast neun Millimeter schreiben 48 dp Also verwenden sie neun Millimeter für ihren Standard. Also, wenn Sie Ihre App in Android Mobile Design oder jede Art von mobile App entwerfen, sollten Sie kümmern sich um die Sterne Stargate Größe für unsere USA. sollten Sie kümmern sich um die Sterne Stargate Größe für unsere USA. Ich denke, es ist ein bisschen anders, aber für Android ist es 48 dp. Ich denke, es ist ein bisschen anders, So, jetzt können Sie auf der rechten Seite sehen Es gibt diese Aktion. Symbole sind in der Anbar und dann haben wir Ah, hier haben wir mehr fähig Bereiche mit sind die Bilder, die Sie auf sie tippen können. Und ah, da ist diese Plus-Symbol hier drüben. Dies ist auch interaktiv. Und jetzt können Sie sehen Lassen Sie mich Ihnen zeigen, was ist, wie sie verschiedene Abschnitte hier verwenden . Das ist also Ihre Ikone hier drüben? Es muss abklopfen, um es herum zu schlagen. Sie können den weißen Bereich sehen. Es hat etwas Platz. Also ist es im Grunde, auf und weiter zu dp. Das kannst du wieder sehen. Es gibt fast zwei dp auf allen Seiten oder vielleicht vier, denke ich. Dann können Sie sehen, um, dass sie mehr Streicheln oder Abstand dieser rosa Bereich, die Sie sehen können was? Hier. Also das ist Ihr Symbol und auf allen Seiten ist es ein vier dp off ausstehend. Denken Sie also daran, dass, wenn Ihr Symbol 48 dp aus der Größe ist, es muss sein, wenn Sie entwerfen Sie sind ein Icon-Designer für Android Mobile Labs. Ihre Symbole müssen ein Streicheln oder vier dp auf allen Seiten haben. Sie können sehen, was Treffer Dies ist ein Touch-Ziel. Also in diesem Fall, das Symbol tatsächliche Größen 40 db Aber sie sind in der Lage Größe oder Ziel-Touch Zielbereich ist 48 dp Nun ist dies ein Symbol, das Standard kleine Symbole ist. Es handelt sich um 24 Schweine oder 24 Dips oder DP's. Und wenn du es dir ansiehst, kannst du sehen. Aber sie sind Berührungsziel. L wird immer 48 dp und der Abstand zwischen diesen Werkzeugen zu Bereichen sein. Lassen Sie mich es Ihnen zeigen. Sie können sehen, was jede Punktsymbole hören. 40 DP Dies sind unsere Symbole abzulenken. Ich nenne die kleinen, kleinen Icons, die sie werden 24 dp Touch Target sein wird auf beiden wird 48 Dips oder DPs sein . Und es gibt noch eine Sache, die der Abstand zwischen tun diese Zehe fähig Bereiche muss gleich 80 Stück sein. So ADP Lücke zwischen ihnen, so dass Sie sehen oder hören, hören können. Wir haben eine tiefe Lücke zwischen ihnen und wieder in diesem Abschnitt. Wir sind hier, Sie können sehen, widersprechen und zustimmen, dass es eine Obergrenze für eine DP zwischen ihnen gibt. Das ist also ihr Berührungsbereich. Das ist Ziel, und die Lücke ist eine Debatte zwischen ihnen. Damit der Benutzer keine Männer verpassen, Miss, wissen Sie, Miss Habit. Ich denke, das wäre wenig falsch und klicken Sie irgendwo anders, wenn Sie wollen. Wenn sie will, dass sie auf Unzustimmen klickt, kann sie am Ende nicht hier rüber klopfen. Also hier haben wir wieder. Die Tastengrößen, die 30 60 p sind, sind die minimale Höhe von der Belastung. Dies ist die minimale Höhe jeder Taste, für die Sie entwerfen und schreiben mobile Designer Android Model Design 30 60 p ist die Höhe und 48 db ist tatsächlich das Touch-Ziel, also müssen Sie einige Polsterung um sie herum haben, um diese Größe zu verwalten. Also streichelst du Bluff. Die Belastung sollte 48 DPs betragen. Okay, also noch eine Sache. Diese Icons hier drüben werden sie Systemsymbole genannt, ihre Android-Symbole. Und wenn Sie diese Symbole wollen, können Sie zu diesem ein Material Punkt io Schrägstrich Symbole gehen. Sie können nach einem beliebigen Symbol suchen oder alle diese Symbole durchsuchen. Klicken Sie einfach auf eine aus ihnen, so dass es ausgewählt wird, und Sie können unten sehen Sie DP 24 dp 32 db 48. Egal welche Größe Sie wollen, Sie wollten in schwarz oder weiß und wählen Sie SPG. Ich denke, s das ist das Beste, wenn Sie P und G oder Icon-Formulare wollen, die es für Sie generieren kann . Sie können ein beliebiges aus diesen Symbolen auswählen. Eigentlich verwende ich diese Symbole in meinem AP in der letzten Übung in dieser Lektion, so stellen Sie sicher, dass Sie von ihnen Material dot ru Schrägstriche Symbole herunterladen können und Sie können diese Symbole herunterladen . Und jetzt werde ich das hier tun, um Ihnen ein paar von den Knöpfen des Staates zu zeigen, und wie verschiedene Arten von Lasten haben. Also haben wir eine dieser schwebenden Action-Button. Es hat diese einfache gesagt und dies hat wirklich vorgeschlagen, wo sie es haben, einen breiteren ID-Schatten hat . Dann haben wir diesen flachen Knopf. Dies ist eine gerade angeordnet. Das ist also normal. Aber in diesem ist ein Touch-Zielbereich, dies ist wieder normal Taste auf. Es hat etwas Schatten um ihn herum. Das sind also zwei Arten von Patenten. Dann haben wir den gleichen Knopf, unterdrückt und deaktiviert. Nun, in dem Fall aus diesem, die Prostata wird einige Grenze wie dieses graue Hemd abgerundet haben und deaktiviert wird dies schaffen deaktiviert, aber ärgern ihn. Das sind also zwei verschiedene Teams dunkel und hell. Und es gibt noch eine Sache. Okay, jetzt werde ich Ihnen eine andere Art von Symbolen zeigen, die Launcher App genannt werden. Icons von Produktsymbolen aus Material Google-Design wird Materialdesign und all diese Symbole können Sie sehen, dies ist der Bildschirm abgeschossen von meinem Samsung Gerät Android-Gerät, und Sie können hier sehen, diese sind alle das Symbol, dass sie in 48 DPs sind. Ich habe einen vollständigen Kurs zum Erstellen dieser Launcher-App-Symbole von Produktsymbolen Wenn Sie möchten, können Sie dort Ihr eigenes APS-Symbol entwerfen. Wenn Sie tun, was Sie können, schauen Sie sich diesen Kurs an, so dass dies andere Symbole sind. Also die tatsächlichen Icons, die wir in unserem Apple als Systemsystem-Icons verwenden werden und diese werden als Produkt-Icons bezeichnet . Also, wenn Sie mehr Details über verschiedene Grid-Systeme und führen ihre Verwendung für die Entwicklung dieser Gestaltung dieser Icon-Systeme wollen, können Sie diese Design-Richtlinien wirklich Design-Richtlinien gehen, Stil und Symbole. Ich werde dies verlinken, um Ihnen diesen Link zu zeigen, teilen Sie diesen Link mit Ihnen, und ich hoffe, Sie haben dieses Symbol Größen genossen, Tastengrößen und all das Zeug aus der Benutzerfreundlichkeit, dass wie viel Touch-Ziel wir brauchen? Wenn Sie Fragen haben, die Sie mir stellen müssen, gehen wir zur nächsten Lektion 17. Material: in dieser Lektion. Wir werden auf die Tupfen aus Android Material Design aussehen und warum wir sie verwenden. Was sind verschiedene Arten von diesen Stichen? Und was sind die Metriken und Designspezifikationen? Was sind die Größen in DB oder Dips für diese Schritte? Okay, also lasst uns anfangen. Nein. Zuerst werden wir sehen, was die Komponenten von den Stichen sind. Sie sind zwei Arten. Es gibt zwei Arten von Registerkarten. Eine sind feste Schritte, die Sie in diesem Freitag Bereich sehen können, gibt es drei Registerkarten und sie sind nicht Schule Kräuter. Also, wenn Sie, wie, hier haben wie, vier oder fünf Tippen, dann werden sie aus dem Bildschirm gehen und Sie können zwischen vier oder fünf verschiedenen Tabs scrollen . Fixierte Bauchmuskeln, sie werden drei sein. Fix Wasserhähne und Sie können einfach zwischen diesen drei scrollen, Schritt auf sie und bewegen Sie die Zehe dieses Abschnitts. Jetzt werden Registerkarten auf ihnen vorhanden sein. Sie können jede Farbe von Ihrer eigenen Marke oder Ihrer eigenen Website oder Ihrer eigenen App oder von der gewünschten Farbe in Ihren mobilen Tabs verwenden. Und das ist alles. Ok. Warum benutzen wir sie jetzt? Dies ist die zweite Frage im Grunde die Registerkarten. Sie werden Ihnen helfen, Ihre Inhalte zu gruppieren und es bietet die leisten Ins aus der Anzeige Gruppeninhalten. Jetzt hier können Sie sehen, es gibt verschiedene Arten von Tab-Anwendungen. Wo Sie anwenden können, tut und wie Sie anwenden können Diejenigen, die es auf der linken Seite gibt, können Sie Default ihre Balken plus fixiert dort sehen . Aber das ist eine Bar. Dies wird ausgelagerter Titel oder Ihr Bewerbungstitel sein. Dann haben wir noch einen. Eine weitere Anwendung aus, die an Bar verlängert und an Bar fixiert. Sie können hier sehen, wir haben nur drei Artikel. Deshalb werden sie als fixiert bezeichnet und man kann sehen oder hören. Dann haben wir diese Pinch Pinch Schulinhalt Tab-Bars. Es gibt keine Bar an der Spitze und nur die drei Abschnitte waren hier und dann haben wir mit diesen verdammten Bars so versperrt. Dann haben wir diese sind die Schriftrolle Kräuter ihre Bars. Jetzt können Sie sehen, dass der Unterschied zwischen Schraube Rebellen und fixiert ist, dass feste gehen um von der Kante aus diesem Abschnitt beginnen. Okay, so Rand von Ihrer ganzen Leinwand oder Android-App, und es wird weg von, dass beginnen. Ich denke, es wird fast 72 db von hier entfernt sein. Sie können sehen, dass dies richtig mit jedem von ihnen ausgerichtet ist. Der Text aus diesem Punkt Eins und Friedenstitel. In ähnlicher Weise können Sie hier sehen wir mit Symbolen, die gleichen Registerkarten mit Symbolen. Und das sind die, die wir in unserem Anwendungsdesign mit Fotoshop und Adobe X'd verwenden werden. Das habe ich benutzt. Dies ist mit dem Symbol und dem Titel hier drüben. Okay, also hat jeder Stich einen Titel , der in allen Kappen, in allen Kappen sein wird . Sie können Favoriten in der Nähe drei sehen, da die alle alle Kappen. Also diese Luft für Desktop-Tabs, Wenn Sie für Desktop vielleicht oder Tablet entwerfen, vielleicht können Sie diese anzeigen. Ich werde den Link einschließen. Ok, jetzt gibt es ein paar Dinge, die Sie berücksichtigen müssen, während Sie diese verdammten Buzz zuerst verwenden, ist, dass sie auf Gruppe ähnliche Inhalte gehen. Okay, wenn Sie also mit Gönner auf Design-Gönner vertraut sind, was ich in meinem User Experience Design für größere Schulen diskutiert habe, können Sie Sie hier auf der linken Seite sehen Musik, Filme, Bücher, Spiele. Sie sind also Kategorien aus einem Geschäft. So gibt es verschiedene Kategorien und Sie können von ihnen kaufen. Nun, hier auf der rechten Seite, ist dieses Beispiel ein bisschen falsch. Sie haben also verzweifelt, dass man so etwas nicht tun kann. Profilidiom Sichtungen helfen, weil sie alle unterschiedlich sind. Ähm, sie sind alle verschiedene Kategorien, also kannst du deine Haare sehen. Tun Sie nicht, dass absolut Zwischen den Destinationen sind sehr wichtig innerhalb des Ladens. Diese sind also nicht miteinander verwandt. Dies sind im Grunde die Gruppierung dieses Inhalts. So sind Filme in einem Inhalt, einem Abschnitt, einem Tab gruppiert . Also das ist ihre primäre Sie ähnlich hier drüben können Sie sehen, dass Sie nur Zehe brauchen, die sie so vereinen . Sie können sie nicht benutzen. Ah, vertikal übereinander gestapelt. Es gibt noch eine Sache. Es gibt keine einige Menü sind die sub ihre Bar. So etwas kannst du nicht tun. Es gibt nur eine große Kategorie. Dies ist im Grunde Navigation Design Gönner eso müssen Sie kümmern sich um sie zu nehmen. In ähnlicher Weise gibt es eine weitere Anwendung, die, wenn Sie ah, sehr großen Namen verwenden, so etwas verwenden werden. Neuankömmlinge und Tochter Dort. Du kannst die ganze Welt nicht so benutzen. Und das kannst du auch. Sie sollten die vier Größe minimieren. Ich denke, die vier Größen hier drüben unterschiedlich sind. Ok. Ok. Das ist also alles, was die Registerkarte „Fix“ ist. Drei Artikel, als wir verschiedene Registerkarten haben. Okay, das ist es, was wir hier besprechen wollen. Spezifikationen, feste Laschen. Ok. Jetzt können Sie die Wasserhahngrößen sehen. 40 Jahre DP, die eine Standard-Hahngröße ist, dass alle fähigen Elemente, wo Sie tippen müssen, aber Ihren Finger Sie müssen 48 db in der Höhe sein. Es ist nicht wahr für die Tasten. Tasten haben 40 30 60 gereinigt. Aber sie haben Polsterung im Lieferumfang enthalten. Also werden sie wieder im Grunde 48 sein. Okay, dann können Sie sehen, welches Haar 20 dp die untere Polsterung dieses Textes ist. Also müssen Sie Ihren Text 20 dp von der unteren Zeile aus diesen Punkten verschieben 12 bp ist der Rand zwischen den Tabs auf beiden Seiten, rechte und linke Rand wird 12 dp sein. Und das ist alles, was ich denke. Okay, jetzt gibt es noch ein paar Dinge wie mich. Okay, also will ich diesen einen Zeh, weil wir diesen benutzen werden. Also brauchst du Zeh was? Eigentlich sind die Denkmäler für diese Registerkarten mit Symbolen. Jetzt können Sie hier sehen, dass die unteren Decks 16 db von unten entfernt sind. Und es gibt einen Abstand von 10 dp zwischen diesem Symbol und diesem Text für das Symbol. Ich storniere unseren Standard 24 dp für alle Systemsymbole, wie Sie hier sehen können. Dies ist ein solches Symbol. Dies ist mehr Icona-Menü-Symbol. Sie sind alle 24 dp's die ganze Höhe von diesem Stich unsere einschließlich der Ikone hier ist 72 TB. Das ist also, waswir was in unserer App verwenden werden. Also brauchst du Zeh. Denken Sie, was sind die Spezifikationen? Sie müssen diese im Hinterkopf behalten. 16 tief von unten 10 db auf dem Abstand zwischen dem Symbol und diesem werden wir bereits hergestellte Gönner verwenden und wir werden Sie wie es verwenden. Also müssen Sie sich nicht an all diese erinnern Denken Sie nicht, dass Sie sich an all diese ähnlich hier Herz erinnern werden. Mehr Spezifikationen. 40 Jahre DP 24 db 12 BP von unten für die Symbole und ein paar weitere Spezifikationen können Sie hier sehen . Diese sind für die Registerkarten, die unergründlich sein werden. - Tanz. Sie können sehen, Ihre Haarschule Herbal Tabs haben eine 72 D p off Rand links, die geht Zehe richten Sie diesen Text mit diesem ein und Sie können sehen, es ist ein bisschen außerhalb. Der gelbe Balken ist außerhalb von diesem, also denke ich, es wird so etwas wie 56 oder 64 hier drüben sein. Und das scheint wie eine 16 Baby-Lücke hier drüben zu sein. So ist es, wie es wird ein Spiel spielen 20 dp von unten 12 12 dp 12 db auf beiden Seiten und ah, es gibt ein paar weitere Spezifikationen Sie können sie lesen oder maximal hören. Was ist eine maximale DP-Größe für jeden Schritt bis 64 dp Und was ist das Minimum? Okay, also das sind all die Dinge, die ich dir ansehen möchte. Sie müssen sich nicht alle auswendig lernen. Aber wenn Sie etwas spezifisches für Desktop oder Tablet entwerfen, müssen Sie sich diese vielleicht ansehen. Okay, also dreht sich alles um Tabs. Was sind die verschiedenen Arten von Registerkarten zu beheben und Schule über? Was ist ein deutlicher Unterschied zwischen ihnen? Einer teilt die ganze Registerkarte in drei. Und einer beginnt von hier drüben. Ok. So können Sie sehen, was passiert ist. Das ist also der Hauptunterschied. Es gibt ein bisschen Unterschiede zwischen den Spezifikationen. Ich hoffe, Sie haben diese Lektion genossen. Fahren wir mit der nächsten Lektion fort. 18. Appbar und Spezifikationen in der Google Materials Design: in dieser Lektion. Ich werde dir zeigen, was die Magie in Bar sind? Weil der Abbott auf den Fuß ging. Kümmere dich wieder und wieder auf diese. Wir werden jede App zu entwerfen. Fast jede App würde dies an der Bar an der Spitze haben. Jetzt können Sie sehen, dass wir von diesem Wasser in die Matratzen gehen. Die Entfernung ist alles in Ordnung? Also haben wir bereits bei 16 Pixeln diskutiert Ist der Rand auf beiden Seiten und 72 ist der linke Rand für unsere Polsterung für diesen Titel oder den Text? So können Sie jetzt in den beiden Beispielen sehen, dass dies ein bisschen auseinander verbraucht wird und das ist ein bisschen kurz und bar. In beiden Fällen beträgt der Abstand von links 72 DPs und die Höhe vom Luftbalken 8 56 Es wird immer 56. Sie können sehen, dies ist der Bereich, in dem wir diese 56. Und das sind die Symbole 24 db-Icons. Und sie haben diesen Vorrat so viel. Das ist Ziel 48 dp um sie herum. Sie können sehen, dass das hier die blauen Kisten sind. Und wenn Sie hier rüber schauen. Du kannst es wieder sehen. Wir haben 16 pp auf der linken Seite Rand für diese Symbole und ah, die untere Bettwäsche für den Text wird 20. Das ist also das. Du musst es aufnehmen. Jake starb im Hinterkopf, dass Ihr Titel 20 sein wird. DP ist weg von diesem Grund. Okay, also in diesem Fall, der erweiterte. Die Gesamthöhe vom Luftteil beträgt 1 28 dp's und in diesem Fall 50 60. Nun, schauen wir uns ein sehr schönes Beispiel aus einem tatsächlichen App-Projekt Monumental Projekttitel, Flughafenbeschreibung. Jetzt können Sie in diesem Beispiel sehen, dass es Ihnen zeigt, wie dieses ganze System außerhalb der Linie und durcheinander Matratzenmetriken verwendet werden sollte. So können Sie sehen, das ist die 56. Dies ist ein aber dann haben wir diese 80 für diesen Bereich und es tp Augen für das Streicheln verwenden. Jetzt 80 plus acht ist gleich 88, was ihre größte Blockgröße ist. Sie können sehen, was ich jetzt wieder bekomme, Sie können sehen, dass der nächste 72 DPs für diese Beschreibung aus diesem Projekt ist. Aber wieder, sie haben 16 DP's off-Wetten verwendet. Jetzt 72 plus 16 ist wieder 88, so dass diese beiden Blöcke 88 sind. Aber das sind sie. Sie haben Aufzuchtentfernungen, indem Sie die verschiedenen Ränder und Bettdecken um sie an der Unterseite verwenden, und Sie können sehen, wie sie dieses schöne Layout erstellt haben. Jetzt können Sie dieses ganze System sehen, wenn Sie dieses ganze System verstehen, dass, wie Sie diese verwalten und verschiedene Blöcke mit Bettwäsche und verschiedenen Höhen löschen können. Mit diesem Acht-Punkt-Gruppensystem und acht Punkt-Schlüssellinien und Matratzen, können Sie einen schönen vertikalen Rhythmus erstellen, und ich erschaffe Blick genial aussehende APS. Nun, wenn Sie sich fragen, was ist die Größe von dem Status? Aber es sind 24 DPs. Also, wenn ich vergessen habe, es als Top-Statusleiste zu erwähnen, wo wir diese Zeit Batteriezeichen haben, hat es die Höhe von 24 DPs. Ich glaube, das ist alles für mich. Wenn Sie Fragen oder Probleme haben, können Sie mich fragen. So haben Sie in der nächsten Lektion gesehen 19. Listen im Material Design: Okay, jetzt, in dieser Lektion werden wir über Listen sprechen. Sie haben diese Listen in Ihrem Gmail-Posteingang und viele andere APS gesehen, wie Ihre Kontakte in all diesen Arten vielleicht nicht, Listen haben das gleiche Bit und sie haben Regeln. Sie können sehen, was hier. Und sie nennen eine Kachel im Grunde, weil sie sehr in verschiedenen Größen gehen. Okay, wenn Sie also einen kleineren Inhalt haben, werden Sie kleinere Kachel verwenden, und wenn Sie einen größeren Inhalt haben, werden Sie Zehe verwenden eine größere Reifengröße. Also, das sind im Grunde Regeln, die Sie hier sehen können. Lassen Sie uns direkt auf die Spezifikationen und all diese verschiedenen Größen gehen. Okay, das sind also die Grundlagen auf der rechten und linken Seite. Dieser Listeneintrag, Ihr ganzer Listenbereich, es wird ein Streicheln oder Ränder von 16 und 16 hier haben, dann wird der Text, der der Standard 72 ist, die Ausrichtung von links sein. Es wird 72 dp und ah haben, Liste Artikel Hochzeiten werden 16 auf beiden Seiten sein. Das ist das Gleiche, das Sie hier sehen können. Okay, also noch eine Sache, wo ich wirklich will, dass du den Zeh hast. Wer ist das hier? Okay, damit du hier drüben sehen kannst. Dies ist die oberste Grenze hier für die ganze Liste. Also wird es acht dp sein, bevor Sie die Liste starten. Die Gesamthöhe von dieser ganzen Liste beträgt 48. Es ist das Minimum. Also, wenn Sie einzelne Elementliste einzelne Zeile haben, wo Sie nur eine Textzeile haben, werden Sie diese kleine kleine Kachel verwenden, die 48 ist, und die nächste werde ich Ihnen den nächsten Stil zeigen . Ok, also hier ist die nächste Stilgröße, die 56 sein wird. Also, wenn Sie sich in meiner Vorlesung Matratzen und vertikalen Rhythmus erinnern, haben sie verschiedene Stile. Zum letzten 1. war 1 48 als dieser in 6 56 und der nächste wird 72 sein. Denken Sie also daran, dass das Lesen oben gibt es ein Tipi für die ganze Liste. Dann haben sie 56 56 56 für alle diese. Jetzt gehen wir zum nächsten. Und hier können Sie sehen, dass sie einige Action-Symbole auf der rechten Seite haben. Die linke Einstellung ist also die gleiche. Dann haben wir das Abschnittssymbol hier drüben, das 24 dp sein wird und das gesamte Listenelement einzelne Liste Elementgröße ist 56. Taktile Größe ist 56 der Rand auf den Boardseiten von diesem Symbol, zum Beispiel, wenn Sie eine Buchse Box oder so etwas haben, ist es 16 und 16 auf beiden Seiten. Wenn Sie also etwas Action haben, sind wir hier und lassen Sie mich zum nächsten gehen , den wir in unserem Design verwenden werden. Es ist zu Zeile Element und dies wird Listenelement aus zwei Zeilen sein und die Kachelgröße wird 72 Teepees Padding und alles ist gleich. Nur wir werden das hier benutzen. Dies sind also alle verschiedene zwei Zeilen, einzeilige Elemente aus diesem Materialdesign, die Listenelemente genannt Zifferblätter sind. Ihre Struktur ist fast die gleiche. Nur die Größen sind für unterschiedliche Inhalte unterschiedlich. Also, wenn Sie ah, großen Inhalt oder zwei Zeilen haben , dann werden Sie diese größeren Fliesen verwenden, die 72. Dies ist die gleiche Struktur mit einigen Symbol 72 Kachelgröße, auch sehen, was hier jetzt, dies ist drei Zeilen Liste. Sie können sehen, dass die Kachelgröße jetzt 88 ist, weil wir mehr Inhalt haben, also brauchen wir mehr Lücke zwischen ihnen. Dies ist das Beispiel hier drüben auf der rechten Seite. Gmail-Posteingang. Es ist mit einer Nikon hier drüben Sie können hier sehen und es wird 24 Größe 16 mindestens von rechts und links sein. Und die Fliesengrößen 88 dp. Also denke ich, wir werden mit diesem 88 dp in unseren Designs entwerfen. Und das ist ihr Layout. Wie es alles auf ihrer vertikalen sie auf Typografie angelegt ist, ist auf einer vier g p Grundlinie. So können Sie sehen, dass sie zeigen, dass 44 Sie tief in Ihrem Haar leben, dann, Ah, vier db hier drüben zwischen diesen beiden Linien. Also denke ich, sie benutzen so etwas. So zeigen sie auch, wie der Text im Wesentlichen auf ihrem vertikalen Rhythmus ausgerichtet ist. Also denke ich, dass es alles um diese drei Zeilen geht. Zwei Zeilen, einzeilige Listen. Wenn Sie den Zeh wollen, bekommen Sie mehr die Tage, die Sie können. Ich werde diese Seite hier verlinken, um die gesamten Spezifikationen zu sehen. Und das ist alles. Wenn Sie, wenn Sie wirklich wollen toe, sehen Sie die große Liste, die in Bildern Bild gute Liste sind, die ich nicht in jedes Detail gehen aus diesem Materialdesign, weil es von jedem großen System. Ich hoffe, dass ich Sie nicht, die alle diese Spezifikationen verwenden, aber ich denke, Sie sollten zumindest eine Haltung zu ihnen bekommen oder einen Blick auf sie werfen. Ich hoffe, Sie haben diese Lektion genossen. Wenn Sie Fragen haben, fragen Sie mich. Fahren wir mit der nächsten Lektion fort. 20. Untere Nadelleiste in Material: Es gibt viele Komponenten aus Android Material Design, aber ich werde nur einen Überblick über Lee, diejenigen, die Juden sind, vor allem in den meisten der Apsis. Und ich habe sie oft gesehen, wie Designer oder Entwickler sie immer wieder benutzen. Also heute werde ich über die untere Navigation jetzt unten Navigation sprechen. Es gibt zwei oder drei Dinge, die Sie beachten müssen, dass auf der unteren Navigation, es wird, um den direkten Zugriff auf den Teil von Ihrer App zu bieten. Zweitens gibt es 3 bis 5 Ziele der obersten Ebene, so dass es nur 3 bis 5 untere Navigationselemente gibt, die Sie von fünf nicht überschreiten können. Denken Sie also daran, dass 3 bis 5 es noch eine Sache gibt, dass die Höhe von dieser unteren Navigation Sie hier sehen können Dies ist derjenige, der und es muss 56 db sein und die Symbolgröße , die alles bereits der Standard ist, 24 mal 24 dp sein wird. Eine weitere Sache ist, dass das Maximum mit jedem aus dieser von ihnen Sie 1 68 db und Minimum aus haben können . Http Jetzt lassen Sie mich unten gehen und Sie können hier drüben sehen. Hier haben wir unten Navigationsleiste. Dies ist im Grunde die Navigationsleiste Android-System Mobil und dies ist die Navigationsleiste . Und es geht Zehe haben Zugang zu drei Portionen in der Nähe Favoriten und kürzlich verfolgt. Okay, eine weitere Sache ist, dass der Text mit ihnen sehr kurz sein sollte. Verwenden Sie also nicht Ihre Favoriten oder so etwas. Du musst sehr prägnant sein. Warum? Mit dem Text hier drüben? Okay, Nun, wenn wir diese untere Navigation verwenden sollten, wenn Sie möchten, dass Ihr Benutzer Zugriff auf alle aus der abs Teil sofort am Tag haben , sind gleich wichtig und Sie wollen, dass sie von überall in der App auf sie zugreifen Sie können diese untere Navigation eso Sie sehen, was hier? 3 bis 5 Top-Level-Estacion von ähnlicher Bedeutung. So ist dies der Hauptzweck aus diesem Teil der Navigation auch Sie hier sehen können wir ein paar weitere Beispiele aus dieser einen festen unteren Navigationsleiste haben . Es gibt auch, wenn Sie versuchen, die Schule nach oben oder unten, wird es erscheinen, wenn wir gehen, um nach oben scrollen. Es gibt auf jeder Mission oder hier lassen Sie mich es Ihnen zeigen. Okay, also über die Farben kannst du sie so färben. Aber versuchen Sie nicht, so akribisch zu verwenden. Wenn Sie ah farbigen Hintergrund für die ganze Registerkarte sind Sie können Kampf oben verwenden Off es ist, wenn es ah, dunklere Farbe und Sie können sehen, dass dieser eine ist sehr in reinem Weiß und die anderen Symbole, sie sind ein bisschen off Ah, transparent. So vielleicht 70% oder 60% transparent und sie sind im Hintergrund gemischt. So werden Sie das auf eine andere Weise verwenden oder entwerfen. Ist dies ein weißer Balken mit der Farbe für die hervorgehobene eine und andere wird erhöht. Das sind also zwei Stile. Lassen Sie mich es Ihnen zeigen. Dies sind zwei Videos, die Sie sehen oder hören können. Sie zeigen, wie es aussehen wird. Also, sobald Sie nach oben oder unten scrollen. Okay, also habe ich nach unten gescrollt und von jedem Scroll nach oben, es wird erscheinen. So geht es also zu jeder Minute Zehenverschiebung. Also dieses Android-Materialdesign ist es sehr, sehr spezifisch in der Verwendung und alle Animationen und alles. Und ich liebe dieses Ding wirklich. Denn dies ist die ausgefranste Cross Fade Animation, wie Sie diese Dabs verwenden können. Sie können sehen, wann die aktive Registerkarte vorhanden ist. Sie können den Text sehen und ich rufe auf dem Boot an. Gehen Sie nach oben. Okay, also der inaktive ist in der Mitte und der andere bewegt sich nach oben. So können Sie sehen, das ist die Animation. Deshalb sieht es sehr cool aus. Da die aktiven Tabs, sie bewegen sich in der Luft in die Richtung. Okay, okay, jetzt werden wir uns die Spezifikationen von dieser unteren Navigation ansehen. Das ist behoben. Es wird hier drüben in einschließlich der gesamten App gleich bleiben. Und Sie können sehen, die Höhe ist 50 60 p, die wir bereits diskutiert. Und jetzt gibt es die Frage, wie wir gehen, um diese Portion entworfen. Nein, die aktive Deb dafür können Sie sehen, die Entfernung von unten ist 10 dp und von oben , es ist 60 p für dieses Symbol. Sie können das sehen. Es ist es wird immer 24 dp sein, weil es eine Standardgröße von Systemsymbolen für Android-Materialdesign ist. Und Sie können jetzt sehen, dass dieser Unterschied zwischen diesem inaktiven Zustand und diesem aktiven Zustand ist die Kraft Augen Sie können die vier Größen anders sehen Auch, Sie können sehen, das Symbol ist farbig und Symbol nach oben bewegt So können Sie hier für Größe sehen größer. Sobald die Telefongröße vergrößert ist, haben wir hier weniger Platz. Also haben sie es nach oben verschoben, so dass Sie sehen können, jetzt hat es 60 Top-Randbettwäsche sein, und die ein inaktiver Zustand hat acht db Topping, die Sie hier sehen können, ist jede Mission, wie es aussieht . Es sieht wirklich cool aus, wenn sie, weißt du, von einem Zustand in einen anderen wechseln. So sehr schönes Feedback. Wenn Sie nicht wissen, was Feedback ist, müssen Sie meinen User Experience Design Kurs sehen. Wie auch immer, Sie können hier sehen, ist das Maximum ein Streicheln aus 12 dp auf beiden Seiten. Ich denke, das ist Standard unter ihrem App-Design 12 db 12 dp auf beiden Seiten und ah, das ist alles. Wenn Sie sich die anderen Ansichten wie Tablet-Ansichten betrachten möchten, können Sie voran gehen und sie anschauen und auch Sie können hier sehen wir wieder die gleichen Ereignisse haben , das gleiche können Sie sehen, dies ist nur das Symbol. Also die Spezifikationen ein wenig anders 16 dp von unten Und das ist wieder das Symbol mit dem Text und es hat den gleichen Abstand von einer weiteren Sache ist, dass Symbol toe Der Abstand zwischen dem Symbol und dem Text ist 60 p Also das ist eine andere Sache, auch Sie können sehen aktiv Sie Minimum Vogel 90 db Dies ist mit Symbol und der Text Maximum ging zu diesem ein und maximal aktiv Sie Es könnte dieser sein. Okay, also das Mini-Mitglied es, wenn Sie es haben, können Sie hier sehen, wir haben die kleinen Tupfer. 123 Diese sind etwas kleiner, also ist die minimale Brit für sie. Aber nur die Ikone ist 56. Also, wenn Sie planen, vier oder fünf hier zu verwenden, müssen Sie dieses Muster verwenden, anstatt nur den Text und die Symbole beide von ihnen zu verwenden. So können Sie dieses verwenden, so dass sie leicht in diesen Raum passen können. Also, das ist alles, was ich denke, wenn Sie wollen, so dass Sie gehen und sehen alle diese Spezifikationen. Okay. Und jetzt gibt es noch eine Sache, die ich Ihnen gerne zeigen möchte. Ist dies eine untere Navigationsleiste. Was ist die Höhe davon und warum verwenden sie diese Höhe? Siehst du was? Hier? Hier haben wir Snack-Bar, Floating Action-Taste und Inhalt schwimmend eine allgemeine Snackbar. Sie haben die gleiche Höhe, die 60 B. Wenn Sie die Höhe nicht kennen, sollten Sie die Höhenvorlesung sehen, über die ich zuvor gesprochen habe. Höhe bedeutet, dass wie hoch, höher es in der Hierarchie auf dem Z-Index sein wird. So können Sie unten Navigationskörper ADP sehen, um über die Snackbar schwebende Action-Taste stechen , da in der Regel Zugriff darauf akzeptieren und zu verschiedenen Teilen in Ihrer App gehen müssen . Solche Boxen erzählten BP, weil es der A-Teil von Ihrem Inhalt sein wird. Najjar wird alle übernehmen, weil es 16 dp in der Höhe sein wird. Also bedenken Sie diese Dinge. Dies ist ein sehr schönes System Off Z-Index und verschiedene Schatten. Und welches Element überlappt sich? Welcher? Also, das ist alles über die untere Navigationsleiste. Gehen wir zur nächsten Liste 21. Seitenwaffe im Material Design: Jetzt werden wir über die Seite reden. Nie es. Dies wird ein sehr kurzer Vortrag sein. So wird die Seite nie erscheinen. Du tippst auf dieses Ah, Hamburger-Symbol oder hier und du kannst sehen, dass dies unsere Seite ist. Nie. Jetzt gibt es wenige Matratzen und Regeln, die uns die Größe von dieser Seite leiten werden. Aber jetzt wird die Größe dieser maximalen Größe 3 20 dp sein, weil wir etwas Platz Overhead haben müssen , so dass Benutzer tippen können und es wird Fuß verschwinden. So Bildschirm mit der einfachen Regel ist Bildschirm mit minus 50 60 Be so dass sie leben wie 50 60 b hier drüben. So können Sie wieder tippen oder hier und ah, haben diese verschwunden. Das ist alles, was ich denke, also bedenken Sie, dass Sie es sind. Wenn Sie etwas wie dieses verwendet haben, ändern Sie es richtig. Versuchen Sie also nicht, den gesamten Bildschirm zu übernehmen, damit die Benutzer Probleme haben, hier zu treten . Also die Grundregel ist diese 11 weitere Sache, die Sie wollen toe Betrachten Sie, was hier ist Es wird auf allen Ihren vorherigen Bildschirmen überlagern. Es hat eine Höhe von 16 dp. Also geht es an der Spitze der ganzen Ihre Inhalte, Ihre untere Navigation, Ihre obere Navigation, Ihre obere Navigation, Ihre Tupfer. Oder hier geht es um die Zehe. Überlappen Sie sie alle. auch Sie könnenauchan der Statusbusleiste hier sehen. Wenn es sich hierher bewegt, wird die Statusleiste oben an dieser Stelle stehen. Und es wird, ah, Teil transparent und teilweise undurchsichtig sein. Das wird also passieren, wenn du wegen dieser Schublade herauskommen wirst. Das wird so passieren. So können Sie sehen, dass dies der Hintergrund ist. Und es gibt einen dunklen Hintergrund auf der Oberseite, der in diesem Hintergrund multipliziert wird. Also hat es Ah, ein bisschen Transparenz, wie vielleicht 30 40% Transparenz. Also denke ich, das ist alles über diese Seitennavigation und ah, ich hoffe, Sie haben diese Lektion genossen. Fahren wir mit der nächsten Lektion fort. 22. ♥ Typografische Skalierung, die ich in Adobe XD verwende: haben wir die Farbbasics und alle engen Spiele in den letzten Lektionen behandelt. Jetzt schauen wir uns an, wie Typografie eine Rolle spielen wird und welche Größe ich in meiner App verwende. Jetzt gibt es nur fünf Größen, die ich verwende, die von Google Material Design Typografie Skala sind und die nahm 34 Punkt ist die Hauptüberschrift die größte Überschrift, die ich für meinen Titeltitel aus meiner App auf dem Frontbildschirm verwende . Dann verwende ich 20 Punkte für meinen Titel auf der APP, APP-Anwendungstitel innerhalb der Materialdesign-App und ich verwende Medium 4 bis 8 mit 20 und das ist mein Körpertext, der 16 Punkte regelmäßig Roberto ist und dann der kleine Text Roberto 12 Punkte regelmäßig und Sie können auch Medium hier verwenden, wenn Sie wollen. Es wird also so aussehen. - Das tut es. Okay, das ist also eine Sache, dann benutze ich 14 Punkte für die Links. Dies ist auch ein Medium für, so ist es ein bisschen ticker als der normale Ford. Das sind also die ganze Kraft. Ich verwende diese für alle Einstellungen, die ich verwende. Ich verwende auch 14 Punkte für den kleineren Text. Einige Orte an manchen Orten. Lassen Sie mich Ihnen also mein aktuelles Design in Adobe X'd zeigen, um Ihnen zu zeigen, wie ich all diese Größen verwende . Okay, Jetzt können Sie sehen, hier haben wir das eigentliche Design und Sie können hier sehen, wenn ich auf diesen Titel klicke . Doppelklick. Das ist 20 mittelgroße Roboto. Also das ist ein treffender Titel, den ich benutze. Dies ist ah, 14 Punkte Medium, weil es die Spezifikationen von Google Material Design eso diese Wagen Bars. Sie haben alle Mützen. 14 Punkte mittel. Dann, wenn man sich dieses anschaut, ist dies Body Decks Medium 16 Punkte Medium und der kleinere Text. Wenn Sie darauf doppelklicken, ist es 12 Punkt reguläre Roberto. Also auch hier drüben, können Sie sehen, es ist 14 Punkte mittelnormaler Roboto, und das ist Ah, ich denke, das sind alle Größen, die ich benutze. Also, ähm, wenn Sie sich in Richtung des Pflegebildschirms bewegen, okay. Also hier haben wir diesen ersten Bildschirm, ich werde ein wenig hineinzoomen. Ok. Jetzt können Sie sehen, hier haben wir den Vollbildmodus und dieses Telefon ist im Grunde 34 extra fett Agonie. Und das ist die ganze Telefongröße, die ich benutze. Dies ist wieder 16 Punkte für die Stapel Felder können Sie sehen oder hören 16 Punkte regulären Roberto . Also im Grunde 16 Punkte ist mein Körper gebildet und es wird meist an den meisten Stellen auf den Knöpfen hier verwendet . Und das ist wieder das kleine Telefon, das 12 reguläre Grenze 12. Und so werden Sie diese fantastisch aussehende Typografie erstellen, verschiedene Elemente. Sie werden zusammen gut aussehen, weil wir eine typografische Hierarchie erstellen müssen . Typografie hatte unseren Schlüssel hier drüben. Einige Dinge müssen größer sein mit der Bedeutung, und einige Dinge müssen kleiner sein, mit weniger, die weniger wichtig sind. Das ist also alles über diese Typografie und wie ich sie in meiner App verwende. So sehen Sie bald im nächsten Abschnitt und ah, lassen Sie uns eine erstellen Suche nach oben 23. Master im Material Design 2.0: Nun, wenn Sie ein großartiger Designer sein wollen, gibt es nur zwei Dinge, die Sie meistern müssen. Eine ist Typografie und die zweite ist das Farbschema. Nun, wenn Sie ein großartiges Farbschema aus dem Materialdesign erstellen möchten, müssen Sie es verstehen. Und es gibt nur wenige Grundlagen und es gibt wenige Prinzipien, die Sie befolgen müssen. Und Ihr Farbschema wird genial sein. Okay, hier sind zwei Dinge oder ein paar Dinge, die ich dir geben werde. Ok. Also für jedes gute Farbschema, denke ich, du musst uns nur töten. Und wenn Sie diese beiden Killer erstellen auswählen, können Sie sehr sie. Sie können ein paar helle und dunkle Varianten hinzufügen, die Mädchen Toe Build erscheint. Schema, Farbschema. Jetzt hier können Sie sehen, dies ist Material Design-Palette und sie haben gezeigt, dass dies Ihre primäre Farbe ist, die über die Hauptfarbe sein wird. Und das ist der zweite reguläre. Jetzt können Sie die Prime Mikola sehen, die sie in der Mitte ausgewählt haben. Es ist nicht zu hell, nicht dunkel. Und aber die zweite regelmäßige sie ausgewählt haben, wird es ein bisschen auf der helleren Seite, gibt es zwei weitere Dinge, die Sie sehen müssen. Wenn Sie genau darauf hinschauen, seien Sie primär. Es ist eine Einladung geschrieben. Und wenn man sich die sekundäre anschaut, ist es mit schwarzer Farbe geschrieben. Nun bedeutet das, dass es das Kontrastverhältnis zwischen Text und Hintergrund bedeutet . Hier sehen Sie den Text und den Hintergrund es Das Kontrastverhältnis wird erstellt. Es wird leicht sichtbar und lesbar sein. Dies sind also ein paar Dinge, die Sie im Auge behalten müssen. Dies sind unterschiedliche Einstellungen für die gleiche Farbe. Helle, dunklere Farbtöne, hellere Töne. Auf Dhere haben wir leichtere Aktien und dunklere, stumpfe Schilde. Lassen Sie uns auf Zehe tatsächliche Farbschema Palette bewegen, wo sie zeigen Ihnen alle Anweisungen. Ok. Nun, wenn Sie dieses Diagramm verstehen oder verfärben Schema, können Sie ein beliebiges Farbschema mit Ihrem Materialdesign oder Enright App-Design oder einem anderen AB erstellen . Jetzt können Sie hier sehen, wir haben zwei Mörder. Das ist unser Bestes. Unregelmässig. Dieses Einssein und das ist vorbei. Zweiter regulär. Jetzt können Sie sehen, dies ist primäre Farbe auf der linken Seite. Dann haben wir primäre Variante, die eine dunklere Farbe ist, die wir für unsere Statusbalken verwenden und die Elemente hier, die wir haben, anheizen. Ah, sehr Licht geteilt von der Primärvariante. Hier haben wir weniger gesättigt. Wir haben sehr lokale er und es ist ein bisschen auf der vitalen Seite oder der hellen Seite. Okay, dann haben wir diese sehr scharfe zweite reguläre und die zweite Revere Ian etwas dunklere Farbe. Also eigentlich, sie verwenden nur zwei Farben. Und das sind die Abweichungen von diesen wahren Farben. Okay, das ist also eine Sache. Ok? Nun, die zweite Sache ist, dass die Farbe, die Sie gehen Zehe verwenden als Text auf diesen Farben. Sie können auf diesen zwei dunklere oder schärfere Farben sehen. Sie verwenden Weiß als Text und auf all diesen Farben verwenden sie Schwarz. Okay, was bedeutet das, ist, wenn man sich die untere Seite hier drüben bei den letzten 80 anschaut. Hier drüben, auf primären, auf sekundären, auf dem Hintergrund, auf der Oberfläche, auf ihm. Dies ist im Grunde zeigt, welche Farbe wir auf welchem Hintergrund verwenden werden oder welche Farbe Primerica oder so, wenn er mit chemischen, Wie Sie auf primären Mitteln sehen können, dass wir gehen, um weiße Farbe zu verwenden. Sie können hier drüben in der Blüte sehen. Mikola. Also alle Varianten von diesen Primärfarben, dass diese beiden Villians Sie gehen, um diese f f f f f Wert auf sekundäre verwenden . Sie können sehen, dies sind zwei sekundäre und zweite Rebellionen wurden mit schwarz. Dies ist auf der zweiten bleibt auf sekundären. Sie werden schwarz ein wenig auf jeder zweiten regulären Eingabe verwenden. Wir werden F f f f verwenden, weil bei lokalen leuchtend rot So werden wir weiße Farbe auf diesem verwenden Sie können sehen oder hören, sie verwenden vital oder es und auf Oberfläche auf der Oberfläche bedeutet alle Hintergründe in der Materialgestaltung verwendet. Wenn Ihre App also einen Hintergrund hat und der Inhalt auf diesem Hintergrund scrollt, wird sie als Oberfläche bezeichnet. Also natürlich ist die Oberfläche grundsätzlich weiß auf allen und Materialdesigns und der Hintergrund wird Oops sein. Okay, also ist die Oberfläche im Grunde deine Karten. Also, wenn Sie einige Materialdesign-Wachen fließen, werde ich es Ihnen in nur einer Sekunde zeigen. Also alle Autos, alle Informationen oben auf Ihrem Hintergrund, wird Oberfläche aufzeichnen ist im Grunde sind Sie alle Informationskarten oder irgendwelche, ähm, ähm, Informationsblöcke auf Ihrem mobilen App-Materialdesign -App. Also werden sie weiß sein, wo sie standardmäßig fällig sind, ihre weißen Auch der Hintergrund ist weiß und sie sagen, dass wir auf der Oberfläche diese Farbe als Text auf dem Hintergrund verwenden werden. Wir werden diese Farbe benutzen. also im Grunde Ihre Hauptidee hinter all diesem Farbschema istalso im Grundedas Kontrastverhältnis. So können Sie sehen, dass sie ein gutes Kontrastverhältnis zwischen Text und Hintergrund beibehalten . Das ist also ihr Hauptzweck hinter all diesen Farbschemata. Nein, Wenn wir uns diese Farbschema betrachten, Sie können sehen, dies ist Primärfarbe und sie zeigen, wie Sie eine andere Farbschemata mit diesen Prime Hektar machen können . Okay, dies ist ein Beispiel Dies ist ein weiteres Beispiel, in dem sie dritte Licht verwenden, die von der gleichen Primerica geteilt wird, nutzt dies eine helle Farbe veröffentlichen und lassen Sie uns die Interaktion von diesem primären und zweiten Stammgäste sehen . Sie können hier sehen, wir haben primär in der zweiten dunklen primären für die Statusleiste und dann ist dies fort reichlich vorhanden. So können Sie jetzt sehen, es sieht toll aus, weil wir mehr Farben haben und sehen wir hier sein Beispiel. Wir haben hier mehr Farben, also wird eine Farbe, die unsere zweite regelmäßig ist, für unsere primären Aktionen sein. Hier haben wir den Editor dort zeigt, wie Sie andere verwenden können. Und so wird die andere Farbe verwendet und die auf Farbe, die Sie sehen können, die auf Farbe ist weiß . Sie können auf Bearbeiten Kampf im Hintergrund sehen. Dies ist der Hintergrund Weiß. Das ist unsere, ähm, Sie können die Karte sehen. Dies ist die Karte mit erhöhter Karte. Es hat Schatten. Es ist auch weiß, und die Farbe darauf ist schwarz. So zeigt es, dass dies die Zugänglichkeit ist. Wenn Sie also zum helleren Farbton wechseln, verwenden Sie den schwarzen Alarm, um das Kontrastverhältnis zwischen dem Hintergrund und der Vordergrundfarbe beizubehalten . Ok. Nun, wenn Sie das Kontrastverhältnis zwischen kollabiert überprüfen möchten, können Sie mit diesem Kontrastverhältnis Tool online überprüfen, und ich denke, es ist Kontrast zu tatsächlich ausgegeben oder ruhig. Und Sie können hier drüben Farben verwenden, wie Sie sehen können. Ich habe do Mörder aus einem Farbschema hinzugefügt. Eins sind diese zwei e. Dewey für den Text. Und das ist für den Hintergrund und Sie können hier sehen, wir haben ein gutes Kontrastproblem. Es muss über vier sein. So können Sie Ihre Kontrastverhältnisse überprüfen. Jetzt werde ich Ihnen sehr alte Stimmzettel Material Design-Palette zeigen, die in den Jahren 2000 und 14 gebracht wurde. Und das sind die Hauptmörder für all diese Pellets. Jetzt können Sie in Material verwenden, das so ausgelegt ist, dass es sich um die neueste Version handelt. Sie können Ihre App mit Ihrer benutzerdefinierten Farbe kombinieren, so dass Sie Ihre Websites oder unser Android-Materialdesign mit dieser Farbpalette nicht einschränken müssen . Jetzt, in der weniger Lektion, werden wir das Farbwerkzeug sehen, das von Android-Materialdesign gegeben wird. Also gehen wir zum nächsten Hören über. 24. Online Material Tools: Okay, jetzt hier. Hören Sie, ich werde über dieses Material Designmaterial sprechen, und so können wir es nutzen. Und es ist Online-Zehe durch Materialdesign. Und Sie können sehen, dass dies ihr Gaumen ist. Und sie haben das gestreifte Purple und das violette Indigoblau Licht Gussie an. So haben sie die spezifischen Farben. So, wie Sie dies verwenden können, ist zuerst klicken Sie auf diese primäre, und Sie können hier sehen, ich habe einige der anderen Schemata erstellt, Also klicken Sie auf die primäre und wählen Sie Ihre speziellen. So können Sie sehen, jetzt habe ich diese Primärfarbe in der Mitte von diesem Farbschema ausgewählt, Sie können auch dieses verwenden. Okay, das ist also meine Grundfarbe. So gut. Dann klicken Sie auf die sekundäre und ah, lassen Sie uns diese als meine zweite reguläre wählen. Oder vielleicht das hier. Hoppla. Ich mag diesen hier nicht, also werde ich zu diesem wechseln. Nein, wählen wir etwas aus. Bourbon. Vielleicht ein Violett. Okay, Also, was auch immer Farben Sie wählen, Ich werde mit dieser gelben Farbe gehen, und Sie können sehen, jetzt ist dies eine gut aussehende ein gutes Farbschema mit diesem rot und gelb und es ist in ein bisschen off Pincus geteilt. So können Sie erstellen. Und es wird Ihnen einige von den Barrierefreiheitsproblemen zeigen, wie Sie diese verschiedenen Bildschirme sehen können , wie Ihre Tabs aussehen werden, und das ist, wie der Text und andere Elemente aussehen werden. Das ist deine Sidebar. Nie. Das sind Ihre Textwächter. Und das ist die Liste, denke ich. Und das ist, wie, wenn Sie zu dieser Zugänglichkeit bewegen, können Sie sehen, dass es wird Ihnen zeigen, dass schwarzer Text nicht sichtbar ist unleserlich auf diesem einen, auch der schwarze. diesem Grund ist der Test nicht förderfähig, nicht berechtigt. Das sind also ein paar Probleme, und ich denke, sie werden sein, weil jede Farbe nicht auf jeder anderen Farbe sichtbar ist. So müssen Sie wählen, ob entweder schwarz oder entweder per Text für den Lesbarkeitszweck Sie hier sehen können. Diese sind alle schwarz geteilt, so dass sie wirklich sichtbar auf diesem eine, und diese sind zwei weiß, und dies ist ein weiteres leichtes Hemd auf, wie geteilt. Es wird schwarz verwenden. So können Sie, wie Sie Ihr Farbschema erstellen und auch, Sie können es exportieren. Toe und Reid sind USA oder Gericht, Ben. Ich weiß nicht viel darüber, weil ich denke, dass es in der materiellen Untersuchungsdatei sein wird, aber ich bin mir nicht sicher, ob Ihre Viertel oder Entwickler mehr darüber wissen. auch Wenn Sie zu dieser benutzerdefinierten Registerkarte gehen, können Sieaucheine beliebige Farbe auswählen. Zum Beispiel, wenn ich so etwas für die zweite reguläre und für die Primärfarbe verwenden möchte, möchte ich etwas, äh, so etwas. Ok. So können Sie eine beliebige benutzerdefinierte Farbe auswählen, die Sie wollen, also lassen Sie mich zurückgehen und sehen, wie meine Farben und Artikel aussehen. Also sekundär ist ein großer langweiliger. Also werde ich es irgendwo hierher bringen. So jetzt können Sie sehen, ich habe beide benutzerdefinierte Farben für meine primäre und sekundäre Farbe ausgewählt. Ich experimentiere wirklich nicht gerne in diesem Tool. Ich bin mir nicht sicher, aber als Designer mag ich meinen Fotoshop. Oder vielleicht Adobe X'd, wo ich selbst mit Kontrastverhältnissen und Farbschemata experimentieren kann. Das ist also nur für die Spende eine Idee, dass, wie Ihre App aussehen wird, jetzt werde ich zu meinem o B x d wechseln Aber ich werde Ihnen zeigen, wie ich diese Farbschemata experimentiert . Jetzt können Sie hier in meinem Adobe x t sehen Ich habe dieses Primfarbschema und einige nächste Kombinationen waren hier. Ich benutze wieder ein Telefon für den Titel aus dieser App und Roberto für jeden überall sonst Dies ist der Link-Stil 14 Punkte, 18 Punkte für den Text erstellen und jetzt können Sie diese anderen Farben für das Grau sehen. Dies ist der große Mörder Dies ist eine primäre Textfarbe Es ist nicht voll schwarz es ist zu essen, zu essen, zu essen und Sie können hier sehen Wenn Sie genau hinschauen, gibt es eine schwarze Linie auf sie über diese gerade einen Kreis und Thies, Ich habe verwendet, da mein Status ist, ist dies der dunklere Farbton und ich verwende helle Farbe darauf, nur um die Zugänglichkeit zu verbessern. Ähnlich verwende ich hier drüben den starken Shared von diesem als meine Statusleiste. Das ist meine Primärfarbe. Dies ist mein zweiter normaler Erwachsenen-Ton für Großbritannien aus der gleichen zweiten regulären. Ah, und ich benutze Vital, wo es und ah, die Zugänglichkeit wirklich saugt für dieses, aber ich denke, es ist ziemlich sichtbar. Also bin ich auf Basis meiner Augen. Okay, das ist also meine Links-Farbe. Und das ist meine Fehlerfarbe. Jetzt können Sie sehen, wie ich experimentiere, indem ich Michael-Schema aufbaue. Wenn Sie sich das ansehen, sind dasim Grunde blaue Anmut. Wenn Sie sich das ansehen, sind das Sie sind nicht rein glasiert schafft Sie sind aus dieser Primärfarbe gebaut. Und auch Sie können diesen Sculler sehen, wenn ich zu diesem ein Rundschreiben gehe. Ich baute es auf der Grundlage dieser blauen Farbe. Wenn Sie also auf diese blaue Farbe klicken und den ganzen Weg bis zum regulären bewegen, werden Sie ein weiteres Regular für dieses Farbschema erstellen. Okay, so habe ich es geschafft, diesen dunkleren Farbton von diesem regulären für andere Staaten zu schaffen . Wieder. Die UN-Farbe für diese anderen Staaten wird so weiß wie dieser sein. Und ah, das ist alles. Ich denke, Sie können verstehen, wie ich dieses Farbschema erstellt habe. Ich werde diese Akte mit dir teilen, also mach dir keine Sorgen. Sie können es in Adobe X t öffnen. Ich habe keine Datei für den Shop, aber ich denke, ich werde in getöteten Bild Vorschau von diesem ein, so können Sie sich darauf beziehen. Also, das ist alles über diese Farbschemata und wie Sie verschiedene Werkzeuge verwenden können und wie Sie in Ihrem für den Shop und Adobe zusätzliche Werkzeuge experimentieren können. Wenn Sie das grundlegende Verständnis für Farben und Primär- und Sekundärfarben deaktiviert haben, können Sie ein beliebiges Farbschema erstellen. Ich hoffe, dass diese Lektionen helfen werden. Sie sind viel weiter, und wenn Sie Fragen haben, die Sie mir stellen müssen, gehen wir zur nächsten Lektion über. 25. ♥ Material UI für Adobe XD: Nein, nein. Wir werden Adobe X T verwenden, um Materialdesign und das Design aus meiner App zu erstellen. Und bevor wir damit beginnen, werden wir einige Assets oder Sie I-Kits herunterladen, die wir verwenden werden, um dieses Design schnell zu entwickeln. Okay, jetzt, wie Sie wissen, ist das Android-Material, das entworfen wurde, um zu zeigen oder eine neuere Version des ursprünglichen Designs ist verloren gegangen. Eso Es gibt nur wenige Sticker-Shootings, die fehlen. Also werde ich Ihnen zeigen, was Sie herunterladen müssen. Sie müssen dieses Android herunterladen. Kaufe ich große einfache Geschichte A. Dies ist die tolle Freude, die Sie herunterladen können. Dann gibt es diese Sticker-Blatt-Komponenten, die vor diesem Android-Material vorhanden waren , um zu zeigen. Oh, und jetzt ist es nicht verfügbar. Aber ich werde den Link teilen My google fahren, so dass Sie diese vor allem herunterladen können. Wir werden dieses verwenden und lesen Sie Ihre g y durch einen geraden einfachen Spaziergang. Du. Lassen Sie mich Ihnen zeigen, wo Sie es herunterladen können. Material entwickelt, um Punkt com Schrägstrich und rechts den Weg zu bekommen. Dies ist durch große einfache Studio und Sie können Adobe X t Figur für den Shop CC Onda Skizze 40 Toe 4.2 oder 42. Dies ist Sie hören können, können Sie herunterladen. Und sobald Sie das heruntergeladen haben, lassen Sie mich Ihnen zeigen, Es ist eine sehr große, um viele Dateien. Sie können die X-Division herunterladen, wenn Sie Zeh wollen. Sie können auch die für Käufer herunterladen und wenn Sie wollen, Aber wir werden diese brauchen. Sobald Sie diese Dateien heruntergeladen und extrahiert haben, haben Sie diese Datei. Und Reggie, warum? Von Bächen und pastoral? Wenn ich doppelklicke und öffne, zeige ich Ihnen, dass es alle Komponenten hat, sogar das Aufkleberblatt und alles darin. Also brauchen wir den zweiten nicht. Niemand Kopf. Lassen Sie mich rauszoomen. Und jetzt können Sie an der Spitze sehen. Sie haben alle Komponenten hier drüben. Wachen, verschiedene Menüpunkte, erweiterte Menüs, verschiedene Airbars, verschiedene Tabs an verschiedenen Küsten oder rufen sie an. Okay, das ist alles, was wir brauchen. Laden Sie einfach dieses ein, und wir werden diese Komponenten Zehe verwenden, ziehen Sie sie über auf unsere Bildschirme und kopieren Sie sie und verwenden Sie sie, um fantastisch aussehende Design zu schaffen , das diese ist. Okay, also, also, äh, lasst uns anfangen und sicherstellen, dass du das alles runterlädst. Außerdem gibt es noch eine Sache, die wir verwenden werden. Ich werde offene CC-Bibliotheken von Cloud-Bibliotheken von Adobe verwenden. Und was Sie hier tun können, ist, dass ich das in meinem Fotoshop erzeugt habe. Im Grunde diese Stadtbibliothek. Wenn Sie es nicht verwenden möchten, stellen Sie sicher, dass Sie dieses gesamte Farbschema erstellt haben, bevor Sie mit dem Entwerfen beginnen. Okay, also was du tun wirst, ist, dass du die Zehe gehst. Lassen Sie mich Ihnen den Weg zeigen. In der nächsten Lektionwerden wir die erste Vorlage erstellen und ich werde Ihnen zeigen, wie Sie alle diese Farben verwenden und das Farbschema erstellen können, bevor Sie mit diesem Design beginnen. In der nächsten Lektion werden wir die erste Vorlage erstellen und ich werde Ihnen zeigen, wie Sie alle diese Farben verwenden und das Farbschema erstellen können Gehen wir also zur nächsten Lektion über. 26. ♥ Design Anmeldebildschirm Teil 1 – Medizinische Android-App: bevor wir anfangen, in und über ein x t zu entwerfen. Ich werde Ihnen einige Dinge sagen, die sehr notwendig sind. Nummer eins ist, dass Adobe Extra eine Vektorzahl ist. Also in Adobe X würde sicherstellen, dass Sie in Vanek entwerfen. Also, was auch immer Sie Ihre Art Board-Größe entwerfen wird 3 60 mal 6 40 db und es ist tatsächlich in Debatten. So ist jedes Denkmal so, wie es ist, wie es im Android-Materialdesign angegeben ist. Sie müssen sich also keine Gedanken darüber machen, es zu konvertieren, um es zwei oder drei X zu multiplizieren, wenn Sie für den Shop verwenden. So werden wir mit unseren Entwürfen beginnen. Also werde ich eine neue Datei erstellen und klicken Sie hier und wir haben dieses Android-Handy klicken Sie darauf und Sie können hier sehen, wir haben diese Datei. Das ist unser Start-Artboard. Sie können hier sehen, wir haben das Kunstbrett. Wenn Sie nicht viel über Adobe wissen, sollte Ecstasy meinen Kurs nehmen , der ein großer Krankenschwestern zu Experten-Level-Kurs für Adobe X'd ist, eine nicht b x d Prototyp entworfene Person, ich meine, mit Entwickler, die der Name oder Titel von diesem Kurs ist. Also zuerst werden wir unseren Anmeldebildschirm erstellen. Dies ist also ein Anmeldebildschirm. Es ist 3 60 mal 6 40 Dips oder DP's und unsere Füllfarbe oder Hintergrundfarbe ist Kampf. Wir brauchen keine und sehr raus. Wenn Sie möchten, können Sie das quadratische Rasterlayout verwenden, das Zehe darauf haben wird. Acht Größe. Sie können das verwenden, wenn Sie wollen. Oh, das hier. Du kannst so etwas benutzen, wenn du willst, aber jetzt werde ich es verstecken. Okay, also zuerst müssen wir unseren Hintergrund hier drüben einrichten. Also ziehen wir unser Hintergrundbild aus unserem Assets-Ordner. Also hier haben wir unsere Asset-Ordner. Ziehen wir dieses Hintergrundbild hierher und lassen Sie uns zu diesem gehen und es so hier rüber ablegen . Okay, also werden wir so etwas benutzen. Lass es uns etwas größer machen. Ok? Nun, was wir tun werden, ist, dass wir hier ein Rechteck überlagern werden, das auf die gleiche Größe von diesem Kunstboard geht . Lassen Sie uns einige von der Grenze um sie herum, drücken Sie TV und ausgewählt, und wir werden diesen Hintergrund-Player verwenden. Also Bagram Blendtäler werden fünf sein, nicht die Deckkraft. Was? Das hier? Ich werde fünf hier drüben gebrauchen. Hoppla. Ich bin mir nicht sicher, was das Problem damit hat. Klicken Sie einfach einmal fünf wird Betrag sein. Die Helligkeit wird acht sein, und die Deckkraft wird 30% betragen. Also brauchen wir so etwas, was ein bisschen abgefeuert ist, weil unser Text hier drüben sichtbar genug sein sollte . Das ist jetzt unser Hintergrund. Sie können beide auswählen, und ich denke, wir sollten sie sperren, damit wir sie nicht versehentlich hierher bewegen. Okay, jetzt ziehen wir unser Logo in unsere Akte. Das hat das Logo geschleppt und es hier rüber fallen lassen. Es ist sehr groß. Die Größe, die ich verwenden werde, ist 1 20 dp Oops. Wunder und BIP Größe dieser Größe. Ich werde hier drüben benutzen. Lassen Sie uns es in der Mitte und von oben ausrichten. Es wird 72 Dips auf dem Stück sein. Jetzt werden wir einen Text verwenden , der Qual sein wird. Also werden wir die Zehe Qual verschieben GP geht Wer ist okay, also werden wir schwanger wieder verschieben und die Größe wird 6 34 p. T. T. Also das ist die gleiche Größe wie es ist und extra Board. Also hier haben wir unseren Text. Nein, wir werden Text für die zweite Zeile verwenden. Ich werde so etwas ziehen und wir gehen Fuß. Kopieren Sie den Text von hier. Da ist Kleidung, die Extra-Akten. Okay, hier ist unser Text vom Anmeldebildschirm. Lassen Sie uns versuchen, es oben zu ziehen, dass, sehen, was passiert. Lass es uns jetzt tun. Okay, also unser Text Israel hier, lasst uns den Kraftzehn Roberto Voter regelmäßig ändern. Und es wird 14 Punkte sein. So etwas wie das. Also werde ich so verwenden. Also ich denke, es hat gerade die erste Zeile kopiert. Also müssen wir den Rest von ihm in der Mittellinie kopieren. Drücken Sie V. Wir werden es wieder ausrichten. Du kennst das so 15. 15 jetzt in a o b x d. Sie werden Artur Optionstaste drücken. Also, wenn Sie die Abstände zwischen zwei Elementen sehen wollen, so ist es sieben. Ich werde es schaffen. Acht hier taucht den Unterschied zwischen ihnen gekauft zu werden. Jetzt ziehen wir ein paar von den Feldern aus unserem entworfenen Kit. Wir brauchen die. Also ich diese habe ich benutzerdefinierte Lee erstellt. Also habe ich mich selbst erschaffen. Aber jetzt werde ich es von Ana ziehen. Gefällt es dir? Wir haben heruntergeladen. Also lasst uns das öffnen. Bekomme ich, das ist ein Eimer. Lassen Sie uns feststellen, dass die Textfelder lang sind und Gebühren. Also hier haben wir die Eingangsängste, die hineinzoomen. Okay, das ist ein aktives Eingabefeld und das ist inaktiv. Also müssen wir Textfelder, versteckten Text. Wir brauchen Fokus eins. Und wir brauchen dieses eine Wir brauchen diese zu Grundsätzlich, wir könnten auch dieses eine, das fokussierte Zentrum wie dieses, denn an einigen Stellen fühlen wir uns im Grunde über Textfeld. Also lasst uns all diese kopieren. Komm schon, siehst du? Und wir gehen zu unserer Akte, die es mit Haaren wie diesem basiert. Das sind also Standardgrößen, so dass wir uns keine Sorgen um verschiedene Layouts und alles Verrückte machen müssen. Okay, hier haben wir, wir werden es Boss Word nennen. Und das wird mein Passwort sein. Okay, also brauchen wir das oder hier nicht. Ok? Also werde ich diese Verdünnung entfernen. Das hat auch besprochen, Sir, wir werden es hier drüben haben und wir werden es hier drüben haben und Farben. Wir werden uns später mit ihnen beschäftigen, weil wir hier etwas Farbe erzeugen werden , weil wir alle Farben aus dieser CC Bibliothek benötigen, die ich in Vidin für den Shop erstellt habe . Das ist unsere Stadtbibliothek. Also, jetzt werden wir tun, ist ich werde diesen Umzug in die Stadtbibliothek auswählen, klicken Sie auf diesen schwarzen Text. Dies ist zu Ito Ego e No. Zusammen mit dem, Sie können ähnlich verwenden Sie können das gleiche tun, oder? Klicken Sie auf und fügen Sie Farbe zu Assets hinzu. Wenn Sie also diesen SX-Bereich gehen, können Sie jetzt sehen, dass diese Textfarbe hinzugefügt wurde. Nun, wenn wir wieder gehen, Zeh, lasst uns so. Und wenn wir wieder gehen, haben wir eine andere Farbe, die Blaugrau Status ist. Ich denke, das ist für diese Textur. Sie können dieses ein blaugraues Medium verwenden. Also, jetzt diese Farbe tragen wieder gehen, um es hier hinzuzufügen. Sie können dies manuell tun. Sie können nur ein paar erstellen. Die Verbindung ist hier drüben mit der gleichen Farbe. Okay, Also, wenn Sie wissen, was die Farbe ist, zum Beispiel, zu Ito Ito können Sie verwenden, die einen Dezimalwert hat. Dies ist die manuelle Methode, die ich Ihnen zeigen werde. Okay, also kannst du so etwas verwenden. Also Nein, es ist diese Farbe, die Sie mit der rechten Maustaste klicken und Artikel jetzt. Es ist bereits hinzugefügt. Es zeigt mir also nicht die Option. So können Sie verschiedene Boxen erstellen, die Ihr gesamtes Farbschema erstellen, bevor mit diesem Design beginnen und Ihren Farben hinzugefügt werden. Und dann können Sie einfach hier klicken und diesen Philip anwenden, anstatt die CC-Bibliothek zu verwenden. Wenn Sie also nicht wissen, wie Sie U-C-Bibliotheken oder sie starten, können Sie so etwas verwenden. Okay, also ist das erledigt. Das ist unsere E-Mail. Okay, das wird also eine E-Mail sein. So etwas wie das. Okay, das ist also im Grunde deaktiviert. Gefühl, ich gehe Fuß, benutze diesen hier eher als diesen. Oder vielleicht können wir dieses Ein- und Vier-Passwort verwenden. Wir werden diese Krankheit gebrauchen. Ok. Lässt ihn runter. Das hier. Wir haben im Grunde Lebensmittel. Und die Farbe für diese Bar wird der Mörder sein, der unsere aktive Farbe ist, zweite reaktive. Das ist also unsere aktive Farbe, die zerstört, dass dieser Teil unser Hier ist. Lassen Sie uns auf diese Ebenen gehen und sehen mit dem Typenzeichen Ich werde Zehe hoffen, dass es hier drüben. So etwas, und es wird die gleiche Farbe verwenden. Also zuerst lehnt, fügen Sie diese Farbe zu unseren Assets und bewegen Sie die Behauptungen und wählen Sie diese und verwenden Sie diese Farbe. Okay, also haben wir über Textfeld bereit. Es gibt eine Sache, die nicht vorhanden ist, weil es ältere Version von diesen technischen Ängsten ist, die auf der oberen kleinen Etikett ist, die, die, wie Sie sagen können, schwimmendes Etikett, das ist der eigentliche Name aus dass Gönner sie in zwei Punkten verwenden. Außerdem werden wir eine Haar-E-Mail hinzufügen, so etwas, und wir werden die gleiche Farbe verwenden, diese. Das ist also ein neues Schlafzimmer, das unter diesem neuen Material war , ,das darauf hinweist. Und wenn ich die Entfernung sehe, wird es 16. Das ist kreativ. Jetzt können Sie sehen, dass dies das eigentliche Layout ist, nach dem wir suchen müssen. Mal sehen, wie weit ist der Abstand zwischen diesen beiden? Lass es uns ein bisschen weniger machen. Okay, ich denke, es sieht toll aus. Wir müssen nur repräsentieren, dass es so aussehen muss. Lassen Sie es uns ein wenig hier runterbringen. Ok? Also denke ich auch, dass das sehr schlank ist, also werde ich die Höhe zu machen, also ist es ein wenig sichtbar oben, dass ich auch die Zehe, ähm, ähm, benutze die Füllspitze, haben so etwas wie 40%, weil es bereit aussieht. Sehr gemacht auf dieser wieder auf. 27. ♥ Design Anmeldebildschirm Teil 2: Okay, also vorbei an Virginie, um zu betreten. Das ist E-Mail. Alles ist erledigt. Wir werden hier einen Knopf generieren, also lasst uns die Last schaffen. Also wird der Knopf 42 DP hohe Hoffnungen, die ich brauche 42 hier drüben, und es wird 80 ausgesucht verwenden. Also, wenn Sie erhöhen möchten, können Sie auf 90 etwas erhöhen. Ich denke, das sieht besser aus. Entfernen Sie den Rahmen und unsere Primärfarbe. WAAS das hier. Okay, also werde ich dieses primäre Blau auf diesem Knopf verwenden. Das ist, was wir verwendet und Breast V und lassen Sie uns gut, wir hören nicht. Okay, also muss ich 24 haben. Lassen Sie uns 24 Unterschied zwischen diesen beiden verwenden. Okay, jetzt werden wir hier Login-Text hinzufügen, was sehr einfach ist. Logan 14 wird nicht die Größe haben, die wir verwenden werden. Wir werden 16 oder hier für die Last verwenden, und regelmäßig und weiß wird der Text sein. Okay, lassen Sie es in der mittleren Schicht ausrichten. M. C. Und es ist ein Liegen in der lassen Sie uns einige abgerundete Ecken hinzufügen, um Rawness abzuziehen und etwas Schatten hier zu akzeptieren . Ich werde nur zwei und sechs sein und die Schattenfarbe. Wir können die gleiche Schattenfarbe wie diese verwenden, die unsere primäre Sammlung ist. auch Fügen Sieauchdiese Farbe hier in den Dokumentfarben hinzu und ah, das ist fügen Sie dies als Schatten hinzu. Okay, jetzt können wir so etwas wie 50% gebrauchen. Okay, so werden wir unsere Schatten so gestalten. Okay, okay. Das ist also erledigt. Lassen Sie uns lüftet. Passwort vergessen hier drüben. Dies wird eine Linkfarbe sein, die anders war. Es war eine blaue Farbe. Also lassen Sie es uns in der Mitte damit ausrichten. So etwas wie das. Jetzt gehe ich wieder auf die Zehe. Öffne meine Sissy Bibliothek mit meiner Sissy Bibliothek. Als Nächstes. Diese Datei geschlossen Nicht speichern. Okay, also C-c-Bibliothek, öffnen wir die cc-Bibliothek wieder, und dann werde ich diesen Link Brugler verwenden. Okay, das ist also unser vergessenes Passwort. Und, ähm, wenn Sie wollen, können Sie es etwas bewegen, gehen oder vielleicht behalten Sie es hier drüben so. Also keine Sorgen darüber. Okay, also noch eine Sache, die wir hier drüben brauchen, das ist eine neue To G B Türen Next. Sehen Sie den Weg. Die Farbe ist diese. Also gehen, um Farbwähler zu verwenden, Zehe nehmen diese Farbe. Okay, das sind unsere Decks. Color Neutra Chipotle ist hier. Geh. Also, diese Kontofarbe zu erstellen wird im Grunde Link-Warnungen sein. Fügen Sie dies zu unseren Dokumentfarben hier und auch zu unserem Essex, wissen Sie, lassen Sie es in der Mitte ausrichten. Wählen Sie diesen Text aus. Er war verfärbt. Okay, also sind wir damit fertig. Wenn Sie genau das unterstreichen möchten, können Sie das hier drüben so in einem txt verwenden. Und jetzt ist es unterstrichen. Das ist es, was wir in unserem Fotoshop Design verwendet haben. Okay, also denke ich, das ist großartig. Lassen Sie uns es in der Mitte ausrichten. Alles. Richten Sie es in der Mitte aus. Okay, also haben wir vergessen, etwas Schatten darauf hinzuzufügen. Also werden wir etwas Schatten hinzufügen und die Schattenfarbe wird etwas sein. Sagte ihr das. Lassen Sie es uns auf 50% verschieben. So etwas wie das. Ok. Sieht toll aus. Unsere Schatten sehen toll aus. Wenn Sie den oberen Zustand von klein hinzufügen möchten, können Sie es hinzufügen oder wir werden es auf einem Anmeldebildschirm ausblenden. Also, wenn Sie es hinzufügen möchten, können Sie es aus diesem Bereich hierher ziehen. Und mal sehen, ob wir einen dunkelschwarzen Statusteil haben. Okay, hier haben wir es. Wenn Sie in dieses zoomen, ist es im Grunde haben diese Statusleiste und wir können es kopieren und grundlegende dort drüben. Als Nächstes. Am besten ist es oder hier ist es auf. Wir werden diesen Film transparent machen. Und so werden wir diesen Bildschirm verwenden. Also die Füllung, dass der Status transparent ist und wir haben etwas Zeit und alles hier drüben . Also ist unser dieser Bildschirm abgeschlossen. Baumstamm und Haut. Ich hoffe, Sie haben diese Lektion genossen. Wenn Sie Fragen haben, die Sie mir stellen müssen, fahren wir mit der nächsten Lektion fort. 28. ♥ Signup für die medizinische Android-App: Okay, jetzt werden wir Anmeldebildschirm erstellen. Und bevor wir zum Anmeldebildschirm gehen, gibt es nur wenige Dinge, die ich will. Oh, sag es dir hier drüben, was ist? Dieses E-Mail-Etikett wird 12 Punkte oder 10 Punkte sein. Im Fotoshop haben wir 10 Punkte verwendet, und hier werden wir 12 Punkte verwenden, weil sie sehr klein aussehen und es mit diesem Text Overhead ausrichten . Okay, noch eine Sache, die wir benutzt haben, und ich kann hier drüben einen Scheck. Mark, ich gehe weiter, wenn du willst. Tobe, bring die Ikone hierher. Sie können das tun und zu den Symbolen gehen. Und das ist unser Baseline-Check. Lass es uns hineinziehen. Unser, das wird ein zusätzliches Dokument sein und es so hierher bewegen. Lass es uns hineinziehen. Und es muss hier drüben gekämpft werden, was 12 von diesem hier sein wird. Also werde ich diese Farbe von meinen behauptet diese Farbe für diese verwenden. Also werde ich es auswählen und auf diese Farbe klicken. Also hier haben wir diesen Scheck. Mark, wenn du Zeh willst, tu so etwas. Okay, jetzt ist dieser Bildschirm abgeschlossen. Lass uns weitermachen. zum Anmeldebildschirm. Ich werde das duplizieren. Ich drücke Kunst und klicke auf den Namen. Und das ist, wie Sie es abschließen. Anmeldebildschirm. Okay, jetzt unser Status, aber wird sich ändern, weil wir ein paar Ottawa-Haare haben. Und diese Dinge werden sich bewegen, weil wir dieses Passwort nicht brauchen, und das wird sich ändern. Toe, ähm, ich habe bereits ein Konto, und das wird eingeloggt sein? Nein, so etwas. Okay, also auch, dieser Button wird geändert werden, um Konto zu erstellen, also werden wir diesen Knopf Seufzer verschieben. Als nächstes mach es ein bisschen größer. Das ist L. Eine Mittellinie. Es verschiebt sich. Sehen? Okay, also haben wir dieses Konto und alles hier drüben tief. Es wird dasselbe sein. Lass es uns etwas kleiner machen. Als nächstes mach es 100. Die Bienen und wir werden alles nach oben bringen. Vielleicht hier drüben, weil wir noch ein Textfeld brauchen, das unsere Amerikas Entscheidungsnummer sein wird. Also lassen Sie uns das unten bewegen. Das wird in der Mitte sein. Das ist Gruppe, die sie kontrollieren oder befehlen G-Zehe, gruppieren sie und wir gehen Fuß. Nennen Sie es hübsch. Jetzt. Wenn Sie Symbole aus diesen Schaltflächen erstellen möchten, können Sie mit der rechten Maustaste klicken und diese Begnadigung als Symbol machen Symbol erstellen. Aber jetzt werde ich es so lassen. Okay, also haben wir diese E-Mail konzentriert. Mongie, das ist unsere E-Mail. Das ist unser Passwort. Und wir brauchen noch ein Feld, das wird Oh, nun hier sein . Und es wird okay sein. Als Nächstes. Sehen Sie den Abstand zwischen ihnen. Ich denke, die Entfernungen nicht weniger. Also werden wir es so hierher bringen. Also verwende ich eine 16 dp Entfernung, die Sie auf der linken Seite sehen können. Es zeigt mir den Abstand zwischen all diesen und hier benutze ich 24 hier drüben. Okay, also zwischen dem Knopf und dem Textfeld 24 dp's jetzt gehe ich Zehengruppe alles hier drüben in eine Form kwon ji. Und das ist unser Anmeldeformular auf dem Bauernhof. Okay, also, nein, wir können sie so bewegen. So ist das einfacher für mich, Sie wissen, Kontrolle. Okay, also haben wir etwas hier drüben. Das war's. Jane, der Text an Okay, jetzt ziehen wir die obere Leiste über den Kopf. Also werden wir diese Statusleiste löschen, und wir werden uns noch eine hier rüber holen und sie hier rüber stellen. Statusleiste löschen, Okay, also gehen wir dazu, oder? Ich bekomme diesen tollen Jude ein Kind, das uns das Leben leichter macht. Also gehen wir an die Spitze. Wo wir nächstes Jahr die Airpars haben, ist die , Bar,die wir hier drüben brauchen. Okay, Okay, vielleicht können wir das hier benutzen, weil es den Zurück-Knopf hat und wir vielleicht zurückgehen müssen. Gehen Sie zurück zum Anmeldebildschirm. Also lasst uns das hier ausgeben. Das sind Werkzeugkästen und welche davon erzählt haben, ist das? 12344 Schreiben. Okay, das ist also für morgen und sieh alles, was du diesen einen Zehe fünf benutzen kannst. Verwenden wir die 500. Komm schon. Und jetzt werden wir es hier drüben stützen, und die Magie wird passieren. Hoppla. Es passiert also nicht hier drüben. OK, so bewegen Sie sich oben und die Farbe für diese. Wenn Sie sich erinnern, wird es eine Symbolleiste sein. BG. Mal sehen, was ist die Farbe von diesem hier? Also werden wir diese Farbe dafür verwenden, und die Spitze wird Status sein. Teil B G wird dunklere Farbe verfärben. Mal sehen, was passiert. Okay, das ist ein kleines Problem hier drüben. Wir werden zu unserem Vermögen wechseln, und wir haben diese Farbe nicht hinzugefügt. Das ist unsere primäre blaue Farbe. Lassen Sie uns Verfärbung hinzufügen. Fügen Sie Farbe zu den Assets und wir brauchen auch eine andere Farbe, die diese eine starke Farbe auf diesem 118 bis 9 40 Also lasst uns und diese Farbe 18 bis 94 D. Okay, also fügen wir es hier hinzu. Und auch wir werden mit der rechten Maustaste klicken und Farbe auf die SX. Jetzt haben wir zwei Farben hier drüben. Eine ist etwas dunklere Farbe, und eine ist eine hellere Farbe. Also lasstuns lasst wieder zur Hockerbar gehen. Dies ist ein Werkzeug über Hintergrund, und das ist unser Hauptregument. Ich denke, das ist unsere Grundfarbe. Und wenn wir zu diesem gehen, schauen wir mal, was hier passiert. Das ist also im Grunde die Farbe. Ah, das ist leichter. Im obersten Statusteil wird dies dunkler. Okay, jetzt können Sie sehen, dass wir das gleiche Arrangement hier haben. Lasst uns, ähm, basierend Titelwechsel. Lassen Sie uns es ändern, um sich mit GP Tools anzumelden. Okay, jetzt sehen Sie, dass wir unsere Sachen etwas nach unten bewegen müssen. Wenn Sie Zeh wollen, entfernen Sie den Schatten um diesen auf. Das ist der Schatten. Wenn Sie sich bewegen möchten, hat der Schatten den Schatten entfernt. Wenn du den Schatten behalten willst, kannst du ihn behalten. Aber ich werde dieses Team benutzen. Sie sind glatt. Dinge sind irgendwelche Dinge nach unten, Also werde ich 80 Stück für dieses Symbol verwenden. Ich will nicht, dass es sehr groß ist. Ich brauche mehr Platz hier drüben, weil die Juden bereits bekannt sind, dass er in dieser App ist mit dieser App. Okay, also lasst uns das ein bisschen hier rüber bewegen, weil ich keine Zehenänderung will also lasst uns das ein bisschen hier rüber bewegen, weil ich keine Zehenänderung will. Ah, das hier zu bemessen. Ich wollte die gleichen 80 hier drüben sein, denn wenn ich es nach unten bewegen, wird es schwierig sein, sich mit dem Tom hier anzupassen. Noch eine Sache, die wir in die Mitte gehen. Richten Sie diese Begnadigung so aus. Selbst wenn du es hier behalten willst, denke ich nicht, dass es Ach, große Sache oder hier sein wird. Okay. Also denke ich, unser Design für diesen Bildschirm ist komplett, wenn Sie wollen. Oh, behalte die Schatten. Du kannst die Schatten behalten. Lasst uns die Schatten hier benutzen. Okay, also ist unser Anmeldebildschirm komplett. Wenn Sie Fragen oder Anregungen oder irgendetwas über die Schule haben, so dass Sie nichts verstehen, können Sie mir Fragen stellen , Fragen, sogar Anzahl Fragen Sind irgendwelche einfachen Fragen? Fackel sei schüchtern. Versuchen Sie, mich zu fragen, wann immer Sie Probleme haben, okay? So können Sie unsere Bildschirme sehen. Anmeldung und Protokollierung sind abgeschlossen. Gehen wir zur nächsten Lektion über, in der wir mehr darüber tun werden, und, ah, wir werden unseren Dashboard-Bildschirm erstellen 29. ♥ Dashboard Tabs in den Materialien des Design-: Okay, jetzt, in dieser Lektion werden wir diesen Dashboard-Bildschirm erstellen. Aber bevor wir in den Armaturenbrett-Bildschirm graben, brauchen wir diesen Stich unsere mit Icons hier drüben. Nun, in meinem Boot, das du magst , ich habe solche und ich war nicht in der Lage, diesen Gönner zu finden, oder hier, weil ich glaube, sie haben es vergessen . Oder vielleicht sie, die ich nicht in ihrer kostenlosen Version hinzugefügt habe. Also, was ich tun werde, ist, dass wir diese drei Dinge hier benutzen werden, und ah, wir werden es mit so etwas hier kombinieren. Okay, also lass mich dir was zeigen. Die Spezifikationen zu verstecken ist für diese festen Luftstangen ist 72 dp's 12 dp ist ein oberer Rand hier. Dann haben wir 24 dp-Symbol als wir. Unser Text wird am unteren Rand von 20 dp-Block oder 20 dB-Baseline sitzen. Und diese Linie ist im Grunde zu DPs, so dass wir sie selbst erstellen können. Also werden wir das in dieser Lektion tun. Also lassen Sie uns mit der Schaffung dieser Stich beginnen sind in diesem. Hören Sie, hier haben wir unsere Akten, also werde ich nur Cricket replizieren. Das hier sind Drop Shin Ki, und ich werde es hierher ziehen, um einen anderen Bildschirm zu erstellen oder hier, und sie sind immer noch essen den Hintergrund. Also, nein, wir brauchen diese Hintergründe nicht. These Rechtecke. Ich werde sie freischalten. Also werden wir dies löschen und auch dies löschen. Wir brauchen das Logo im Moment nicht. Vielleicht die Stapel. Wir brauchen dieses Telefon nicht, das wir nicht brauchen. Und das hier und das hier, ich behalte diesen Text hier drüben. Okay, wenn wir das hier benutzen, ist das unsere Werkzeugleiste. Es ist ein bisschen anders. Was wir hier drüben brauchen, ist etwas näher dran. Also ist es Toolbar Nummer 1234 Also werde ich das jetzt kopieren und vielleicht mal sehen, ob wir etwas haben. Okay, so toll. Kopieren Sie es. Und wir werden es hier drüben anheften und das verdünnen. Die Hocker Bar. Wir werden auch die Bücher löschen. Auch der Status Teil, den wir löschen müssen Dies ist unsere vier. Also werde ich es so hochziehen. Wir würden die Farben später ändern. Also gerade jetzt gehen wir gerade Fuß entfernt die Schatten, so dass ich nicht entfernen würde die Schatten von dieser Ebene hier drüben. Okay, also wurden die Schatten entfernt. Jetzt lass uns das bewegen. Ah, Artikel hier drüben, es sieht Oops aus. Okay, also gehe ich hoch. Oben, oben, oben, oben, hier drüben. Okay, also haben wir diese dritte Dad Bar und komm schon, siehst du? Und ich werde es hier drüben anheften. Das so etwas. Okay, was wir jetzt tun werden, ist, dass wir es ein bisschen hier rüber bewegen. Und wenn ich auf diesen Hintergrund doppelklicke, sind das die Grenzen. Sie sind im Grunde 48 dp's, aber für die Registerkarte, mit der wir wollen, ist es 72 db. Also werden wir die Größe auf 72 DPs erhöhen. Das hat die Höhe so erhöht, und lasst es uns überziehen. Also ist unser Indikator am unteren Rand dieses hier so. OK, also haben wir Sie einen sehr schönen Hintergrund gemacht, der auf 200% zoomen. Lass uns das etwas nach oben bewegen. Okay, lasst uns die Farbe ändern. Also ist es einfacher für uns, zu definieren, dass wir etwas in so etwas entwerfen. Außerdem werden wir es mit Verfärbung füllen und im Austausch, verfärben Zehe unser primäres Blau. Okay, das ist also eher so, als müsste es etwas in dieser Richtung entwerfen. Okay, also brauchen wir unsere Ikone hier drüben. Davor werden wir einen Block von 12 dp's erstellen. Okay, also wird die Höhe 12 sein, weil wir unsere Icahns darunter platzieren müssen. Okay, so sieht aus, benutze so etwas. Ich werde die Farbe Rot verwenden, nur um sicherzustellen, dass dies unsere Richtlinien sind. Und das sind gezogene Symbole hier rüber. Das ist unser Dashboard. Das ist eine Wolke, eine Plourde. Und es gab noch eine Aktivitäten, wo seine Aktivitäten. Hoppla. Vorwärts. Also werde ich all diese greifen, ziehen Sie es in meine Photoshop-Datei, Alps eigentlich Datei, und ich werde sie so draußen fallen lassen. Also hier haben wir das. Das ist unsere Wolke. Das ist unser Dashboard. Und das sind unsere Aktivitäten, also werde ich es mit dieser Linie ausrichten. Sie können sehen, wie es für uns jetzt einfacher ist, so etwas zu tun. Das wird unser Dashboard sein. Hoppla. Alles sollte in den Lücken liegen. Bash, Herr. Und das ist ein D. Wir sind alle fertig, das zu erschaffen. Ich hoffe, Sie haben das genossen. Wie wir die Spezifikationen von Google Material Design verwendet und wir verwenden sie, um so etwas zu erstellen . Jetzt gibt es noch eine Sache. Ich denke, es sollte in der Mitte sein. Dasselbe. Das hier. Das sollte in der Mitte sein. Okay, jetzt suchen sie kreativ. Lassen Sie uns dieses Symbol an Gruppen ausrichten. Es gibt eine Zeile dieses Symbol Lexie mit diesen Symbolen sind eigentlich so werden wir sie hier rüber ziehen , wenn wir diesen Indikator und alles haben. Also, jetzt haben wir OK, , äh, aus diesem Ebenen-Panel können Sie dieses auswählen, und Sie können Sync-Dateien auswählen. Und jetzt können Sie sie einfach arrangieren, anstatt mit diesen zu kämpfen. Okay, hier haben wir das Armaturenbrett so. Und wenn ich versuche, das Dashboard zu kombinieren, mal sehen, ob diese Kombination Es ist etwas seltsames passiert mit dieser SPG-Datei. Also werde ich nichts miteinander kombinieren. Lassen Sie es einfach so. Okay, so wirst du alles ausrichten. Ihr Dashboard wird ein Indikator sein. Das ist unser Indikator. Und wenn ich die Größe über den Indikator Zehe drei DPs erhöhen will. Ich denke, ich werde diese drei d p verwenden. Indikatorgröße. Lassen Sie es uns zusammen mit dieser Linie bewegen. Lassen Sie uns das entfernen. Dies ist darüber, dass unser Leitfaden Austausch verfärbt sich von diesem Hintergrund zu unserem primären Blau , das war dieser. Und auch für diesen brauchen wir die gleiche Farbe. Und für die Statusleiste B. G. Wir werden einen dunkleren Farbton verwenden , der hier ist. Okay, jetzt kannst du unseren Dad sehen. Der Bod ist fertig. Dies wird eher der Titel unseres AARP sein als die Benutzererfahrung. Design GP Werkzeuge Jahr Talon 18. Okay, Nein, wir haben diese obere Leiste erstellt, Navigationsleiste oder Tab sind im Grunde das ist unsere Luftleiste mit festen Tabs drei Debs, und wir werden das in unserem Design immer wieder verwenden. Okay. Ich hoffe, Sie haben diese Lektion genossen. Fahren wir mit der nächsten Lektion fort, in der wir den Inhalt über dieses Dashboard erstellen werden. Nächstes Benennen Sie es alsNächstesin das Dashboard um. So sehen wir uns bald in der nächsten 30. ♥ Doctor und Diagramm: jetzt in dieser Lektion, werden wir den obersten Teil hier erstellen. Wir haben das Everton-Bild vom Arzt und einen Text vom Arzt. Es ist eine Vergrößerung Aktivität. Und dann haben wir hier drüben einen kleinen Rundbalkendiagramm Spektrograph. Okay, also fangen wir an, hier drüben etwas zu bekommen. Also werden wir einen Arzttitel verwenden. Doktor, entschuldigen Sie diesen Titel. Ich werde diesen Text verwenden, weil es in nur kleinen Text ist kein sehr großer Text. Lasst uns noch eine Zeile löschen. Lasst uns die Linie verlassen. Es. Und dafür werde ich 12 Punkte wie diese verwenden . Und für diesen hier werde ich 16 Punkte, 16 Punkte verwenden . Nächste nur Stadt in der Farbe wird unsere Textfarbe sein, was ich denke, ich habe vergessen, hier hinzuzufügen. Das ist also unsere Textfarbe, und das wird unsere graue Farbe sein. Wenn Sie dies schnell verwenden möchten, können Sie dieses verwenden. Das ist unser Text. Curricular EigentlichCurricular. Okay, was wir jetzt tun werden, ist, dass wir ellipsen müssen, und, ähm, wir werden 58 das Stück verwenden, das für den Shop Toe verwendet wurde. Hier haben wir 50 Jahre um 58 Jahre, wir werden es hier drüben replizieren. Ich drücke keine Optionstaste, um es zu replizieren. Und jetzt werde ich tun, ist, dass ich mein quadratisches Gitter aktivieren werde. Okay. Warum ich das getan habe. Ich werde Ihnen zeigen, dass ich 16 Marge von hier 16 von hier lassen werde. Und es ist einfacher für mich, solche Dinge auszurichten. Und jetzt ist es in der Mitte. Alles sieht toll aus. Meine Ausrichtung ist erledigt. Und jetzt hole ich mir das Doktor-Bild, das hier drüben in meinen Asset-Bildern ist , Doktor, Weiblich, Weiblich, Weiblich. , Doktor, Weiblich, Weiblich, Weiblich, Und ich werde alles hier so fallen lassen. Jetzt werde ich tun, ist ich werde es eine große kleinere machen und wir werden beide auswählen , Rechtsklick und Moschee mit Schiff. Dass das sehr richtig ist. Tun Sie es, weil ich manchmal,weißt du, weißt du das Bild geändert haben muss. Und jetzt glaube ich, dass wir es getan haben. Und für die Grenzewerde ich, werde ich, um vier hier und jetzt denke ich, ich kann die Grenze nicht benutzen, also was ich hier tun werde ist, dass ich einen anderen Kreis wie diesen unter diesem hier brauche, um eine Grenze zu zeigen. Also werde ich ein paar Grenze von vier Hopfen Essen erstellen, das die vollbusigen 100% zeigt. Ich bin mir nicht sicher, warum es nicht sichtbar ist. Okay, das Problem ist, dass die Grenze drinnen ist, also werde ich sie nach draußen verschieben. Centra Schlaganfall Äußere äußere Hub etwas nach draußen. So ist es jetzt sichtbar. Bewegen Sie es nach innen. Ich denke ähnlich. Dasselbe passierte hier drüben, also zog ich nach draußen. Es wird zeigen, so dass es nicht zeigt, weil es nicht maskiert ist. Also lasst uns diese Grenze benutzen. Und die Farbe, die wir für diese Grenze verwenden, ist ein bisschen anders, was,denke ich, diese diskret für die Grenze ist denke ich, . Ich denke, wir müssen die gleiche Farbe für die Grenze verwenden. Lassen Sie uns es hinzufügen, so dass wir diese Farbe so etwas verwenden können, um die Grenze zu verwenden, weil es zu groß aussieht. Ok, jetzt ist unser alltägliches Bild fertig. Wir werden den Graphen hier erstellen. Okay. Nun, um dieses aufbauende kreisförmige Balkendiagramm zu erstellen, gehen wir durch einen Prozess zu gehen. Also werde ich das duplizieren, und wir werden die Grenze entfernen, Jane, das Jane, Feld zu blau und wir werden uns wieder replizieren, diese eine drücken Sie die Kunst-Optionstaste. Und ich werde seine Farbe Zehe weiß oder vielleicht etwas anderes wie dieses ändern und es ein bisschen kleiner machen , in der Mitte von diesem hier bewegen. Wählen Sie sowohl Formen als auch Betreff. Nein, wir haben dieses Holler-Schiff. Dies ist nur eine Bar, und es gibt viele Möglichkeiten, es zu verstecken, jetzt, dass Angelegenheit, die ich verwenden werde, ist, ich werde eine andere Form zu verwenden , um zu verstecken, schneiden Sie die Menge Hälfte von diesem. Also werde ich es so bewegen. Bewegen Sie es. Dieser in der Mitte wie folgt und beide Formen wieder auswählen. Wir wollten uns unterwerfen, und wir sind mit diesem Schiff übrig. Das wird also unsere Grafik sein. Okay, das ist also unser kreisförmiger Fortschrittsbalken. Und für diesenhierwerden wir die Grenze und den Schatten verstecken, und Sie können hier sehen,dass wir den gleichen Effekt haben. für diesen werden wir die Grenze und den Schatten verstecken, und Sie können hier sehen, Nun, wenn Sie die Farbe von diesem ändern wollen, werden wir die Farbe in diese ändern. Das und jetzt können Sie sehen, das ist unsere, ähm, Grafik. Okay, jetzt werden wir einen Text hier drüben setzen, der zu 50 Prozent vollständig sein wird und die Größe 10 10 10 Punkte betragen wird. Lassen Sie uns es in der Mitte so bewegen und wir werden 11 für die Zeilenhöhe verwenden und die Textfarbe wird diese sein. Lass uns so Mund und sehen, wie es aussieht. Es sieht ein bisschen ticker aus. Also, wenn Sie Zehe elastische Linie erstellen möchten, können Sie das gleiche tun. Und es gibt auch viele Möglichkeiten, das zu tun. Sie können es auch bewegen oder Haare oder vielleicht etwas Schatten zu diesem ein hinzufügen, so etwas, um es stilvoller zu machen. Also lassen Sie uns dieses Armaturenbrett ein gutes hier verstecken und lassen Sie mich Ihnen zeigen, wie das aussieht , so dass Sie etwas Schatten hinzufügen können, der diese blaue Farbe oder vielleicht das gleiche Blau hier oben sein wird. Haben Sie etwas Licht um sie herum und Sie können es auch wie 50% machen. So wird es 35% besser aussehen auf 35% und ein paar mehr Dinge. Sie können auch ein bisschen langweilig Scheiße von diesem Blau oder hier so für den Schatten verwenden. Okay, also denke ich, dass unsere Portion komplett ist. Wir haben das gemacht. Okay, im Moment, wenn Sie ein paar abgerundete Ecken um diese Form wollen, ist das nicht sehr möglich, weil wir es dann mit Stift zeichnen müssen und ich nicht. Ich will keine Zeit mit dem Stift verschwenden, also denke ich, dass diese Technik gut ist. Sie, Wenn Sie einige Schatten hinzufügen möchten, Sie können Schatten zu diesem oder auf der Form darunter hinzufügen. Es liegt an dir. Okay. So können wir auch so etwas minus zwei hinzufügen. So erscheint Schatten auf dieser Seite minus fünf. Zu Schatten ist jetzt. Genau jetzt, hier drüben auf dieser Seite. Also auch fünf für diesen. Okay, so benutze ich zwei Schatten und erschaffe diesen Effekt, aber ich denke, ich werde diesen Schatten verstecken und diesen auf Lee verwenden. Okay, jetzt haben wir unseren obersten Abschnitt abgeschlossen. Wir gehen zum nächsten Abschnitt in der nächsten Lektion, wo wir die erste Wache auf dem Bildschirmentwerfen erste Wache auf dem Bildschirm 31. ♥ Dashboard oberste Abschnitt: Okay, jetzt in Not. Und wir werden diese Karte hier drüben erstellen, die eure Einschätzung Updates und alles hier drüben ist. Geh ins Gefängnisjahr, und in der nächsten Lektion werden wir das mit der zivilen Last schaffen. Okay, also lasst uns anfangen. Wir werden uns die Dokumente ansehen, die wir verlassen haben. Und jetzt werden wir hier ein Gewirr schaffen. Ähm, abgesehen von der Größe, wird die Größe 192 Dips von der Höhe sein und 328 wird das Okay sein, also lasst uns es in der Mitte so ausrichten. Und diesmal werden wir die Grenze nicht benutzen. Wenn Sie Rahmen verwenden möchten, können Sie eine leichte Grenze Norden verfärben. Aber wenn wir zu unseren C-C-Bibliotheken gehen, denke ich, wir hatten diese Randfarbe ist die Randfarbe. Dies sind die Rahmenfarben, im Grunde Reifen. Also lasst uns diese Farbe ausstrahlen und sie als unsere Grenze benutzen. Sie können das Feld jetzt entfernen. Ok. Also eine weitere Sache, die ich vergessen habe, ist, dass auf dem Hintergrund aus dem Versteck, unsere Farbe ist anders, das ist F etwas Klicks sehen, was es war. Die Farbe Es war verfärbt. F sieben F neun f e solare Lehre den Hintergrund F sieben F neun f Es ist bereits geändert. Okay, also wird dieser weiß sein. Dies stoppte ein Stopp-Rechteck. Es wird weiß sein. Okay, also haben wir etwas näher dran. Ah, und wir werden vier dp off round schmiegen hier können Sie verwenden, wenn Sie Zeh wollen, ich werde verkleinern, um zu sehen, wie es aussieht. Okay, es sieht toll aus. Okay, davor gehen wir auf die Zehe. Bewegung Wenige Dinge im Schlepptau. Verschiedene Bereiche und Abschnitte. Das wird oben auf dem Zelt sein. Wenn ich mich also versteckt habe, schauen wir mal, was außerhalb dieser ist. Also, das ist Teil neun. Lassen Sie uns es in den oberen Inhalt verschieben. Diese beiden sind auch draußen. Kann gehen, um es innerhalb zu bewegen oder haben 50% wird oben sein. Lass es uns verstecken. Okay, also haben wir diesen Inhalt hier drüben. Das ist unser Top. Komm schon. Jeet ist unser verdammter Körper. Das ist unsere Margie. Es wird unsere Wache sein. Okay, also wird alles in dieser Gruppe sein. Also werden wir diese BG erstellen. Das wird ein Hintergrund sein. Okay, also haben wir das aufgereiht. Wir werden diese Linie als separate verwenden oder waren hier so etwas. Und es wird die gleiche Farbe wie diese haben, wenn Sie etwas Schatten um sie mit dem Schatten verwenden wollen. Okay, das ist also das Problem. DoubleClick und das Schattenvideo, das ich verwende, ist eins und drei für drei für die Unschärfe und 16% schwarz. So etwas wie das. So sieht es jetzt wie eine Karte aus. Okay, also müssen wir ein Symbol hierher ziehen. Ein Text hier drüben und ein Knopf hier drüben. Also werde ich den Text sterben und das schnell überspringen. Okay, also ist der Text fertig, ich gehe Fuß, mache es Bereichstext, und ich werde ihn so packen. Hinterließ eine Zeile, und wir werden so etwas verwenden. Also hier haben wir die nächste Es wird nicht getan werden. Es wird 16 sein, also stellen Sie sicher, dass es 16 ist und das wird 24 sein. Ich schätze, lass es uns 2016 machen. 20. Und die nächste Farbe wird diese sein. Lets gehen hier abgelaufen. Verfärbt, weil wir es immer wieder verwenden. Auch diese Farbe ist es auch unsere Textfarbe Great X Farbe. Okay, also haben wir das unter Kontrolle und ich werde 12 von oben lassen. Lasst uns jetzt die Last erschaffen. Also wird die Last hier drüben so sein. Keine Grenze. Das Gefühl wird unsere primäre Farbe sekundäre Farbe sein. Grundsätzlich werde ich es hier wieder hinzufügen. Und ich glaube, wir haben einen anderen zweiten Regular benutzt , der diese war. Also werde ich dieses hier noch einmal hinzufügen, und ich werde es auch hinzufügen. Toe sind Säkulare hier drüben? Okay, also haben wir grundlegende Dinge angelegt. Vielleicht können wir es etwas größer machen, weil wir weniger Gesicht oben haben. Etwas wie das werden wir zu BB von NUS in irgendeinem Schatten um ihn herum verwenden. Und die Schattenfarbe könnte diese sein oder diese oder diese, diese. Also werde ich einige sehr helle Schatten 40% verwenden. So etwas wie das. Das hatte etwas Dexter hier drüben. Zentrale Linie es. Wir werden weiße Farbe für diesen Text verwenden. Das ist etwas, was du so etwas hast. Richten Sie es in der Mitte so aus. Und ich denke, wir brauchen ein bisschen länger Großbritannien, weil wir auf beiden Seiten Ränder und Bettdecken haben. Ok. Also können wir hier auch etwas wie 14 benutzen, weil es mehr Sinn macht. Es ist irgendwie ein Status. Okay, also haben wir. Sie sind also die Designer. Sie können einige Dinge hier und da ändern, wenn Sie wollen. 12. Okay, wir haben 12 hier drüben. Was ist das Problem damit? Weil ich denke, das ist auf Sub-Pixel-Ebene 0.5. Wir werden 0,5 entfernen. Wir werden für 27 verwenden und sehen, was die Entfernung ist. Sie sind 20 Jahre lang klein, und es wird 16 Schweineeifer für 16 Punkte am Boden sein. Okay, also ist unser Text in allem, was alles andere getan wird. Und wenn Sie möchten, können Sie auch 15 Roberto verwenden, und lassen Sie uns das so etwas verwenden. Und ich denke, die 14 sieht besser aus, weil wir mehr haben? Mehr Platz hier drüben, und es sieht besser aus. Mehr Platz hier drüben, und es sieht besser aus. Mehr Platz hier drüben, Okay, jetzt werden wir diesen Text hier drüben replizieren. Okay, also haben wir diesen Text hier drüben. Machen wir es Zeilentext, und ich werde es hier so ausrichten. Lassen Sie uns dies ein wenig größer in der Textfarbe machen. Ich werde das benutzen. Erstellen, ext, weil es eine Art fleißig ist. Und lasst uns die Symbole überziehen und sie hier rüber bringen. Dies sind behauptet thes Tiersymbole. Als wir diesen hatten, ist ein anderer, dieser ist, dass er sie schnappt und sie hier drüben festhält. Schleppte sie eins nach dem anderen. Bewegen Sie es nach innen. Hier drüben. So wie das. Auch dieser hier. Jetzt werde ich ihre Größen zu erhöhen. Also wird es 36 sein und dieser hier ist Lasst uns diesen so behalten, wie er ist. Okay, also werden wir das physische er benutzen, um so etwas zu sein. Textfarbe auch für dieses eine Zentrum. Richten Sie es mit diesem, Eigentlich, was ist der Abstand zwischen diesem und der Grenze 12 auch für dieses eine, Eigentlich, Sie sollten Ihre sie, indem Sie einige 24 große Verkäufer 24 dp Block hier drüben. Der richtige Weg ist, dass Sie, wenn Sie möchten, so etwas verwenden können. 24.24. Aber du gehst voran. Okay, also ist es nicht im Grunde 24. Also werden wir einen Block von 36 verwenden. Verwenden wir einen 40 40 Block. So etwas wie die Tür hier für diesen hier. Lassen Sie uns diesen Wachhintergrund sperren, weil wir keinen Ertrinken bewegen müssen. Lasst uns wie beide von ihnen wegziehen und sie so hierher bringen. Okay, im Grunde musst du so etwas tun. Aber wir benutzen das nicht so. Wir benutzen unsere Augen, um Dinge auszurichten. Also werde ich dieses Rechteck wie dieses glauben, und ich denke, sie sehen ziemlich gut aus auf Hat kein Problem, dies zu sehen. Und jetzt, wenn ich alles sieht, bewegen Sie all diese in diese Karte, und wenn ich sie nach oben bewegen will, kann ich sie bewegen. So etwas wie das. Dieses Symbol sieht ein bisschen nach unten und passt sich nicht an diesem an. Es gibt eine Zeile, um diesen Text abzurunden. Okay, also denke ich, es sieht aus. Erstellen Wenn Sie dieses Symbol verschieben oder es dieses Mal ein bisschen größer machen möchten, Fahrrad auf diesem Daumen-Scan, Sie können 36 von 36 so etwas verwenden und die Farbe Toe ändern. Das vielleicht dieser hier. Das sieht also toll aus. Auch die linken Ränder von diesen Symbolen ausgerichtet, dieses in diesem so. Okay, in der nächsten Lektion werden wir den nächsten Inhalt erstellen, der unsere nächste Karte ist. Gehen wir also zur nächsten Lektion über. 32. ♥ Dashboard unten Design: bevor wir den zweiten Teil dieser Karte erstellen, werde ich zeigen Ihnen einige Dinge, die ich getan habe, die ich in diese ändern. Okay, das erste, was ist, dass ich die Größe von diesem Text auf 16 Punkte angepasst habe, was im Grunde über Partei vier Seiten ist, also möchte ich mich nicht damit anlegen, da 14 im Grunde eine kleinere Größe ist, die wir verwenden. Das ist also 14. Das ist 16. Auch, dieses Symbol ist 36 dieses, das ich geändert 28 DPs. Okay, das wird also um 28 fortgesetzt. Oder hier machte auch die Größe aus dieser 1 98 Höhe und Breite. Sollte 3 28 sein, ich bin mir nicht sicher, warum es so ist. Uh sehen 100 Ende 20. Okay, also drei und 28. Okay, das ist also die Größe. Okay, jetzt werden wir diese, diese Karte replizieren , und mal sehen, wo diese Karte waas Okay, also hier haben wir. Ich werde zustimmen, Mandy und wir haben diese weitere Karte, und ich werde hier runterziehen, und wir brauchen nicht wenige Dinge, also werde ich sie wie diese Zeile löschen. Okay, also habe ich die unnötigen Dinge gelöscht. Ich werde die Größe ändern und einfach die neue, die ich hier rüber gegangen bin, Jane, die Decks. Also werde ich es beschleunigen. Nein. Wir werden den Knopf benutzen und seine Farbe auf die deaktivierte Schaltfläche ändern, die unsere auf dieser Farbe hier drüben war. Deaktiviert. Belastet. Okay, also werde ich hier klicken entfernt den Schatten, und das ist alles, was wir werden den Text Toe ändern. Ähm, keine Notwendigkeit, sich zu zentrieren. Streichen Sie es von unserer Schicht aus. Siehe em. Und es ist in der Mitte. Ich denke für, äh, für Mac-Betriebssystem. Die Abkürzungen sind ein bisschen anders, denke ich. März, wenn C o r vielleicht Gypsy kontrollieren. Ich erinnere mich nicht. Okay, also kannst du das überprüfen, oder du kannst nur einen Pufferport von ihnen benutzen und diese Steuerelemente hier drüben benutzen. Ok? Nein, Wenn Sie einige kleinere Anpassungen vornehmen möchten, wie Sie hier sehen können, sieht dieses Symbol zu sehr nahe an dieser linken Seite. Ja, ich glaube, es ist nur mit. Dann die Distanz. Ich werde 12 DPs und einige weitere Anpassungen verwenden, wie Sie die Größe dieses einen Zehe 140 so etwas reduzieren können und diesen Last-Synchronisierungsknopf hier drüben bewegen können. Ein großes Top überprüfte uns auch rechts und links Ränder, also muss es 12 DPs sein. Ich verwende 12 um die Ränder, was, denke ich, der Standard für das Materialdesign, Google Material Design ist. Und ich denke, das ist es. Wenn Sie etwas anderes ändern möchten, beträgt der Abstand zwischen diesen beiden 12 DPs. Wenn Sie die 16 tief erhöhen wollten, können Sie das tun und es wird auch so aussehen . Wenn Sie möchten, entfernen Sie die Schatten, können Sie die Schatten entfernen, und es geht, um die gleichen Beweise zu sein. Das wird die gleiche Wahl der Schatten sein. Es ist im Grunde der Effekt, den wir für einen Schock entworfen haben, weil dieser Knopf nicht erhöht ist und dies gekennzeichnet ist, weil es bedeutet, dass dies, äh, äh, ist im Grunde interaktiv. Das geht also alles darum, dieses Dashboard zu erstellen. Ich hoffe, Sie haben diese Lektion genossen. Fahren wir mit der nächsten Lektion fort 33. ♥ Design Bildschirm: bevor Sie den Aktivitätsbildschirm entwerfen, bewegen sich zum nächsten Ding. Ich gebe Ihnen hier ein paar Tipps zum Arrangieren. Oh, machen den Kampfraum in deinem Design besser aus. Okay, also jetzt, wenn Sie sich hier ansehen, haben wir 16 dp Marge auf beiden Seiten, um diese Autos zu halten. Und das diese Elemente Nr. Ich bin sicher, dass Sie sich vielleicht fragen, dass dieses Element ein bisschen anders aussieht als die Vergangenheit Beispiel. . Weil diese Zeilen hier drüben sehen können, dass dieser , Text und dieses Bild,das ich mehr für das Innere der Stadt bewegen will. Okay, also was wir versuchen, die Hölle zu machen, ist, dass ich es dir zeige. Lassen Sie uns das Gitter einschalten. Ah, Quadrat, Greg. Okay, also lassen Sie uns hineinzoomen und ich werde es Ihnen zeigen. Sie können hier sehen, wir haben diesen Inhalt und es beginnt ab 1234 fast hier und hier haben wir den Inhalt , der von diesem ausgehend, und es ist auch außerhalb dieses Bereichs schaut. Also werde ich es tun, ist, dass ich es so hier hineinschieben werde. Oder vielleicht wenigstens hier drüben, wo sie miteinander übereinstimmen. Ok, also auch, wir werden das Gleiche dafür tun. Das schien, was wir haben oder hier. Okay, also gruppieren wir sie zusammen. Das ist eine Falle. Also dort haben wir einige von den Problemen aus diesen zusätzlichen Elementen, also werde ich es mehr in diesem auch diesen Spaß bewegen. Hoppla. Vielleicht denke ich, dass ich diese beiden so miteinander bewegen muss. Okay, jetzt können wir auch die beiden bewegen. Ich habe hier drüben mehr ausgesucht. Oder vielleicht 24. Okay, das sieht also besser aus. Okay, also lasst uns Platz nehmen und diese Note ablegen und die Ergebnisse sehen. Jetzt können Sie sehen, dass sie mehr ausgerichtet aussehen. Mehr bester Meter Abstand. Selbst wenn Sie das etwas näher dran bewegen möchten. Oh, hier. So kannst du es tun. Und jetzt können Sie sehen, dass sie mehr aufeinander ausgerichtet sind. Okay, das ist also nur ein einfacher Zehenspitzen. Richten Sie Ihre Sie ein Design-Elemente. Nein. Wir werden diesen Aktivitätsbildschirm bewegen. Lassen Sie uns dieses Dashboard replizieren und es Aktivitäten benennen. Ist es. Jetzt gehen wir Zehe Aktivieren Sie dies im oberen Bereich des Dashboards. Okay, also, um es zu aktivieren, gehen wir zu DoubleClick. DoubleClick und wir werden unsere Kapazität nutzen, füllen ihre Verwendung 70%. Wir werden 100% verwenden. Auch dieses Symbol. Wir machen es 100% davon und machen den Rest dafür. Wir werden es deaktivieren, oder wir werden es benutzen. Ah, etwas weniger Transparenz hier drüben. Also werden wir etwas wie 2% verwenden. So verwendet es 70%. Sicher. Wir werden 70% für die nächsten verwenden. Verwenden wir 70%. Verschieben Sie einfach diesen Indikator wovon? Haare? Wählen Sie Boot von ihnen Knochen und Indikator. Und wir werden es in der Mitte so ausrichten. Okay, also ist das aktiviert. Nein, wir haben etwas getan. Wir sind hier. Und dafür werden wir all das entfernen. Nur dieser hier. Vielleicht behalten wir das hier. Wir brauchen diese Grafik nicht. Also wirst du es löschen? Und auch wir gehen toe Relation diese? Ich schätze schon. Lasst uns das verdünnen. Und auch das hier. Nein, dieser Text wird als unser oberster Text dienen, der für unsere Listenelemente im Grunde Listenelemente erstellt wurden. Lasst uns zuerst in die Gruppe gehen. Okay. In diesem Beispiel werde ich hier drei Zeilen aus dem Text verwenden, und das ist unser Hauptkreis. Ich werde ihre Größe auf 40 reduzieren, was tatsächlich die Größe der globalen Behandlungen ist. Also werde ich 40 für diesen hier verwenden. Okay, wir haben hier zwei Elemente. Wir brauchen noch eine Sache, die unser Pfeilsymbol ist. Wir ziehen das Pfeilsymbol hier rüber. Dies ist unser Pfeilsymbol, und wir werden es in Adobe X'd ziehen. Alles klar, geh weiter. Das ist eine Linie, die es für einige so ist. Als Nächstes drinnen. Also 01 So etwas wie dieser Wiki-Zeh. Machen Sie es zu einer Linie in der Mitte schlaff Boot von ihnen so. In der Mitte vereinen. Okay, also denke ich, dass unser Text und alles Augen fast aufgereiht sind. Bringen wir es näher an diesen. Weil die Distanz fast sein sollte . Hoppla. Also haben wir zwei Overs hier drüben. Verschieben wir die Grenze um sie herum. Und jetzt sind es genau 40 dp's. Okay, also ist dies die genaue Größe, die Google für einige Status oder Bilder oder hier empfiehlt. Also benutze ich das hier. Jetzt gehen wir auf die Zehe. Bewegen Sie das näher und es wird 16 db von hier entfernt sein. Dies sind die genauen Spezifikationen. Außerdem wird das 16 sein, um von hier weg zu sein. Okay, also haben wir fast alles aufgereiht. Lassen Sie uns seine Farbe ändern Zehe dieses Blau, das unsere aktive Farbe ist. Und was wir hier brauchen, ist ein Rechteck mit vitalen er. Oder vielleicht können wir etwas anderes gebrauchen. Lasst uns benutzen. Okay, also lasst uns ein Rechteck aus der Höhe von 88 verwenden und den Rand verschoben. Phil wird Kampf sein, und wir werden es unter alles bewegen. Okay, also sind wir fertig mit diesem hier. Lasst uns das mittendrin drunter sein. Also, was wir tun werden, ist, dass wir sie gruppieren, also lasst uns sie gruppieren. Das sind unsere Schüler, so etwas. Und wir werden es mittendrin ausrichten. Außerdem gingen diese beiden in die nächste Gruppe. Es erlaubt es in der Mitte von diesem, und auch diesem. Okay, also haben wir das fast abgeschlossen. Lexie, Was ist die Entfernung von hier? Machen wir es 24 statt 25. Okay, also ist das erledigt. Wir brauchen eine weitere Linie unten für einen Separator. Also werde ich online fallen, und wir werden diese sehr dunkle Randfarbe verfärben, die hier sehr schön aussehen wird. Und wir werden es unten ausrichten. Okay, jetzt können Sie sehen, dass wir alles hier haben. Jetzt werden wir den Text der Vereinten Nationen gruppieren, weil wir ihn mit einer Textdatei aktualisieren werden. Nein, wir machen eine Gruppe aus all dem, und wir werden wiederholen Gier, oder wir werden eine Wiederholung verwenden. Seltsam. Also werde ich alle auswählen. Klicken Sie auf Wiederholen. Gut. Und das ist unsere Wiederholung. Gut. Nein. Sehen Sie die Magie ab, es wird extra. Also werden wir eine Wiederholungsliste wie diese erstellen. 3456 Artikel. Ich schätze, du brauchst hier sechs Gegenstände wie diesen. Und jetzt gehen Sie in die Mitte davon und versuchen, die Größe nach oben zu reduzieren, und es wird Null Zehe sein. Machen Sie es perfekt. Okay. So können Sie sehen, keine andere Liste vollständig ist. Wir sind mit diesen Aktivitäten fertig. Wenn Sie etwas ändern möchten, können Sie doppelklicken und Jane die Farben aus diesem. Davor werden wir noch eine Sache machen. Okay, also werden wir diese Textbeurteilungen aktualisieren. Also habe ich bereits eine Textdatei erstellt, und das ist für Aktivitäten. Also werde ich diese Datei ziehen und ich werde sie auf diese Anwesenheit fallen lassen, also wird es jetzt alles ändern. Das Problem ist, ich denke, mein Text war in der Mitte ausgerichtet, so dass einige Probleme verursacht. Also davor, wir gehen zurück zum ersten Schritt und ein Boot wie dieses und machen es links ausgerichtet Auch diesen. Machen Sie es eine Linie links. Jetzt wieder, erstellen Sie eso. Wiederhole, es ist schon da, also werde ich es noch einmal wiederholen. Reduzieren Sie die Größe in der Mitte. Okay. Und jetzt werden wir die nächste fallen lassen, oder hier können Sie sehen, dass es unsere Wechsel-Expedition nicht ersetzt. Okay, also kannst du auch mental und es hier drüben, wie Nullzehe so etwas. Wenn du willst und ah, noch ein paar Dinge. Zum Beispiel, wenn ich hier etwas ändern will, möchte ich vielleicht, dass die Farbe von diesem hier ändern wird, um dieses blaue Hoffnungen. Also davor, werde ich die Gruppe meiner Gitter. Okay, also werde ich meine Farbe für Lee diesen Gegenstand ändern. Das wird also weiß sein, und das wird auch weiß sein. Und lasst uns das gleiche verfärben, okay? Und nein, das können wir benutzen. Ah, vielleicht eine andere Farbe. Vielleicht das hier. Das ist also ein anderes Farbschema als zuvor, aber ich denke, ich mag es wirklich sehr scharf. Sehr nett. Das ist also nur, um sicherzustellen, dass hier drüben etwas sehr Wichtiges passiert. Oder vielleicht so etwas oder der Benutzer braucht Aufmerksamkeit auf diesen, oder das ist möglich oder so etwas. anderes Farbschema, mit dem Sie gehen können, ist dieses. Sie können diesen Hintergrund so verwenden, und für diesen können Sie mit einer dunkleren Farbe gehen, die dieser ist, so etwas. Und dafür können Sie auch mit dieser dunkleren Farbe gehen. Also eigentlich habe ich diesen hier benutzt, weil das unsere Primärfarben ist. also möchte ich nicht, dass es in meiner App oft verwendet wird. Dieser Bildschirm ist also komplett. Dies ist die Magie aus wiederholter Note, und jetzt werden wir den Bildschirm duplizieren, Zehe einen anderen und löschen Sie den Senk-Bildschirm in der nächsten Lektion. 34. ♥ Design: Okay, jetzt in diesem Hören, werden wir Sing-Bildschirm erstellen, und wir werden diesen einen replizieren, weil es diesem Bildschirm sehr ähnlich ist. Also zuerst werden wir diesen Stich verwenden und diese Synchronisierungsdateien hier drüben aktivieren, anstatt diese Aktivitäten. Also gehe ich zu Fuß rein und ah, tu das Gleiche. Machen Sie dies 70% oder 60%. Und dieser Text wird 70% betragen. Und das geht auf die Zehe. Das ist im Grunde das Gefühl. Also werde ich das hier verlieren. Und das ist unser Dies ist unsere Ikone. Es gibt dieses Symbol. Okay, hier haben wir es. Machen wir es 100%. Und diese Zeilenleiste wird sich bewegen. Also dieser ist aktiviert, dass zu fragen, deaktiviert. Und jetzt, was wir tun werden, ist, dass wir das löschen. Löschen Sie das wirklich, ich glaube, dies und veröffentlichen Sie diese Jetzt werden wir auch zu UN-Gruppe gehen dies, also werde ich Zehe auf Gruppe. Also haben wir all diese Schichten auf. Jetzt werden wir wieder große Schöpfer B-Klasse gehen. Und jetzt brauchen wir nur noch vier Artikel von 123 und eine weitere solche. Nein, mir geht's gut. Nutze den Raum wirklich wieder auf Null. Nullpunkt nach oben. Perfekt. Und wir werden die wieder fallen lassen. Die Akte hier drüben. Textdatei Wenn Sie nicht wissen, wie diese Magie tatsächlich passiert, sind dies im Grunde eine Textdatei in vier Zeilen und ich habe bereits eingegeben. Also werde ich es per Drag & Drop auf meinen Lear ziehen, was ich diesen ändern möchte. Und jetzt können Sie sehen, es wurde viel in 44 Dateien geändert, Vier Einträge. Wenn du hier etwas ändern willst, kannst du das tun. Männer wurden durch Doppelklick, Doppelklick und Eingabe hier geführt . Also werde ich dies als meinen deaktivierten Bildschirm verwenden. Also machen wir es Dezember. Okay? Also zuerst werden wir tun, ist, dass wir die Nachricht über die Deckkraft und machen diese Textkapazität auf 60%. Hoppla. Also müssen wir dies im Grunde zuerst unter dem Gitter auspacken. Wo ist unser Netz? Dieser Sohn Gruppe es, weil wir die Stile ändern oder hier, also Kapazität, Verringerung der Deckkraft von der Textkapazität toe 60% so. Lassen Sie uns seine Farbe in etwas anderes wie dieses ändern. Oder vielleicht so etwas. Und auch das hier. Ich werde etwas benutzen. Lassen Sie uns Benutzer sculler toe Opazität dies Lassen Sie uns Opazität s verwenden, so dass ich es 60% machen werde. Jetzt können Sie sehen, dass dies eindeutig inaktiv oder deaktiviert aussieht, weil wir es nicht verwenden können. Und wenn Sie den Status ändern möchten, zum Beispiel meine Bilder, um unsere wie 10 Bilder herunterzuladen, dann kann ich auch noch eine Sache tun. Ich kann seine Farbe auf diese ändern. So etwas. Oder vielleicht dunkleren Schatten von diesem hier. Lassen Sie uns unsere Bibliotheken öffnen und sehen, dass wir hier andere Farben hatten, also nein, ich werde einen Muttermörder aus der Assisi-Bibliothek benutzen. Ich werde Zeh wählen. Ich habe diesen ausgewählt. Öffnen wir das hier. Und ich werde diese dunklere Farbe verwenden, um zu betonen, dass dies wichtig ist. Ok, so etwas rund um so etwas. Also, äh, so benutzen Sie Ihre wiederholte Gier. Und wenn Sie etwas drin haben möchten, können Sie das in Adobe tun. Eigentlich denke ich, es ist einfacher , Dingezu , Dinge ändern. Ich werde Akten versenken. Lassen Sie es uns umbenennen. Wir brauchen noch einen Knopf und Status hier drüben, damit wir eine Sache tun können, die wir diese Flaschenbewertung als Symbol löschen lassen . Machen Sie es zu einem Symbol. Gehen Sie zur Symbolbibliothek und ich werde es hierher ziehen und ablegen. Weißt du, ich klicke mit der rechten Maustaste, und ich gehe auspacken. Diese Gruppe ist und ein Gruppensymbol, weil ich einige der 10 Wanderungen ändern werde. Also hier haben wir sinken in Wolke. Mal sehen, ob es in der gleichen Größe passen wird. Ich werde das Symbol hier rüber ziehen, irgendwo hier rüber gehackt. Lass es uns hineinziehen. Diese Vergrößerung sieht auf, plus ism in, und wir müssen es in der Mitte davon ausrichten. Also werde ich das benutzen. Es erlaubt es hier drüben. Dann werde ich Zehe 11 tau 12.12 Punkte oder 12 dp's von hier und auch den Text, und dieser wird Qualitätsbienen haben. Sieht toll aus. Lassen Sie uns das mittendrin bewegen. Aus Hoffnungen versenken alles die Wolke, aber und machen eine größere Belastung. Es ist einfacher Zehenweste oder klicken Sie von jedem Benutzer Hoffnungen. Machen wir es wieder so etwas. Mal sehen. Was ist der Abstand zwischen? Es muss über 12 sein. Das sieht toll aus. Ich gehe die Zehe. Richten Sie es in der Mitte aus. Hoppla. Nächste Gruppe ID Befehl G und dann Aligned Unlimited. Lassen Sie uns den Status hier auf dem Deck Buggy hier unten hinzufügen. Also lasst uns die Farbe von diesem einen Zeh bringen. Lasst uns dies ändern, so dass dieser in der Mitte ausgerichtete ext erzeugt. Ich werde das Boto Medium 14 nicht benutzen. Ich werde regelmäßig 14 hier drüben benutzen. So etwas. Es ist sehr niedrig an der Unterseite. Also gehe ich den Fuß, mache es näher an diesen. Das sieht also toll aus. Es wäre der Abstand zwischen diesen beiden. Okay, Okay, also denke ich, das hier ist erledigt. Wenn Sie Fragen haben oder mehr über die Spezifikationen wissen wollen, ist das alles, was ich hier verwendet habe? Das sind im Grunde 88 DPs. Ich bin mir nicht sicher, warum es das ein Pixel mehr zeigt, aber wenn Sie darauf doppelklicken, können Sie sehen, dass es 3 60 mal 88 DP ist, was eine Spezifikation für drei ist. Zeile A drei Zeile Ein Listenelement aus dem Google-Materialdesign. Okay, also haben wir das erfolgreich erstellt. Wir haben einen Bildschirm übrig , der auf dem Stich ist hier die Registerkarte auf diesem Bildschirm. Ich glaube, ich habe vergessen, die Registerkarte hinzuzufügen. Also werden wir ein Dob-Symbol hier drüben verwenden, um die Bildschirme dieser linken Schublade Navigation oder hier zu zeigen . Also lassen Sie uns auf die nächste Lektion gehen, wo wir den letzten Bildschirm zu erstellen, die links gezeichnet Navigation. 35. ♥ Nav Drawer: Okay, bevor wir anfangen, diesen Erzähltropfen zu entwerfen, hatten wir einige gewonnen, die nur reparieren wollten, was diese war. Also werden wir dieses Hamburger-Symbol hier drüben kopieren, und wir werden es einfügen. Copy, und wir werden es in all diese Entwürfe einfügen, an der Stelle hier drüben. Also doppelklicke ich nur, um zu diesem zu gelangen. Kontrolle V. OK, damit Sie sehen können, dass es an Ort und Stelle geschlagen hat. Also gehen wir Zehe verwenden eine andere Funktion off bei o B x D Also gehen wir toe klik und wählen Sie mit Shift, indem Sie auf alle verschiedenen Kunstboards, die wir wollen toe Arbeit mit und Kontrolle oder Befehl re. Ok. So können Sie sehen, dass ich dieses Element mehrfach auf all diesen Kunstbüchern überstanden habe. Das ist also ein sehr cooler Trick, wenn du das tun willst. Okay, jetzt lasst uns das ist unsere Tab-Leiste. Und wir hörten etwas hier drüben, das sich überhaupt im Toolbar-Inhalt befindet. Wir werden es in ähnlicher Weise löschen und mit diesem gehen, also müssen wir nur diese Zurückpfeile löschen. Okay, also sind wir alle fertig mit diesen also sind wir alle fertig mit diesen Hamburgern,wissen Sie, wir werden die Seite schaffen. Hamburgern, wissen Sie, Nie. Und, ah, wir werden dieses Dashboard als unseren Hintergrund verwenden, also werde ich es replizieren. Befehlskontrolle, De. Also haben wir einen anderen Bildschirm oder hier werde ich es nennen, nie zeichnen. Und was ich tun werde, ist, dass ich alles verbergen werde, außer dem Zustand des Funkens. A Also werde ich den Status verschieben, aber oben wie dieses und Hamburger-Menü und alle anderen Dinge, werde ich sie in einer Gruppe gruppieren, uh, werden Hintergrund genannt. Okay, also werde ich es jetzt sperren, damit wir diesen Hintergrund nicht irrtümlich verschieben. Jetzt gehen wir zu Ihnen, ich komme vorbei und Reggie Weg durch ein tolles einfaches Studio, und wir gehen Krabben diesen Bildschirm und was wir tatsächlich brauchen, ist, gehen wir zu diesem Ebenen-Panel . Wir brauchen diese Navigation zeichnen Seitennavigation unzweifeln diese Statusleiste. Auch wenn Sie den Statusteil kopieren möchten, können Sie ihn kopieren. Und auch dieser Hintergrund. Okay, was wir also nicht brauchen, ist, dass wir hoffen, dass wir ein Problem haben. Wir sind jede Hoffnung hier. Okay, also wählen wir das gerade jetzt aus. Befehls-Kontrolle oder Befehl. Sehen Sie? Und wir werden es oben auf dieser Seite einfügen. Okay, jetzt können Sie von einer Navigation sehen. Tiefgang ist hier. Mal sehen, was ist der andere vorhin hier drüben, was ist das hier? Dies ist Hintergrund auf. Und das ist, lassen Sie uns diesen Hintergrund kopieren und ihn hier drüben aufbauen. Okay, jetzt werden wir dieses Overlay nach hinten verschieben. Aber der Status-Körper wird so an der Spitze sein, und was wir tun werden, ist, dass wir einige Kapazitäten für diese 50% nutzen werden. Machen wir es 50% Kapazität so. Okay, also ist das hier drüben, und jetzt werden wir es schaffen. Lasst uns entwickeln, anklicken und diesen Hintergrund verwenden, und ich werde es hier drüben Krabben machen und es voll davon machen. Okay, also ist das Fell voll. Wir haben unsere wichtigsten Dinge hier drüben aufgestellt. Lasst uns Gleaton die, die wir nicht brauchen. Okay, also vielleicht brauchen wir nicht das ist das ist im Grunde eine Liste eso Ich werde alles unter diesem auswählen Wir brauchen nur drei von ihnen. Okay, also werden wir eine verwenden ist Profil ändern oder vielleicht auswählen. Ah, Beurteilungsjahr. Auch hier drüben. Wir werden den Namen unseres Arztes benutzen. Lasst uns diese E-Mail benutzen, wie auch immer es hier ist. Mal sehen. Platzieren Sie dieses Bild hier drüben, jeden Teer und ich werden die große Karte hier auf das Bild der Nachzügler Ärzte ändern. Sie waren hier Bilder, und das ist unser schön aussehender Dr. Es gibt einen Ort, der alles hier so ist, und ich werde diese große Karte entfernen, Größe und irgendwo anders klicken. Und Sie können jetzt sehen, dass es bereits abgeschnitten ist. Also werde ich doppelklicken und diesen Film auswählen. Ertrunken. Lass es uns so etwas kleiner machen. Okay, das sieht also gut aus. Ich bin mir nicht sicher, aber ich denke, dieser sieht sehr nah an dieser Grenze, also werde ich sie unten verschieben. Okay, lass uns mal sehen. Was? Wo ist die Größe dieses? Das ist also unsere Liste, also denke ich, wir sollten eine Liste verschieben. Zumindest ist es, ähm, es ist runter. So etwas wie das. Nun, lassen Sie mich sehen, was die Entfernung ist. 10. Okay, jetzt sieht es besser aus, weil ich denke, dass Material Design Google-Material entworfen sie haben eine Trennung zwischen Liste und anderen Elementen aus einer DP, zumindest. Also, jetzt haben wir ermutigen Trennung, und wir müssen nur unsere Symbole hier ändern. Okay, also werde ich Symbole hierher ziehen. auch Wenn Sie können, können Sie diesen Hintergrund ändern, dem es sich um dieses Maskenbild handelt. Damit wir es hier drüben so ändern können. Und ich werde diesen Hintergrund aus meinem SS-Ordner bringen, und ich werde durch diesen ersetzen. Ich habe gerade das Bild oben auf dieses gezogen. Okay, wenn ich jetzt draußen gehe, wird es so etwas sein. Okay, also noch eine Sache, wenn du willst, kannst du auch noch ein paar Dinge überlagern, wie diese, und ich werde es mit der Verfärbung füllen, und ich werde eine solche Kapazität nutzen . Vielleicht so etwas nach draußen nehmen und Sie können sehen, dass dies der gleiche Effekt ist, den wir gesucht haben . Okay, also ziehen wir dieses Bild in die Mitte. Hoppla. So etwas. Okay, jetzt werden wir diese Symbole ersetzen. Also lasst uns dazu kommen. Die Symbole für die letzte Aufgabe. Und hier haben wir das Symbol. Dies ist ein Profil eins. Und das ist die Gesetzbock. Und die Veränderung hier ist diese. Also werde ich sie alle packen, sie in meine Akte ziehen, sie in das beste Brett aufbauen, damit sie hier nicht verwechselt werden. Und was ich tun werde, ist zu kopieren und in das Symbol dieses Rolleneingangs zu gehen, das es hier drüben basiert. Nein, ich werde es oben darauf ausrichten. Ich bin weg und lassen Sie sie einfach Box Symbol Taste. Und jetzt, was ich tun werde, ist, dass ich die Farbe auf diese Highlight-Farbe ändern werde, die unsere diese war. Ah, sekundäre Highlight-Farbe. So wird es so aussehen. Und für diesen hier, können Sie sehen, dass sie etwas Farbe über dem Haar verwendet haben, was ist die Farbe von diesem hier? 54% Kapazität für Phil schwarze Farbe. Also werde ich tun, ist okay, also sind wir alle gut. Es gibt noch eine Sache. Wenn Sie es tun möchten, können Sie dieses Logo unten verschieben und einige Zeilentrennung setzen. Also, Gesetz, Ziege ist anders als all das. Aber wenn Sie es hier behalten wollen, ist das bis zu Ihnen wissen, ich werde all diese Symbole lesen, und ich denke, andere Navigation zeichnen ist fertig. Dieser Teil wird an der Spitze sein. Der Statusteil wird an der Spitze sein. Alles in Ordnung? Weil es mehr Höhe hat und dann beide von diesen Dingen. Okay, also dreht sich alles um dieses Design. Ich habe Ihnen gezeigt, wie Sie alle diese komplett entworfenen. Lassen Sie uns auswählen und verschieben. Oder hier, lassen Sie es uns in diese verschieben. Okay, also haben wir sechs Bildschirme entworfen und ah, danke, dass Sie sich Zeit genommen haben und mit mir in all diesen langwierigen Übungen aufgebaut haben. Ich hoffe, Sie haben diese Lektion genossen und die Designspezifikationen von Google Design Madrid gelernt und lernen, wie Sie zu verwenden. Ich kann schnell Ihr Design erstellen. Okay, was wir hier drüben tun, ist, dass wir nur wimmeln. Ah, basierend auf Farben und Typografie und ein paar von den Elementen, Größen und Entfernungen mit Material, Google Material Design Richtlinien, und ich hoffe, Sie haben diese Lektion genossen. Die nächste Lektion. Wir werden Batch-Export-Funktion hier verwenden, die im Export Badge Export ist, um unsere alle Assets in verschiedene Auflösung Buckets zu exportieren . Für xxx dp i xx e p i drei zusätzliche Arbeiten eine nächste 1.5 x und all diese verschiedenen Auflösungen , die von Google Material Design unterstützt werden. Wenn Sie Fragen haben, die Sie mir stellen müssen, fahren wir mit der nächsten Lektion fort. 36. ♥ Letzte Aufgabe Adobe XD: Ok. Bis Sie wissen, haben Sie alles über Android-Materialdesign gelernt und wie Sie Android-Material verwenden können entwickelt wurde, um fantastisch aussehende APS zu entwerfen. , Du hast gesehen,wie ich eine Übung für dich mache. Nun, ich möchte, dass Sie eine weitere Aufgabe erstellen. Das wird dein letzter Auftrag sein. So werden Sie Ah, sehr einfache Messaging-App für mich zu erstellen . Und ich möchte nur, dass du drei Bildschirme erstellst. Lassen Sie mich Ihnen zeigen, was und welche Bildschirme Sie mir für Ihre endgültigen Aufgaben zeigen werden. Erstellen Sie ein Team ah, Farbschema. Und wenden Sie das auf das Materialdesign an. Verwendet y Kinder und ah, äh, versuchen, dieses Leben zu bringen. Sie können Ihre eigenen Ideen verwenden, wenn Sie möchten. Sie können Ihre eigene Kraft verwenden, wenn Sie Zeh wollen. Aber ich will die drei Bildschirme von dir. OK, also werde ich zu meinem Desktop wechseln und wir werden sehen, was ich eigentlich von dir will. Ok? Ok. Jetzt können Sie sehen, ich bin auf diese Nachrichten plus SMS-App und Sie können sehen, ich will nur diese drei Bildschirme von einem. Ist dieser Posteingang, der alle verschiedenen Kontakte und all die verschiedenen Nachrichten von Ihren Freunden und das Datum und vielleicht die Zeit hier drüben gesendet haben. Und wir verwenden drei feste Registerkarten hier, die Sie oben sehen können, und der nächste Bildschirm wird der Messaging-Bildschirm, wo die verschiedenen Nachrichten erscheinen und Sie mit Ihren Freunden sprechen und dann wird die letzte Königin Kontakt sein. Okay, also, SMS wollte ich, dass du Smists, Kontakte und Anrufe entwerfst . Wenn Sie den Anruf überspringen möchten, können Sie diese SMS und die beiden Bildschirme verwenden, tatsächlich abbrechen. Okay, also drei Bildschirme. Einer ist mit dieser SMS, wo Sie sprechen oder mit Ihren Freunden chatten. Einer mit den all diesen Kontakten und einer dieser Posteingang, wo Sie all diese smmes haben. Versuchen Sie also, Ihre weißen Kinder zu benutzen. Ich habe Sie während der Partituren zur Verfügung gestellt. Versuchen Sie, das Rad neu zu erfinden. Also gehen Sie voran und entwarf diese Übung. Ich werde diese Übung überprüfen und ich werde Ihnen Tipps zu heißen geben. Verbessern Sie Ihre Konstruktionsfähigkeiten. Nehmen Sie den Screenshot von Shorts aus. Ihre Entwürfe werden sie als Gefahr exportiert. Sie können in drei x zwei x oder vier x xxx SDP entwerfen, aber stellen Sie sicher, dass Sie schön aussehende, gute Größe Art Board Bildschirm, wo ich sie leicht sehen kann. Versuchen Sie nicht, große Dateien zu übermitteln, daher wird es schwierig für mich sein, sie separat anzuzeigen. Okay, also stellen Sie sicher, dass die Bilder, die Sie von Ihren Kunstboards exportieren werden, um mir eingebettet zu zeigen. Sie können etwas mehr Tasse verwenden, wenn Sie wollen. Sie können jedes Samsung oder jedem Android als Telefon Mock up herunterladen und diese Bildschirme in drei verschiedenen Markups setzen und senden Sie das an mich. Das ist ein guter Weg, um Ihre Entwürfe zu präsentieren. Okay, also hoffe ich und sehe weit nach vorne sehen und warten auf Ihre Aufgaben, die beginnen, sie jetzt zu entwerfen . 37. ♥ Batch-Dateien in Adobe XD: Ok. Nun, in dieser Lektion, werden wir kümmern uns um die Asset-Extraktion Teil unseres Entwurfs. Nun, Asset-Extraktion ist im Grunde, wir müssen unseren Entwicklern alle verschiedenen Auflösungen für die nächsten zwei x drei x geben Also ein Bild wird wie dupliziert 45 mal sein. Also müssen wir fünf oder vier Dateien geben, um alle verschiedenen Dichte Buckets Google Android unterstützt Augen unterstützt jetzt unterstützt. Was wir also tun werden, ist, dass es eine sehr kreative Funktion in Adobe X'd gibt. Wir werden also darauf klicken und es für Mark für Patch-Exporte erstellen. Das ist also unser Logo. Stellen Sie sicher, dass Sie es lokal groß nennen werden, so etwas. Und auch dieser Einheimische. Ich werde es Logo Small nennen, so etwas. Also werde ich das einfach markieren, damit das im Ausweisexport sein wird. Auch dieser hier. Ich werde es als Ausweis-Export markieren. Auch, wenn Sie toe wollen, verwenden Sie diese Protokollierung hier, Sie können beide aus ihnen auswählen. Kommen Sie auf G und nutzen Sie diese als Bar Bt und Logan und auch Markt als Badge Export. Also wollten Sie all diese Vermögenswerte auch dieses exportieren, aber ich weiß hier, und das ist unsere Last. Melden Sie sich an. Also werde ich als mein Vermögen auf den Markt gehen. Also machen Sie es für alle Vermögenswerte, die Sie verwendet haben. Sie können auch diese ah markieren, Symbole hier drüben. Ok. So können Sie diese Symbole verwenden und markieren, oder Sie lassen Ihr Design unsere Entwickler den Rest erledigen. Ok? So können Sie diese Symbole aus dem System erhalten. Ich verursache Materialentwürfe. Sie müssen sich also keine Gedanken darüber machen, all diese Symbole zu extrahieren. Okay, vielleicht brauchen wir diesen Knopf, diesen Patent Subedi in Brasilien. Ich gehe auf den Markt. Das ist unsere Spüle aus Holz. Okay, also werde ich es Sink nennen, also stellen Sie sicher, dass Sie sie richtig benennen. Sie können auch mit Ihren Entwicklern über Benennungskonventionen sprechen, was sie verwenden, egal ob es Bindestrich oder Unterstrich gibt. Oh, sind eine andere Methode, um ihre Feuer so etwas zu benennen. Okay, also können wir das vielleicht erwarten. Okay, also diese eine Taste, ich werde die n Sync-Wolke sein. So etwas. Okay, Also, sobald Sie alle Ihre Extrakte und alle Assets ausgewählt haben, die Sie extrahieren möchten. Nur gehen wir zu diesem Menü hier drüben Export und Batch. Es wird also alle von uns markierten Vermögenswerte exportieren, also stellen Sie sicher, dass Sie sie richtig markiert haben. Okay, also auf diesem Exportbildschirm, werden wir Android auswählen und wir haben zu 100% MDP entwickelt. Ich ändere das nie. Dies ist der Ordner, den ich ausgewählt habe. Sie können in einen beliebigen Ordner exportieren. Bilden Sie es. Versuchen Sie immer, BMG zu verwenden, da es hier die Transparenz unterstützen kann. Okay, also, nein, ich werde auf Export klicken. Es wird alle Vermögenswerte exportieren. Mal sehen, wo sind diese Behauptungen und wie sie in mehrere verschiedene Größen exportiert wurden. Okay, Jetzt bin ich in meinem Exportordner und Sie können sehen, dass es die ganze unterschiedliche Auflösung erstellt hat. Unterstützte behauptet alle Assets, die in Ihre App eingehen. Sie werden sich in diesen Ordnern befinden. Tribal sdvi triable, ldb I m d b a x DPS xdb I und dreifach X HD via Also, wenn wir diese öffnen, Sie können sehen, die Größen sind sehr groß, können Sie sehen, die Tasten sind sehr groß. Das Logo ist sehr groß, also wenn wir zu diesem gehen, können Sie sehen, alle Assets sind ein bisschen mittelgroß für extra High-Definition-Bildschirme und dann diese und dann kleinere für diese. Also, wenn wir auf diese klicken, können Sie sehen, wo der Teeny winzigen log in Großbritannien. Normalerweise denke ich, dass wir nicht auf den Fuß gehen. Benötigen Sie diese beiden LDP und STP Ich werden wir X m x x x und dreifach X benötigen. so ist, wie Sie Ihre Adobe X'd verwenden, um alle Assets in Ihrer App verwendet extrahieren und geben es Ihren Entwicklern. In der nächsten Lektion lernen wir, wie man Zeppelin gekleidet benutzt. Extrahieren Sie alle Farben, Schluchten und alles mit Ihrem Adobe X'd und geben Sie es Ihren Entwicklern. Und es wird Ihren Entwicklern helfen, schnell das Farbschema und Typografie oder Ihre aus Ihrer App zu erstellen , oder sogar die Spezifikationen, die Warze Taste auf die Größe aus der Last in DPs sehen. Was sind die Entfernungen von verschiedenen Tasten und Rechtschreibelementen in DPs? Das ist also ein sehr großartiges Werkzeug. In der nächsten Lektion werden wir Zeppelin benutzen. Also, dafür werde ich auf meinen Mac gehen. Eso nächste Bildschirmaufnahme wird von meinem I Mac eso Wir sehen uns bald in der nächsten Lektion. 38. ♥ Verwendung von Zeplin und Android Adobe XD auf MAC: Okay, jetzt in diesem Hören, werden wir Zeppelin dot io verwenden, um unsere all die Assets und all die verschiedenen Entwicklerspezifikationen und all unsere Style-Wachen und all unsere Distanzen zwischen verschiedenen Elementen mit Zeppelin dot io Wenn Sie meine ah genommen haben, wird es mehr Kurs oder Workflow sein, als Anrufe darstellen. Sie könnten bereits mit Zeppelin dot io vertraut sein. Also wissen Sie, was Sie tun müssen, ist, dass Sie sich kostenlos registrieren können und Sie müssen Zeppelin dot io für Ihr Betriebssystem herunterladen . Im Moment funktioniert es mit der Mac-App. Sie können hier sehen wir die Mac-App und es gibt auch eine Windows-App, aber bei O b x d Unterstützung gerade jetzt auf der Mac-App für Mac-Benutzer. Also, wenn Sie ein Mac-Benutzer sind, denke ich, Sie haben Glück. Sie können ganz einfach alle Ihre Assets und alles mit diesem extrahieren. Okay, Also laden Sie diese App herunter, installieren Sie sie, und Sie werden diese App starten. Und sobald Sie es starten, wird es so etwas zeigen. Okay, hier haben wir diesen Zeppelin. Ich habe meine früheren Projekte gelöscht, so dass es nur 13 Projekte geben wird. So sind Sie in einem freien mehr, so dass Sie nur ein Projekt behalten können. Also werde ich lustiges Projekt erstellen und es wird Android sein. Und ich werde auf die Zehe drücken, schaffen. Ok. Also kann ich den Namen ändern, Toe GP Tools, so etwas. Ok. Und Erweiterungen. Sie haben bereits hinzugefügt, dass es prüfen wird. Jetzt können Sie hier sehen, sie haben auch den Führer. Wenn Sie darauf oder txt klicken, werden sie Ihnen zeigen, dass Sie zu Export und Zeppelin für Skizze auf bx-Defizit gehen müssen . Verstand für die Geschäfte. Einfaches. Das sind also die vollen vier APS, die sie jetzt unterstützen, also werde ich zu meinem Adobe X'd wechseln und Sie können hier drüben sehen. Hier ist die Datei entworfen wurden. Ich habe es mit meinen Cloud-CC-Bibliotheken geteilt. Also, wie? Ich öffnete diese offen und ich ging zu kreativen Cloud-Dateien, und das ist mein Extra in der Klasse und Schreibdatei. Also habe ich hier geöffnet, und jetzt, was wir tun werden, ist, dass wir alle Kunstbohrungen auswählen, die zum Dateiexport in CEPAL gehen . Okay, das ist also das Projekt, das wir nicht durch Import ersetzen werden. Und wir haben es MMD p I entworfen, weil es die Von X ist. Also werden wir diese wählen, so ändern und klicken Sie auf hier, und es wird beginnen, verschiedene Bildschirme hochzuladen. Wenn ein Bildschirm fehlgeschlagen ist, können Sie hier klicken und erneut versuchen. Okay, also haben wir alle Bildschirme hochgeladen. Jetzt können wir uns mit ihnen mischen und verschiedene Farben und Typografie und alles wählen. Okay, also zuerst werde ich mit diesem Bildschirm Anmeldebildschirm gehen. Jetzt habe ich diesen Bildschirm geöffnet und Sie können sehen, ob ich hier drüber klicke, es zeigt mir die Größe in DP's. Okay, der Abstand zwischen diesen beiden ist 21 db und ah, das ist die Entfernung von beiden Seiten. 101101 Tag von Teppichen sein. 213 dp's. Und wenn Sie auf der rechten Seite hier sehen, haben wir dieses Panel, wo wir unsere Schriften hinzufügen können. Okay, das sind die Belastungen, bei denen wir die Farbe hinzufügen können. Also, wenn Sie diese Farbe zu unserem Styleguide hinzufügen möchten, klicken Sie auf hier und es wird hinzugefügt. OK, Ähnlich, wenn ich das Styx-Gesicht oder den Stil hinzufügen möchte, werde ich gehen und es nennen Ah meinen AP-Namen so etwas. Drücken Sie die Eingabetaste Und das ist alles. Okay, jetzt können Sie unten sehen, gibt es ein Beispielgericht, das Ihre Designer lieben werden. Wirklich Liebe. Okay, Sie können diese Video-Entwickler teilen und ah, sie gehen Fuß. Holen Sie sich den Inhalt, den Sie sehen können Hier ist ah, Inhalt Tippy Zehen. Sie können es von hier aus kopieren. Auch dieser hier ist Ah, Text hier drüben. Sie können es nochmal kopieren. Sie können alle diese Farben hinzufügen. Dies sind mehr Farben Sie können diese hinzufügen Dies ist in dem Stil, den ich wie Untertitel sehen kann 14 sp. Ok, so etwas. Okay, jetzt füge ich all meine unterschiedlichen Renditen für verschiedene Farben hinzu. Sie können sehen, hier ist meine Farbe. Ist meine Eingabe als nächstes aktiv? Etwas wie das auf. Dann haben wir dieses Passwort vergessen Passwort. Es ist ein Link. Also werde ich es als Nächstes nennen. So etwas wie das. So ist es, wie Sie gehen, um Ihre Steiger Saftpresse Zeppelin Dart Ire Werkzeug aufzubauen. Okay, eine weitere Sache, das ist unser Vermögen, jetzt können Sie sehen, dass Sie es in fünf verschiedene BND Bauern herunterladen können . Also Ihre Entwickler, sie gehen toe, Klicken Sie einfach auf diese und es wird alle Assets in diesen Ordner herunterladen. Das ist also die vier trocken erzeugten Zeppelin, so dass Sie in diesen Ordner exportieren können, und Sie können sehen, ob ich auf diesen Button klicke. Es zeigt mir die Größe davon, aber ich drücke nur meine Taste hier 90 dp von 42 db Also das ist wirklich gut. Ihre Entwickler, sie müssen die Größen in DP's Okay, nicht die Bilder. Sie also WennSie alsozu anderen Bildschirmen gehen, können Sie hier verschiedene Symbole haben. Dies sind Systemsymbole auch die Größen aus. Diese können Sie sehen, das ist 80 80 p hoch und 3 60 db vied. Also für diesen ist es eine Höhe von drei db. Also all diese können Sie sie haben, die hier sind. Ok, auch, wenn Sie hier doppelklicken, können Sie sehen, hier haben wir die Farbe, so kann ich werde diese Primärfarbe hinzufügen. Das ist auch unser Mörder für die Statusleiste. Also werde ich das hinzufügen. Okay, also nennen wir es Statusleiste. Also weiß ich, dass Verfärbung gehört, um einen Punkt zu behaupten. Auch diese Farbe können Sie am Ende wie F-Bar hinzufügen, so etwas. So können Ihre Entwickler wissen, dass dies zu Bernstein gehört. So gehen Sie Zehe Fügen Sie alle verschiedenen Farben und alle verschiedenen Textilien hinzu. Das ist dein 12 Punkt oder 12 SB um so etwas. Das ist dein weißer Text. So werden Sie auch dieses weiße Licht verwenden. Als nächstes ihr Award A medium. Es ist für unsere Air Bar. Also werde ich hier eine Flasche benutzen. So etwas wie das. Zurück. Gehen Sie zurück zum Dashboard. Also wollten Sie dies für alle Ihre App weiter tun und wählen Sie jeden Stil Textil, den Sie jede Farbe verwendet haben, die Sie verwendet haben. Und dann gehen wir zum Styleguide und Sie können hier sehen, dass wir alle Sanitäter automatisch erledigt haben . Hier haben wir alle Farben Lang, Grau, Schwarz wie vielleicht Link stehlen eine schwarze dunkelblaue graue Aktionsleiste. Also haben wir all diese Farben und auf der rechten Seite können Sie sehen, ob ich es für beide erfinde. Sie können sehen, dies ist der Android und Entwickler für ihre Textilien und ihre Farbpaletten erzielt . So werden alle Farbpaletten und Stapeltextilien automatisch generiert und sie können einfach kopieren und einfügen, die kalt hier drüben. Okay, also geht es darum, wie man Zeppelin benutzen kann. Wenn Sie weitere Erweiterungen hinzufügen möchten oder diese mit jemandem teilen möchten, den Sie hinzufügen können, laden Sie andere ein, wie Sie hier klicken, per E-Mail einladen oder einen Namen verwenden. Außerdem können Sie zu slack on hinzufügen. Das ist der Link. Sie können den Link kopieren und ah, eine weitere Sache ist, dass, wenn Sie wollen, oh, fügen Sie weitere Erweiterungen hinzu oder wenn Sie in einer anderen Sprache entwickeln, Ihre Entwickler sind sie nicht mit Androids sagte Ihnen. Dann können Sie gehen, um Erweiterungen zu erkunden, und es wird Ihnen andere Erweiterungen zeigen, die Bean von Zeppelin entwickelt haben oder sie Open Source entwickelt werden. Sie können Ihr Haar schnell Objective C Prüfung sehen, Ill schnell und Ziel C ist für, um, Mac oder IOS iPhones. CSS weniger s ist für Web. Ein CSS ist auch Stylist für Web. Der Ei-Einheimische ist ein anderes. Also, wenn Sie hinzufügen möchten, können Sie unsere Luft zu Zeppelin Sie können Ihr Produkt gp Werkzeuge wählen und Sie können zu Zeppelin hinzufügen. Und ah, so kannst du deine andere Erweiterung hier benutzen. Ok. Sobald ich fertig bin, gehe ich hier rüber. Sie können sehen, diese sind eine, die ich jeden auswählen kann. Ich kann jeden deaktivieren, wenn du willst. Wenn ich will reagieren Native Court. Ich werde das kriegen, also hier haben wir aus Reifen, hier haben wir die direkten Oops. Also hier haben wir all das reagierende native Gericht. Es ist nicht anders, so dass Sie konstante Farben und Inhalte sehen können. Textilien Das ist völlig anders. Verschiedene Styleguide in verschiedenen Kordelmustern. Sie können an der Spitze sehen, sagen, dass es wieder entzündet Wenn Sie etwas oder ein paar Einstellungen ändern möchten , können Sie Heck verwenden, die eine große an sich selbst oder was auch immer annehmen. So können Sie Ihren Entwicklern sagen, dass dies die App ist, mit der wir arbeiten werden, und es wird einfacher für Sie sein, mit Ihren Entwicklern an diesem Android-Materialdesign-Projekt zusammenzuarbeiten . Ich hoffe, Sie haben diese Lektion genossen. Wenn ich diese Zeit bekomme, werde ich das Video mit dem jemals erzielten Video machen. Dies ist eine andere Software oder App für die Zusammenarbeit mit Ihren Entwicklern an jedem Air-Projekt oder jedem Projekt. Und ah, das ist alles. Wenn du Fragen hast, hast du mich gefragt, lass uns zur nächsten Lektion gehen. 39. ♥ 9-patch Adobe XD: Jetzt werde ich über ein ganz anderes Konzept sprechen, das neun Patch Tool und neun letzten Werkzeug-Generator genannt wird . Es gibt eine Menge aus für verschiedene Werkzeuge online, wo Sie sie als Designer Zehe verwenden können. Erstellen Sie neun Patch-Artwork für Ihre Entwickler. Weißt du was? Eigentlich neun Patch bedeutet eigentlich, Zum Beispiel, wenn Sie Tasten auf Ihrem Android-Geräte oder ah gesehen haben, auf Ihrem Android-Tablets. Okay, Also, wenn Sie diese Tasten gesehen haben, können Sie sehen, dass, wenn die gleiche Belastung auf einem mobilen Gerät ist, zum Beispiel, lassen Sie mich Ihnen diese eine dieser Waschbecken zu allem zeigen, aber es kann erweitert werden, indem Sie neun Patch-Artwork. Okay, Also, zum Beispiel, wenn Sie normalerweise in den Tablet-Modus wechseln oder ein Tablet-Gerät verwenden, um auf Ihre ah zuzugreifen, diese ah, App, was es tut es dieses Bild, diese neun Patch-Bild, Was es tun wird, ist es wird diese Schaltfläche automatisch erweitern, um auf dem nächsten Bildschirm unterzubringen . Also, wenn Ihr Tablet-Bildschirm-Taste ist eine größere, wir werden nur ein Grafikelement verwenden, um mehrere Größe Tasten zu erzeugen, die gehen, um automatisch von Android Studio und Aufnahme generiert werden. Okay, also ist das Konzept sehr einfach. Was wir tun werden, ist, dass wir nur diesen Hintergrund auf der Rückseite brauchen, das ist dieses Rechteck vier. Und ich werde mit der rechten Maustaste klicken und exportieren. Exportieren nach Export, rechts ausgewählt. Und ich werde es in meinen Ordner exportieren. Ok? Nein, ich gehe auf meinen Ordner und du kannst jeden von diesen eso abholen. Ich werde diese eine x x x HDP I abholen, und ich werde es ziehen und hier rüber fallen lassen. Okay, das ist also ein sehr einfaches Werkzeug. Und jetzt können Sie hier sehen, wir haben einige außerhalb der Grenzen hier oben drauf und ah, die lassen Sie mich diese eine xx STP auswählen. wurde ich auserwählt Eigentlichwurde ich auserwählt. Okay, also wähle diesen Akt aus. Die Auflösung, die Sie für dieses Bild entworfen haben. Okay, also was es tun wird, ist, dass du zu dir gehst und dir ein paar Zeilen hier drüben siehst. Dies sind nur wenige schwarze Linien links und rechts. Und oben und unten. Zuerst werden wir verstehen, was diese Zeilen tatsächlich bedeuten. Also die obere und die linke Linie Okay, also die Stopplinie und die linke Linie. Es bedeutet, dass dieser Abschnitt dieser ganze Abschnitt von verzweifelt von oben nach unten, einschließlich dieser Schatten. Es wird wiederholt, wenn sich die Schaltfläche in horizontaler Richtung ausdehnen wird. Okay, also wird sich das wiederholen, Wiederholen. Diese Schweine werden sich hier wiederholen, hier oder hier, und diese Ecken werden weggeschoben. Okay, also in dieser Art von Akt, was sie versuchen zu tun, ist, dass sie die Last erweitern, aber die Ecken und dieser Schattenwerden aber die Ecken und dieser Schatten sie nicht, wissen Sie, ähm, werden pixelig oder verzerrt. Okay, also dieser Teil und dieser Teil wird dies sein, wird wiederholt werden. Deshalb heißt es Patch nine Batch. Es wiederholt diesen Patch immer wieder. Okay, also okay, jetzt geht es um das wiederholte Wiederholen der Abschnitte dieser Grafik. Nun, diese beiden Linien auf der rechten Seite und sind unten. Dies bedeutet den Inhalt Streicheln. Also, wo der Inhalt oder der Text auf diesem Button wird fallen? Ob es von diesem bis zu diesem ganzen Button in diesem Schattenbereich nehmen wird. Nein, es wird es nicht nehmen. Nimm den Raum. Also gehen wir auf die Inhaltsbettwäsche und wir gehen es einfach so. Und wir brauchen unseren Inhalt oder den Button Text hier drüben im Spartaner. So, jetzt können Sie sehen, diese Zeilen wurden Nein, Diese Zeilen sind kleiner und sie wurden verkürzt, weil wir das Hinzufügen von Inhalten hier kämpfen behoben haben . Okay, jetzt können Sie sehen, dies sind verschiedene Auflösungen für MDP I extra ph d p i xx sdp I und triple X HDP I Okay, so dass es geht toe generieren alle Grafiken für alle verschiedenen Auflösungen. Und wir werden nur einer Datei diesen Hintergrund mit Schatten geben, und Ihre Entwickler werden sich die Hände küssen, dass wir diese einfache Grafik und ah, äh, äh, in jedes System, jede Tablette, irgendetwas. OK, also wird es sich von selbst erweitern. Das ist also das Hauptkonzept dahinter. Ah, ein Neun-Pad-Generator. Optische Knochen ist ich denke,, die sichtbare Wieder Ufer , vielleicht so etwas, aber ich weiß nicht viel darüber. Und du brauchst dir keine Sorgen darüber zu machen. Stellen Sie einfach sicher, dass Ihre Stretch-Regionen und Content-Wetten perfekt definiert sind. Okay, sobald Sie damit fertig sind, werden Sie auf diese Stadt klicken. Lord Zip und es geht Zeh. Laden Sie die Datei herunter. Lassen Sie mich diese Datei extrahieren und ah, öffnen Sie sie. Und das sind die 45 Resolution, die STP MDP I unterstützen wird alle unterschiedliche Auflösung , dass, wenn Sie entwickelt werden, können wir es öffnen. Sie können diese Zeilen auf dieser Grafik sehen, okay? Und Ihre Quartiere, sie können diese verwenden und sie können jede Art oder jede Größe aus dieser Begnadigung erzeugen, ohne ihren Schatten oder seine Ecken zu verzerren. Okay, das ist also das Geheimnis dahinter. So, jetzt wissen Sie, wie Sie Ihre ah Tasten extrahieren können. Sind diese Art von Grafiken auf diesen neun Patch-Grafiken von hier drüben? Und noch eine Sache ist, es ist Namenskonvention. Sie können am Ende aus dem Namen aus dieser Datei sehen, gibt es Punkt Punkt neun Punkt PNG angehängt . Also, jede Akte, die du auf den Namen gehst, gehst du auf den Fuß. Nennen Sie es und die und Sie werden Tür an neun anhängen. Also sagt es Ihrem System im Grunde, dass es sich um neun Patch-Datei handelt. Ich hoffe, Sie haben diese Lektion genossen. Sie können und machen diese Art von neun Patchwork mit all den Lasten. Ich denke, Sie müssen nur eine für all diese Lasten produzieren und vielleicht eine für diese eine für diesen dunkleren blauen Knopf und Sie sind fertig, Sie brauchen nicht Zehe erstellen wie Hunderte von Dateien. Erstellen Sie einfach diese neun Patch-Grafik-Assets, und dann werden sie alle verschiedenen Tasten auf Ihrem Gerät bedienen. Ich hoffe, Sie haben diese Lektion genossen. Und wenn Sie Fragen zu neun Paschto Regel haben oder was auch immer Sie mich in Bezug auf Android fragen können , dass Material Design, Ich hoffe, Sie haben diese Lektion genossen. Lasst uns weitermachen und etwas mehr gelernt haben. 40. Was du Neues Material Design 2.0: Okay, Also diejenigen, die ein paar, die wandern, dass Warum ich nichts über Material gesagt, entworfen , um Punkt oder die neueste Version des Materialdesigns. Wenn man sich die Designrichtlinien für Materialien anschaut, haben sie sie völlig überarbeitet, und sie haben alles völlig verändert. Aber die meisten von den 90% der Spezifikationen oder Design-Spezifikationen, sie sind die gleichen. Also werde ich Ihnen in diesen zwei oder drei Lektionen zeigen, dass das, was neu im Materialdesign ist und wie Sie von diesen neuen Materialdesign-Richtlinien profitieren oder lesen können. Okay, also fangen wir mit dem an, was neu ist. Also haben sie einige neue Dinge hinzugefügt. Das sind drei neue Dinge Textfelder. Sie haben einen anderen Mäzen. Jetzt ist das Textfeldmuster anders. Es gibt zwei Personen, denen sie folgen, basierend auf ihrer evidenzbasierten Forschung ist, dann haben wir diese Erweiterung für A B ich werde Ihnen alles zeigen, was Sie sind. Okay, dann haben wir diese Schichtdichte. Statt Desktop-Spielstunden und mobile oder High-Density-Schichten zu verwenden ,haben sie es bei niedriger Dichte und hoher Dichte verändert. , Wenn Sie also auf einem größeren Bildschirm arbeiten, auf dem Benutzer eine Maus klicken können. Dann nennen sie es High Density oder ah, ein Bildschirm, der sehr, sehr hohe Dichte ist , wie 600 BB I oder sehr dichten Bildschirm, wo Sie kleinere DP-Größen Zehe verwenden können. Wissen Sie, der Benutzer kann leicht auf diese dp Seiten tippen, weil es sehr dicht ist. Okay, also lasst uns anfangen. Ich werde Ihnen ein paar Dinge zeigen. Zuerst werde ich Ihnen diese Textfelder als erweiterte F-Babys als diese Dichte-Layout-Sache zeigen . Okay, hier haben wir den neuen Leo. Dies ist im Grunde ein alter Patron, der sehr beliebt mit dem Dieser Titel bewegt sich nach oben und Sie können sehen, dass dies das neue Textfeld ist, was besser ist, denke ich von der vorherigen in Bezug auf Benutzererfahrung und nach dem Muster dies tatsächlich ein Textfeld ist. Also werde ich Ihnen zeigen, wo sie haben. Dies sind im Grunde zwei Arten von Lebensmitteln. Einer ist dieser hier. Dies ist unser Kundenfeld mit dem Label. Das ist ah, Feld mit dem Umriss. Ist Onley Schlaganfall unten? Okay, das ist also normal und das sind Aktivitäten. Also, wenn jemand darauf klickt, geht es zu Fuß. Bewegen Sie die Beschriftung nach oben, und die Eingabeeingabe wird wie folgt hervorgehoben. Also werde ich Ihnen die eigentliche Interaktion zeigen. Okay, damit Sie sehen können, dass es Interaktion gibt. Also, wenn Sie eine wollen, wenn Sie diese in Ihrem Design verwenden möchten, können Sie diese in Ihrem Design verwenden und sie werden so interagieren. Also ich liebe das wirklich, diesen neuen Mäzen und ah, das ist, du weißt, Ah, und wenn du die Spezifikationen wissen willst, die du unten kannst und es gibt einige weitere Änderungen, die du hier sehen kannst, kannst du dich es entsprechend Ihrer App, können Sie hier sehen. Eigentlich habe ich gesagt, dass das, was ist diese primäre auf der Oberfläche und Antwort für Sculler bedeuten, So können Sie sehen, dass sie nur eine Vita-Farbe in verschiedenen Variationen verwenden. Und um diese Textfelder zu zeigen, können Sie hier sehen, dass sie diese wimmeln. Also eigentlich, in dieser eine neue Version off Material Design. Sie können Ihre App in jeder gewünschten Farbe zusammenführen. Das ist also wirklich, denke ich, wirklich gut für Designer, und sie beschränken sie nicht und Sie können sehen, hier hat ein anderes Beispiel dort, wo sie benutzerdefinierte Schriften mit benutzerdefinierter Teaming verwenden. Und ah, wenn ich unten gehe, können Sie sehen Hier sind die Textfeld-Spezifikationen 56 verstecken bis 80. Dies sind fast die gleichen 16 eine DP-Linie und dann haben wir 12 dp 12 dp auf beiden Seiten. Dies ist ihre Standardkämpfe für diese Art von Dingen, bei denen es einen Text in einem Container gibt. Also, wenn Sie wollen oh, sehen Sie mehr können Sie gehen und klicken Sie auf die Spezifikationen und Sie können Bettwäsche und Abmessungen und Text Basislinie verstecken . Textbaseline ist also, dass der Text in dieser Zeile sitzen wird und ihre Baseline auf vier db-Text-Baselines basiert . Also stellen Sie sicher, wenn Sie nichts über Baseline wissen, sollten Sie meinen Kurs typografisch für Sie sind Designer sehen. Jetzt gehe ich auf die Zehe, geh zurück. Okay, das ist also die neue , Sache,die sich zusammensetzt und diese beiden neuen Gönner für Textfelder. Jetzt schauen wir mal, was sie diese Fab haben. Ich habe dorthin ein Material entwickelt, um zu zeigen oder okay, Also hier ist die Fab, die Karte schwebende Aktion ist, aber und es wird Zehe haben verschiedene Gönner. Lassen Sie mich es Ihnen zeigen. OK, hier ist also in eine Richtung, die es ausführen kann. Wenn Sie auf diesen fairen, aber schwebenden Action-Button klicken, wird es Ihnen mehr Standard-Aktionen zeigen, die Sie mit diesem Bildschirm tun können. Sie können hier drüben sehen, das ist ihre neue. Sie können jede Mission dahinter sehen. Es hat etwas Licht, Angst, Farbe und Emission. Und dieses Symbol bewegt sich und bewegt sich zurück in einen Übergang. Das sind also wenige Dinge. Auch, sie zeigen die Interaktionen auf, dass Es ist Kontext Bär. Wenn Sie also versuchen, zwischen zwei Elementen oben zu wechseln, werden sie dies ändern. Ah, ich kann hier drüben. Okay, damit du siehst, dass ich komme, hat sich der Zeh verändert. Das sind also wenige Verhaltensweisen. Sie haben noch ein paar Dinge hinzugefügt und sie haben gezeigt, dass Sie hier nicht mehr als fünf verwenden werden. Wenn Sie also so etwas verwenden, ist dies kein gutes Muster zu verwenden. Ok? auch sehen, Sie könnenauch sehen,dass Sie das tun können. kannst du tun. Und so ist dies eine sehr neue Interaktion. Ich denke, sie fügen ein paar weitere Dinge wie Sie sehen können, was hier. Dies ist völlig anders Komponiert, neu und an alle gesendet. auch sehen, Sie könnenauch sehen,dass Sie nicht zu viele Elemente hinzufügen können, sind sehr wenige Elemente. Also, wenn Sie eine wollen, wird es sportlich wie behandeln vier oder fünf, vielleicht maximale Gegenstände. Das ist also ihre neue fab Britannien. Es wird es auch in dieser erweiterten fab zeigen. Dies ist erweiterte fab und es wird in diesem Label und Plus-Symbol angezeigt. So wird es so etwas erleben. Also wird es oben auf alles in Cardiff schweben. Sie durchsuchen das E-Commerce-Projekt R E Commerce App. Es wird so etwas zeigen. Sie können es auch hier erweitern. Wenn Sie sich an die Ränder auf beiden Seiten erinnern, sind es 16 DP's also nicht. Also bedenken Sie das. Hier haben wir, dass Sie nicht zwei Zeilen verwenden können. Du brauchst Zeh, mach so etwas. Verwenden Sie nicht viel von großen Text auf dieser Art von Großbritanniens oder fabs Floating Action-Taste. Okay, also hier geht es um schwebende Action-Taste. Sie haben noch ein paar Anweisungen und eine Emissionen hinzugefügt. Ich liebe sie wirklich. Okay, jetzt reden wir über die Dichte, von der sie gesprochen haben. Was ist ein dichter Tuk? So können Sie sehen, dass die Standarddichte auf diese Weise große Start-Tap-Zielziele und Ränder unterstützt werden . So ist es einfacher für den Benutzer zu tippen. OK, aber auf der hohen Dichte, werden wir kleinere Dinge verwenden, wenn es seine Erfahrung verbessert. Es bedeutet also, dass es kleinere Zapfziele gibt. Diese Bildschirme mit hoher Dichte. Okay, also was? Ich habe Industrie. Also hier ist ein sehr einfaches Beispiel. Sie können sehen, dass dies auf der Liste von Elementen ist und Sie müssen sie überprüfen, so dass ihr Mindeststandard 48 DPs für jedes Touch-Ziel oder alles, mit dem Sie interagieren müssen, ist. Nein, aber auf Ihrem Bildschirm mit hoher Dichte können Sie die Größe von 30 Zehe reduzieren. Es bedeutet also, dass Sie sehen können, dass dies mein Mauszeiger ist, und ich kann leicht darauf tippen oder mit meinem Mund darauf klicken. Aber für einen Finger sollte es so etwas sein. In ähnlicher Weise ist dies das. Unser Text bedeutet 44 56. Das ist ihr Standard und Sie können hier drüben sehen. Hier sind Aktionstasten. Dies sind an der Unterseite, wie getan oder vielleicht Datei oder so etwas anzeigen Sie können sehen oder hören Sie die Berührung. Ziel-Tap-Ziel ist im Grunde 52. Dies ist der Bereich für diese beiden definiert 36 hier haben wir 24. So ist, wie Sie verwenden und anwenden können, dass wenige Dinge, die Sie brauchen Zehe Ah, breit ist, wenn etwas fokussierte Aufgabe wie einige f oder etwas. Der Teil der App fragt Sie nach einer Eingabe. Sie werden keine hohe Dichte verwenden. Anwenden hat die hohe Dichte. Sie werden immer niedrige Dichte verwenden. Okay, das ist also eine Sache. Es gibt also ein weiteres Beispiel hier, das Sie sehen können, ist ein Bildschirm mit hoher Dichte und sie verwenden sehr breite Ränder. Okay, Also kleinere Rohleder und die Ränder sind sehr Laster, so dass es mehr Platz haben kann, weil wir größere Bildschirmgröße haben Nein, auf einer kleineren Bildschirmgröße, vielleicht ein Tablet oder kleinere Tablets. Sie können sehen, dass sie kleinere schmale Ränder verwenden und die Höhe von jedem wahren ist ein bisschen größer. Also, das ist eigentlich, dass sie für den Raum und, ah, die Auflösung aufnehmen ah, . Jetzt diese Dies ist über Touch-Ziel-Spezifikationen. Das sind die gleichen. 36 ist die Höhe des Belastungsminimums, aber es ist ein Tap Ziel wird 48. In ähnlicher Weise ist ein Symbol 24, aber ein Schritt agonist 48 dp's. In ähnlicher Weise für diese größeren Symbole Systemsymbole, die 48 ist die Hap-Größe. Dies ist die Mindestgröße. Okay, also nochmal, sind Männer. Es gibt viele Beispiele für all diese Dichtemessungen. Höhe der Linie. Sie können auch die Zeilenhöhe für Typografie Dichten ändern, wie Sie hier sehen können, haben wir ah, größten Bildschirm oder High Density Bildschirm, wo wir unsere Linie hoch verkürzen können, so dass Sie sehen oder hören können . Das sitzt auf der Zeilenhöhe von 20 Basislinie 20 Seien Sie ein Zeichen und hier können Sie sehen, dass wir 30 Zehe haben, also sind diese beiden Linien zwei voneinander getrennt. Also hier haben wir niedrige Dichte Bildschirm und hier haben wir hohe Dichte fragen Sie können sehen, dass sie basiert Zeichen ist das gleiche für die Pickard Linie. Das ist also alles über diese drei neuen Dinge, die sie haben, sie opfern. Ich hoffe, Sie haben diese Lektion genossen. Ich werde in den nächsten zwei Lektionen noch ein paar weitere Punkte erklären, also fahren wir mit der nächsten Lektion fort. 41. Neue Optionen zum Design: ein paar spannende Dinge, die ich hier über Material zu zeigen oder neue Version diskutieren möchte , die ist, dass sie unterstützen einige weitere Design-Elemente wie gekrümmte Ecken und Kanten und abgerundete Ecken. So können Sie sehen, hier haben wir dieses Beispiel auf ihrer Website Glanz App. Wenn Sie Google Material Design Conference nicht gesehen haben, denke ich, das ist nur Sie wissen müssen. Okay, Sie können hier drüben sehen, da ist eine kantige Oberfläche hier drüben und dieser Behälter oder hier hat er eine Kante auf der linken Seite, weil ihr Schrein ist, der ich weg ist, der Glanz ist dieser Diamant? Also benutzen sie dieses Mädchen, um eine Diamantform zu zeigen. Okay, so weiter auch auf dort, Sie können sehen, was es in den Warenkorb Icon auf. Hier drüben gibt es einen Rand. Okay, das ist also ganz anders. Sie unterstützen all diese neuen Dinge. Wenn Sie sich dieses ansehen, können Sie es hier in der Dies ist die gleiche App sehen und es ist auf einer Tablet-Größe. Und hier zeigen sie, wie Sie Ihr gesamtes Material entworfenes Teaming auf verschiedenen Rasterlinien und verschiedenen Desktop-Mobil- und Tablet-Geräten in ein neues ganzes Levelverwandeln entworfenes Teaming auf verschiedenen Rasterlinien und verschiedenen Desktop-Mobil- und Tablet-Geräten in ein neues ganzes Level können. Und ah, Sie können hier sehen, dass sie die Spartan in den Warenkorb Button haben. Sie können sehen, dass es wirklich schön aussieht. Die Schatten sind auch sehr hell und sie sehen nicht aus wie harte Schatten aus Materialdesign 1.0 und auch die Verwendung dieses benutzerdefinierten Texttyp von vier Stilen. Dies macht das Suchen dieser Website wirklich cool. Okay, so können Sie sehen, dass der Text, den sie verwenden, ist Rubik Licht diese Dies ist ihre typografische Skala . 34 24 2014 16 14 12 14 96 ist ihre größte Schlagzeile. Also das ist wirklich gute Brie Designer und unsere Entwickler, beide haben einige Möglichkeiten, um, wissen Sie, er nutzte ihre Kreativität auf mehr Weise, als ah, Street Edge oder hier. Dann gibt es noch ein weiteres Beispiel Dieses hier ist Bildschirm Und wenn man es anschaut, hat das auch einige abgerundete Ecken, die man sehen oder hören kann. Oh, hier. Also, das ist wirklich cool. Ich mag es. Wir haben mehr Möglichkeiten, mit denen wir arbeiten können. Wir haben mehr Bereiche sind mehr, die Sie hier sehen können. Dies ist ihre Registerkarte Tab AB sind Sie sehen können, es ist völlig anders als das, was wir hier entworfen . Also sind wir sehr frei, so etwaszu so etwas entwerfen. So sieht es wirklich cool auf es ist nicht ganz Material Design aussehen. Es sieht aus, dass sie einige gegeben haben, einige können Sie sagen, Raum, mit zu arbeiten. So haben sie Designern noch mehr Möglichkeiten gegeben, ihre Kreativität zu erforschen. Also liebe ich das wirklich. Diese neuen Optionen können Sie hier unten in unseren Autos sehen. Diese haben einige abgerundete Ecken. Sie sehen wirklich nett aus. Wirklich cool. Denken Sie also daran, wenn Sie etwas entwerfen, sind Sie jetzt offen, einige Dinge wie diese zu entwerfen. Wenn Sie Designer sind Ihre Entwickler Entschuldigung. Wenn Sie Entwickler sind, sagen Sie, dass wir das nicht entwerfen können. Dies ist in der Materialkonstruktion nicht möglich, dass Sie ihnen diese Beispiele zu Materialkonstruktionsrichtlinien zeigen können . Okay, das ist also alles über diese neue etwas Offenheit in Gestaltungsmöglichkeiten für Designer und sogar Entwickler. Ich hoffe, Sie haben diese Lektion genossen. Fahren wir mit der nächsten Lektion fort. 42. Abstandsraster in Material 2.0: wie ich bereits in meiner Lektion erwähnt habe, dass ihre Abstandsmethode und ihre Grundlinienanleitung und wie Sie Schlüssellinienmatratzen in Ihrem ausgereiften Design verwenden werden. Dies ist im Grunde die Hauptbasis, um Materialdesign zu verstehen und wie Sie es verwenden können. Jetzt können Sie hier sehen, dass alles auf ADP ausgerichtet ist. Ich werde es schnell durchmachen, weil ich es bereits besprochen habe. Vier D B Grad Für Text können Sie die kleinen Kästchen sehen. Vier db Diese größeren 12 Boxen ist ADP. Also, Eddie, sei oben Rand Polsterung an der Unterseite 12 tief essen. Dies ist für die partum Navigation. Hier können Sie Ihren Teil der Navigationslinie vor DP cred sehen. Und wenn Sie sich hier auf der Abbott und Floating Action Taste sehen, die Zehe ADP Grad ausgerichtet . Also für DP-basierte Sprache für Text können Sie sehen oder hören, hier haben wir Kevin und guten Morgen. Sie können sehen, dass sie sich damit ausrichten. Diese kleinen Linien oder Haare rote Linien, sie sind im Grunde jede Linie ist vier dp auseinander oder vier Dips voneinander entfernt. Also hier haben wir wieder vier db, auch wenn Sie vier d B oder ein D. P verwenden . Sie sind Vielfaches voneinander, so dass alles ausgerichtet wird. Wenn Sie mit einem tiefen gesäumt, es wird auch mit vier DP ausrichten So hier können Sie sehen, auf. Dann haben wir diese Liste und 48 dp für einzelne Artikel und Sie können an der Spitze sehen Sie haben drei Zeilen gelassen , so bedeutet es 12 dp off top padding oder rand. Also bedenken Sie das. Sie verwenden 12 dp eine Menge Off-Zeiten als ihre Marge, die Sie hier sehen können. Das ist also sinnvoll. Sie werden alle Elemente miteinander verbinden. Dann ist das das Gleiche. Der Titel für all diese geht toe haben 72 dp off Rand von der linken Seite. Das ist also alles gleich. Sie können voran gehen und Sie können sich all diese ansehen. Okay, jetzt kannst du sehen, dass sie das haben. Ah, es Blockgröße 64 dafür ist für andere Bildschirme, aber endet und all diese. Okay, Sie können also diese Abstandsmethode überprüfen. Ich habe Ihnen die Grundlage der Abstandsmethode gezeigt. Das ist das Gleiche. Aber ich dachte, ich sollte es noch einmal erklären, weil sie ihre Materialdesign-Anleitung geändert haben . Und es ist ein Blick, vielleicht wirst du verwirrt, dass das, was hier passiert? Jetzt können Sie hier sehen, haben wir dieses Touch-Ziel. Ich habe bereits angewidert, Also hoffe ich, Sie haben diese Lektion genossen. Wenn Sie Fragen haben, die Sie mir stellen müssen, fahren wir mit der nächsten Lektion fort. 43. Buttons und Staaten: Ok. In dieser Lektionwerde ich Ihnen unsere überarbeiteten Sie mehr über Großbritanniens erklären. In dieser Lektion Es gibt ein paar verschiedene Arten von, aber und das ist einfacher Text, aber Und das ist skizziert, aber und das ist Container, aber Und das ist eine weitere Schaltfläche, die Umschaltfläche ist. Das sind also vier verschiedene Arten von Waffen. Okay, also gibt es noch eine Sache, die mit dieser Schaltfläche zusammenhängt. Diese Schaltfläche zeigt die mawr Hervorhebung. Es ist stärker. Es hat mehr schwere Behälter. Das hat weniger Betonung. Also sind deine Augen mehr von diesem angezogen als diesem. Also noch eine Sache. Der gesamte Text ist groß. Das hier ist noch eine. Ich denke, ich Sie haben es nicht in meinem Design verwendet, aber ich denke, Sie sollten es so verwenden, aber nicht alle Kappen. Und so ist es. Okay, Also dieser Schwerpunkt ist im Grunde von visuellen Design-Konzept, dass die Dinge, die mehr Aufmerksamkeit brauchen , müssen sie einige lebendige visuelle haben. Warte, also benutzen sie das sehr richtig. Okay, Sie können also sehen, dass das ihre Designprinzipien sind. Wenn Sie nicht wissen, was sie identifizierbar sind, finden Sie klar. Stellen Sie also sicher, dass Ihre Tasten klar sind, sie sind leicht auffindbar Benutzer können sie leicht sehen. Dies ist ein vier Tänze und Signifiers, wenn Sie meine Lektion aus Benutzererfahrung für Anfänger identifizierbar entworfen erinnern . Und sie können leicht getrennt von anderen Elementen sein, dass dies eine Belastung ist. Okay, sind also ein paar Dinge, die ich dir zeigen wollte, bevor ich die Zehe bewege, weißt du, ein paar weitere Lektionen, und dann haben wir diese Hierarchie wieder in der Platzierung. Sie haben Medien mit hohem Stellenwert gezeigt. Memphis ist ein geringer Schwerpunkt. Also, wenn Sie eine sehr scharfe Farbe verwenden, bedeutet es hohe Betonung. Okay, hier ist, können Sie sehen, das sind ein paar Elemente hier drüben, und ah, dieser Knopf wird am meisten die mehr Betonung haben, weil er hervorgehoben und auch erhöht und größer in der Größe ist . Das ist also, was sie hier zeigen, enthalten. Aber und das ist auch einen hohen Stellenwert. Dies hat die höchste Betonung als diese und dann diese. Okay, also diese Betonung Sache, ich denke, ich habe vergessen, dir von diesem zu erzählen, und ich denke, sie haben es in ihrem Material gezeigt, das darauf ausgelegt ist, zu zeigen oder zu führen, bereit, ernsthaft, und jetzt Sie können hier drüben sehen. So werden diese Schaltflächen dort verwendet, die zeigen, dass Sie sie so verwenden sollten oder nicht. Okay, also benutze nicht zu viel großen Text für diese Art von Eltern wie Ezard Tisch in diesem Café. Und auch, ich denke, das ist nicht kapitalisiert. So geben sie Ihnen die Vorsicht, dass, obwohl es nicht ein sehr großer anderer ist, aber Sie sollten es nicht tun. Ich hoffe, Sie haben diese Lektionen genossen. Dies sind ein paar verschiedene Zustände, die Brust fokussiert wurden. Das geht auf die Zehe. Machen Sie etwas Animation. Dies ist deaktiviert. Ich denke, die Verwendung deaktiviert, indem die Deckkraft zu 50% verwendet wird. Okay, also, äh, das ist alles. Ich denke, Sie müssen diese Zustände kennen, und Sie müssen wissen, was die Betonung dieser Tasten ist und wie Sie sie verwenden. Ich hoffe, Sie haben diese Lektion genossen. Wenn Sie Fragen haben, die Sie mir stellen müssen, fahren wir mit der nächsten Lektion fort. 44. Liste von Elementen in Material 2.0: Lassen Sie uns nun über Material sprechen, das darauf ausgelegt ist, oder Listen zu zeigen. Sie können hier sehen, ist das Kran-Material-Team. Und sie haben diese Listen, diese Bilder und diese Orte und sie sind verfügbare Eigenschaften. Okay, also, ähnlich, sie haben Treibstoffspezifikationen. Hier drüben gibt es drei Arten von Online-Listen, und dann haben wir zwei Zeilen hier drüben. Sie können Doppellinie sehen, und dann haben wir drei Zeilen. Okay, Also, wenn Sie die Spezifikationen von jedem von ihnen sehen wollen, können Sie hier klicken und das Streicheln auf beiden Seiten ist 16 für diese. Okay, 16 für diesen Listeneintrag. Lass uns das Streicheln verstecken. Jetzt haben wir Dimension deaktiviert. 88 für zwei Zeilen. Es sind 72 DPs und erzwingt eine Linie. Ich glaube, es sind 56. Lassen Sie mich sehen. Ok. Ja. Die Leitung erzwingen. Es ist 56. Okay, Also, wenn Sie eine der Spezifikationen sehen wollen, können Sie hier klicken und lassen Sie mich Ihnen das Beispiel von zwei Zeilen zeigen. Und hier haben wir die 64. Dies ist eine weitere 1 64 mit zwei Zeilen. Ich denke, sie benutzen das. Und Gmail, schätze ich. Lesen seiner 2016 auf beiden Seiten. 28. Ich denke, das ist eine Frage von extra Haaren. Zum Beispiel vor zwei Minuten oder so etwas. Also verwenden sie diesen Block. Wir sind hier. Dann haben wir 28 von den Top-Baselines von 28 DPs. Es wird auf der 28-DP-Linie hier drüben sitzen. Ok. Und für diesen Text wird es 20 auf DP Blow dieses sein. Also im Grunde versucht die Zeilenhöhe hier zwischen diesen beiden Steuern hier drüben zu dp. Okay, also geht es darum. Sie können die Bildgröße hier sehen. Dies ist 40 DPS, die ich in meinem Kurs verwendet habe. Und wenn Sie ein Symbol hier einfügen möchten, können Sie sehen, ob ich es verstecke. Es gibt ein Symbol, kleines Bluetooth-Symbol. Es wird von 24 von 24 dp verwendet und 32 dp ist der Abstand zwischen dem kleinen Symbol und den Linien. Und wenn du größer bist, bin ich weg. Die Entfernung beträgt 16. Also, zum Beispiel, vielleicht ein eheliches Bild für die Person, die Sie per E-Mail geschickt haben. So können Sie diese verwenden, um ein Quadrat oder Kreis zu bilden, oder Sie können Bild von 100 x 50 60 Stück hier verwenden. Ok, das sind also die neuen Spezifikationen, die sie suchen, erstellen. Und ich liebe es, wie sie dieses Basiskonzept darin implementiert haben. Hier haben wir die ADP und ADP oberen unteren Rand oder Streicheln Sie können für die Listenelemente sehen. Okay, also denke ich, das war's. Okay, das ist also für den Zusammenbruch. Ein erweitertes Listenelement. Also, wenn wir so etwas haben, haben sie 48 dp. Die kleinste 24 ist das Symbol verbrauchte Element, und das ist das gleiche für alles. 72 dp Wo der Text zu einer Zeile oder hier auf der linken Seite geht. Also 72 dp von links ist unsere erste eine vertikale Linie, wo der Text auf die Zehe Verbundenheit geht. Okay, also dreht sich alles um Listen. Ich hoffe, Sie haben, wie, diese Material Design Guide 2.0, für die Listen. Die meisten Spezifikationen. 90% der gleichen. Ich denke, vielleicht mehr als 90% ich, wenn ich denke, ich denke, es ist 95%. Okay, wenn Sie Fragen haben, die Sie mir stellen müssen, gehen wir zur nächsten Lektion 45. Unten und die TabBar: Okay, Also habe ich durch dieses Materialdesign zwei Punkt oder Richtlinie, und ich habe etwas Neues gesehen, das ist ein Balkenboden. Das ist also ein neuer Trend. Grundsätzlich basiert es auf User Experience Design, und es ist so, dass alles, was die Aktion erleichtert sollte näher an der Spitze sein, wo Sie gehen, Zehe drücken oder tippen Sie auf den Bildschirm. Also meistens Benutzer, werden sie den Begriff verwenden. Und diese Art von Navigation wird es zu erleichtern kommen Nutzung leichter. Benutzer können auf dieser Suchleiste auch dieses Hamburger-Symbol und auch diese schwebende Aktion tippen, aber in einer fab und auch so viele. Aber okay, das ist also ein weiterer neuer Gönner. Was datiert ist, dass sie tatsächlich das gleiche an der Unterseite implementiert haben. Okay, also noch eine Sache ist, dass du so etwas auch hier machen kannst. Es ist flexibel. Okay, hier haben sie einige von den Richtlinien, die es nicht nur für eine Aktion verwenden oder hier versuchen , Lee zu speichern drei Aktionen. Also unten wird jeder drei Aktionen zur Verfügung stellen, wie die Menüleiste und diese solche Leiste. So mehr kann ich alles in Ordnung. Diese beiden von ihnen. Okay, das ist also eine neue Sache, der ich denke, dass das hier reingekommen ist. Und Sie können hier drüben sehen. Dies ist dies ist dies ein paar weitere Gönner waren Haare zentriert Fab Britain. Dann haben sie dies und fab auf der einen Seite schwebende Aktionstaste ist auf der rechten Seite und sind die anderen Aktionen am unteren Rand wie folgt. Das ist also ein neuer Schirmherr. Wenn Sie mehr darüber erfahren möchten, was Sie darüber erfahren können und was Sie sehen können, ist dies ein anderes Muster. Ich liebe diese Insektenfabrik wirklich. Es gibt also viele neue Dinge, die für Designer in diesem Material kommen, das darauf hinweist, und Sie können sehen, wie die Interaktion ist und wie sie aussehen. Also lassen Sie uns so sehen, so mag es wirklich. Okay, also zurück. Und dann wieder zeigt die Einführung, so dass Sie jetzt sehen können, dieser Posteingang verwendet nur wenige Aktionen. Wenn jemand auf die E-Mail, diese faire Schaltfläche oder diese schwebende Aktionstaste drückt , ändert es die Antwort-Taste und einige weitere Aktionen. Ich liebe diese neue wirklich. Interaktion und Verhalten. Ich liebe das wirklich. Okay, also können Sie diese Art von Dingen in Ihrem neuen APS mit Material verwenden, das entworfen wurde, um zu zeigen. Und gehen wir zurück zu unserem alten in Bars, die oben waren. So können Sie sehen, dass Sie bereits wissen, wie sie dort sein werden, wird konsequent sein. Diese Luft entworfenen Prinzipien, die Sie brauchen Zehe folgen. Das sind reguläre Typen, Deb. Und dann haben wir diese vertraglichen zusätzlichen Aktionsbalken, die sie haben. Beispiel, ZumBeispiel, wenn Sie ein Foto öffnen oder so etwas reflektiert etwas, das Sie Kreuz und verschiedene Aktionen später zeigen wird . Zehe den Gegenstand da drüben. Ok. Ok. Also mal sehen, was wir auch hier haben. Das sind nur wenige Navigationsmöglichkeiten. Icahns Titel über Überlaufmenü auf der rechten Seite. Diese 5. 1 Ich denke, wir haben dies bereits besprochen. Dann wieder, wenn Sie zu den Spezifikationen gehen wollen, gehen Sie nicht viel. Eine Menge, am Ende viel. Und du wirst sehen, all diese Spezifikationen. Okay, wenn du darauf klickst, kannst du diese anderen Spezifikationen sehen. Bilder lernen immer noch, also gehen wir zurück. Okay, also hier haben wir. Okay, also, wenn wir darauf klicken. Sie können sehen, dies sind wieder die Spezifikationen 32 von diesem Symbol 24 Augen Symbol Höhe eso 24 DPS ist das Symbol Symbol Symbol 24 24 24 So können Sie die Lücken zwischen ihnen zu sehen ist 24 dp und ah, wir haben 16 dp Rand auf beiden Seiten für diese Symbole 16 dp oben und unten Bettwäsche und 20 dp ist die Zeile von unten, wo sie sitzen werden und wo Ihr Text wird Baseline sitzen Also, wenn ich diese verstecken, können Sie sehen, dies ist Sommer Baseline und auch Sie können diesen Text verwenden und was ist die Größe der Stapel? Sie können von hier aus gehen und sehen, was die Spezifikationen sind. 20 dp Weiß. Dies ist auf Textfarbe. Wenn Sie sich genau erinnern, dann ist dies Tobar erweitert und ich bin mir nicht sicher, warum sie die Tabs nicht angezeigt haben. Vielleicht sind die Registerkarten auf dem Weg Abschnitt in einem anderen Abschnitt. Also ich hoffe, Sie haben diese Luftstange oben genossen Eine neue Boden-Interaktion und Verhalten. Wenn Sie Fragen haben, die Sie mir stellen müssen, fahren wir mit der nächsten Lektion fort 46. Material 2.0: Ok? Nein. Ich werde ein wenig über Tupfer mit der neuen Materialdesign-Richtlinie zwei Punkt überarbeiten . Okay, hier haben wir die Tabs. Und wenn Sie auf der linken Seite klicken, können Sie sehen, dass es Verwendung, nicht ich. Verhaltensplatzierung, feste abs, glaubwürdige Registerkarten, ihre Zustände wimmeln Spezifikationen und Implementierung für Entwickler. Okay, also musst du zuerst wissen, was das Verhalten ist? Wenn Sie also darauf klicken, können Sie sehen, dass sie sich nach links und rechts bewegen. So wird Bewegung auch in diesen Verhaltensweisen gesehen. Und ich liebe dieses Ganze wirklich. haben sie diese bewegt und Sie können hier sehen, können Sie sie auch mit Swipe so bewegen . Also denke ich, dass ich in Ah vermisst habe, meine anderen Lektionen. So werden sie sich verhalten. Also ich liebe es wirklich, wie sie alles wie Verhalten von diesen all diesen Interaktionselementen arrangiert haben und nicht mir. Gehen wir zurück zu den Spezifikationen. Und ich denke, es wird einige Zeit für Herrn dauern, ich denke, wir haben das bereits diskutiert, als wir es entworfen haben. Das ist also sehr einfach. 48 40 Jahr, 72 24 Icon Größe 20. Die meisten von ihren Größen sind die gleichen 12 12 unten und oben. Also, wenn Sie sich die Spezifikationen ansehen wollen, können Sie hier rüber gehen. Die Spezifikationen sind fast die gleichen wie die vorherigen. Stattdessen denke ich, es gibt nur ein Update. Ich bin mir nicht sicher, aber ich denke, dass diese 52 nicht 52 davor war. Waas vielleicht 56? Ich schätze. So. Sie haben dies auf 52 anstatt auf 56 von links geändert. Ich bin mir nicht sicher, aber du kannst es . Ich glaube, es gibt keine Möglichkeit, zurückzuschauen. Vielleicht siehst du meine größte Lektion als Scheck. Sie sind in Ordnung. Das ist also alles über diese. Ah, okay, es gibt also nicht viel Veränderung. Alles. Augen fast das Ähnliche. Dies sind die Design-Prinzipien skalierbar, informative Pierce Pierce bedeuten, dass sie gehen Zehe Akt, wie erscheint. Sie haben, wie zwei oder drei Tabs statt nur eine. So werden sie in Kombination mit anderen Registerkarten arbeiten. Informativ. Sie werden Informationskategorien zeigen. Grundsätzlich wird es für verschiedene Kategorien verwendet, die an der Spitze bleiben werden. Skalierbar bedeutet, dass wir sowohl fixiert als auch scrollen können. Beide sind freundlich von den Schritten. Okay, wenn Sie Fragen haben, um mich zu stellen, und lassen Sie uns zur nächsten Lektion übergehen. 47. Materialkarte 2.0: jetzt in diesem. Hören Sie, wir werden ein bisschen mehr über Karten diskutieren, die Material verwenden, um zu zeigen oder neue Richtlinien. Und sie sind fast gleich. Aber die wenigen Dinge wie nicht ich, sie haben eingeführt, als ob ich dieses nicht besprochen habe, dass es ein Avital-Bild gibt. Diese eine Nummer, das ist der ganze Container. Dies wird der Container von dieser Karte genannt. Dann haben wir den Inhalt darin als in den Inhalten, die wir jedes Mal haben. Sein Titel sekundärer Text. Dies ist ein Medium, jedes Bild oder vielleicht Video. Dann haben wir diesen Text unterstützenden Text hier unten als wir Aktion haben. Aber dann haben wir einige unterstützende Icon-Aktionen oder hören Symbole optional für Richtungen. So ist es also. Es wird weitergehen. Dies ist eine andere, die Sie hier sehen können Wir haben reiche Medien, Die Spitze mit dem Titel Zweitens, Titel unterstützende Texte und Aktionen. Das ist also eine Kunst, die ich hier sehen kann. Sie können auch einige von den Trennwänden verwenden. Okay, also das ist wieder die Karte, aber es ist in zwei Dinge unterteilt, wie dies der Informationsblock ist. Und hier haben wir die Verfügbarkeitsoptionen, die Sie auswählen können. Und dann können Sie auf Reserve klicken, um dieses Café oder was auch immer Sie wollen zu reservieren. Reserve. Okay, also lasst uns die Interaktion sehen. Hoppla. OK, also zusammenbrechen und erweitern. Diese Autos können auch zusammenbrechen und erweitern. Okay, also können Sie sehen, dass das ihr Verhalten wirklich nett ist? Wirklich coole Animation, einfache Übergänge. Lassen Sie uns mehr von ihnen sehen. Ja. Also hier haben wir es. Contracting und Expansion so klein, Wache, nur um einige der Informationen zu zeigen. Wenn Sie industriell sind, können Sie den ganzen Kontakt so öffnen. Also, äh, lass uns auf die Ikonographie gehen. Und wo sind die Spezifikationen? Ich gehe zu den Spezifikationen zurück. Also hier haben wir einige der Spezifikationen. Dieses kleine Bild 80 dp's 3 44 ist die maximale Größe und warum ist es, weil sie leben einige außerhalb der Ränder auf beiden Seiten. Also 3 60 dp ist tatsächliche Größe und 16 aßen und aßen ihr Leben auf beiden Seiten. Okay, sind Aktionstasten. 16 db hier drüben. Also im Grunde ist die Luft dp ein Abstand von hier drüben für den fähigen Bereich und 16 dp ist die Linie all diese, um diesen Text und all die verschiedenen Aktionen im Inneren auszurichten . Okay, also 16 dp ist der Rand auf allen Seiten. Halt rechts, links. Und ich denke, an der Unterseite ist auch ein 16. Aber die tatsächliche Marge für das fähige Gebiet ist acht. Kampf gegen dp's 1 48 ist die Höhe der kleinen Wache. Sie können sehr diese Höhe. Das ist nicht. Es gibt kein sehr großes Problem. Sie werden also sicherstellen, dass Sie diese Höhe verwenden, die ich glaube, ich habe sie nicht benutzt. Ich benutze ein bisschen mehr. ich oder vielleicht weniger. ich nicht. Ich erinnere mich jetzt nicht mehr. Wie auch immer, hier haben wir diese 1 94 db für diese, je größer die größte, größte Größe von dieser Karte. Und hier haben wir zweitens Text und die Abstände zwischen ihnen, wo sie auf der Textgrundlinie 24 30 bis 26 dann 24 ist die Lücke zwischen diesem separaten Online und Text unterstützenden dext. Dann haben wir wieder die 36 Block 36 db aus Block-Baseline Drüben Dann haben wir 32 Debatten für diese Punkte, die anwendbar sind. ADP ist der Abstand zwischen ihnen ADP auf der linken Seite für diese Aktionsschaltfläche, weil es hier mit diesem ganzen Text ausgerichtet ist . Und eigentlich ist es von einem 16 dp. Also, Aktion, dieser Text wird 16 dp von hier entfernt sein. Also, das sind alle verschiedene Arten von Autos. Sie können sehen, dass diese Umrisskarten genannt werden und dies sind erhöhte Karten. Okay, also denke ich, wir benutzen so etwas. Unser Flugzeugschutz in unseren Designs, wir haben keine Schatten verwendet, so dass wir so etwas über Zeile Überschrift und so etwas wie diese Art von Präsenz verwenden können. Also denke ich, ein Muster, das wir nicht in unseren Autos verwenden, ist, dass ich ah, normale Taste hier drüben in der Karte. Ich bin mir nicht sicher, ob es in ihren aktuellen Spezifikationen möglich ist oder nicht. Ich denke, es ist möglich, dass ich es in der Lastenabteilung gesehen habe. Also hier haben wir Button Button. Wir haben hier auf der rechten Seite einen Knopf benutzt, anstatt auf der linken Seite. Ich denke, sie benutzen auf der linken Seite, und wir haben es auf der rechten Seite benutzt. Okay, sowieso, das sind die Spezifikation. Stellen Sie sicher, dass Sie 16 Punkte verwendet haben, sind 16 DPS grundsätzlich DP Marge auf allen Seiten. Dann benutzen wir noch eine Sache. Das ist die Karte. Eine maximale Kartenbreite beträgt 3 44 Dies ist, was Sie brauchen. Zehe. Kümmern Sie sich. Okay, das sind also zwei Hauptrichtlinien. Ich hoffe, Sie haben diese Lektion genossen. Wenn Sie Fragen zu diesem Kartenlayouts und all dem Zeug haben, können Sie mich fragen oder Sie können tief in diese ausgereiften Designrichtlinien gehen. Ich hoffe, Sie haben diese Lektion genossen. Wenn Sie Fragen haben, die Sie mir stellen müssen, gehen wir zur nächsten Lektion. 48. Typescale New Looks 2.0: Lassen Sie uns nun das neue System aus Material Design Typ System überarbeiten. Es gibt kein Typ-, Skalierungs- und Typsystem, und es ist fast das gleiche. Aber ich denke, sie haben ihr Layout aufgerüstet. Und dort können Sie die Erklärungen sehen. Sie sind jetzt genauer. Sie können sehen, dass dies der Fall ist. Satz Satz. Sie können sie im Satz verwenden, aber in der Schaltfläche können Sie sehen, ob Sie zu dieser Schaltfläche gehen. Hier drüben. Roberto. Medium 14 Größe 14 sp. Alle Lücken und 140,75 Ist Allegis Platzierung? Das ist also, was sie verwenden. Okay, dann haben wir auf Beschriftung 12.4 Overline. Es ist auch Satz. Sie können einen langen Satz in der Beschriftung verwenden, aber in Schaltflächen müssen Sie Ihre schlimmsten oder zwei oder drei behalten. Oder vielleicht vier. Max. Ich schätze, so. Das ist ihre neue Skala. Du kannst es dir ansehen. 96 ist die größte Größe. Auch, wenn Sie mit irgendwelchen benutzerdefinierten Telefonen gehen möchten, können Sie damit gehen. Sie haben hier einige Beispiele gezeigt. Lassen Sie mich zeigen. Dies sind einige benutzerdefinierte Telefon 60 regelmäßige 60. Dann haben sie drei geschlüpft, was ein Patriot formales Skript für reguläre 48 ist. Und es gibt noch wenige Beispiele. Wie Sie sehen können Roberto Condensed regulär 20. Und das ist Untertitelt Verrill um Herbst leisten. Dies ist eine andere von Google Force, und Ah, OK, so ist es, wie sie sind. Sie haben viele verschiedene Beispiele gezeigt, wie Sie sie verwenden können. Wie Sie sehen können, Sie große Medium, 14 Kappen, alle Kappen suchen wirklich anmutig auf diesem, äh, App würde hier. Und ah, ich glaube, das ist alles. Wenn Sie irgendwelche Probleme haben oder Sie Dinge berechnen müssen, können Sie sehen, dass sie auch einige von den Conversions in ihrem Tracking gezeigt haben . Okay, also für Größe und Pixel-Tracking von Skizze dividieren durch OK, also haben sie hier eine Skizzendatei gezeigt. Lassen Sie mich Ihnen Material zeigen, entworfen, Typ, Maßstab und Skizze. Sie können diese herunterladen und Sie können sich leicht in Adobe axity öffnen. Und dort werden Sie all die verschiedenen vier Größen und alles sehen. Also lasst uns dieses herunterladen und es tatsächlich öffnen, um mehr Sinn offen zu machen. Und ich werde zu meinem Desktop navigieren und diesen öffnen. Okay, also wurde das geöffnet 14 fehlende. Jedenfalls brauchen wir uns keine Sorgen um das Fort zu machen. Okay, hier haben wir all die verschiedenen Größen. Ok? Und berichten Sie über 96 Licht. Also, sobald sie Überschriften werden immer größer, können Sie sagen, sie sind mit leichtem Telefon leicht, sobald sie Überschrift ist normale Größe. Es ist mit regelmäßigen Überschrift berichtet 34 regelmäßig regelmäßig. Und wenn sie ein bisschen sind, wissen Sie, auf den kleineren Linien von kleinerem Maßstab, verwenden sie Mittel oder helfen, es für okay zu nehmen. Außerdem können Sie sehen, dass der Abstand ein bisschen anders ist. Es ist mehr in der Last verteilt, so dass es einfacher ist, auf kleineren Größen zu lesen. Das ist alles, was ich denke, sie benutzen. Im Grunde, wählen Sie mich aus. Vergrößern. Das ist also ihre Typskala. Ich liebe es wirklich. Onda. Es ist einfacher für mich, es in Adobe Eckstine zu öffnen. Oh, also mach dir keine Sorgen. Wenn etwas in der Skizze unserer Skizze Datei ist, können Sie es einfach mit Adobe X t öffnen. Ich hoffe, Sie haben diese neue Art Skala genossen, Material entworfen Typ Skala. Wenn Sie Fragen haben, die Sie mir stellen müssen, fahren wir mit der nächsten Lektion fort.