Conception d'applications Android professionnelles avec Adobe XD et Google Material Design

1. ♥ dans ce cours de conception Android d'Adobe XD: Bonjour, tout le monde. Bienvenue à mon cours sur la conception de matériel Android en utilisant Adobe X'd Et nous allons examiner toutes les spécifications de conception de matériaux données par Google Material conçu pour Point et je vais vous montrer quelles sont les différentes spécifications hors liste de différents boutons comment vous pouvez concevoir en utilisant les directives et restrictions de conception de matériel Google et créer des APS impressionnants. Donc, nous allons discuter de toutes les possibilités qui fonctionnent même dans le matériel Google conçu pour pointer, qui est la dernière version de conception de matériel de Google. Maintenant, les outils que nous allons utiliser sont ceux qui obéissent à X'd. Si vous êtes un grand fait dans Adobe X'd, vous devriez suivre mes autres cours ou tout autre cours sur Toby X'd, parce que je ne vais pas vous enseigner les bases offertes plus de 60. Donc, si nous allons utiliser Adobe X'd pour concevoir principalement et pour distribuer conçu pour les développeurs, nous allons utiliser Siplin Dieu est vous. Et aussi, nous allons utiliser la fumée ou d'autres outils en ligne pour générer neuf actifs de patch pour votre Android. APS. Si vous ne savez pas à propos de 9 passes, ne vous inquiétez pas. On va apprendre tout ça dans ce cours. Et si vous êtes familier avec Adobe, en fait, vous devriez être en mesure de concevoir abdos Android impressionnant et nous allons concevoir et application Android, qui est fondamentalement une application Android réelle pour les médecins en juke il. C' est donc ce que nous allons concevoir l'exercice. Et avant cela, je vais creuser beaucoup de détails sur différentes spécifications. Comment vous pouvez utiliser différentes couleurs, comment vous pouvez créer des schémas de couleurs et l'association de couleurs, qui est un nouvel ajout dans le matériel Google conçu pour pointer, qui est appelé association. Donc, nous allons faire équipe sur AB en utilisant toute la couleur, primaire secondaire tous leurs trucs. Donc je vais t'apprendre beaucoup de choses dans ce cours. Donc, si vous avez des questions ou des curies sur les problèmes liés à ce cours, vous pouvez me joindre. Vous pouvez m'envoyer un e-mail, vous pouvez m'envoyer un message. Je suis très répliqué. Je suis vraiment né dans 24 sont donc vous devez savoir. Ne vous inquiétez pas pour le sport que je vais vous donner. Donc, nous allons également créer plus de leçons si vous avez un problème ou si vous avez des demandes créer n'importe quelle autre leçon, je vais créer cela pour vous. Alors commençons à concevoir Android APS sur la façon dont nous pouvons remettre notre application Android. Développeurs de magasin. Apprenons ça ensemble. A bientôt à l'intérieur de ce cours. 2. ♥ Comment regarder ce cours ?: C' est donc la partie importante. Si vous avez déjà vu mon design Android avec cours photo shop, alors vous allez sauter beaucoup d'exercices et beaucoup de leçons différentes parce qu'ils sont dupliqués dans ce cours supplémentaire. Donc les conférences en direct avec et ils ont le cœur et le début de leur titre, vous allez regarder sur Lee. Ceux-ci sont spécifiques uniquement pour les étudiants qui ont vu mon ou qui ont déjà vu ma classe, qui est ah, conception de matériel android en utilisant pour la boutique. Donc, euh, si tu as vu ce verre entier, tu l'as parfaitement fait. Ensuite, vous allez sauter les conférences. Donc, les seules conférences que vous allez voir notre qui ont une icône difficile au début leur titre. Ainsi, vous pouvez voir dans la barre de droite avec les titres de cours sont que vous avez besoin orteil Il suffit de voir les leçons où ils ont le cœur. Je suis parti au début, donc je vais vous montrer mon écran. Que signifie cette icône du cœur et comment vous allez orteils ? Il suffit de voir ces icônes dures. Si vous avez déjà vu mon et droit cours de conception de matériaux avec boutique de photos parce que certains hors des conférences, ils sont les mêmes 50%. Presque le matériel. Qu' est-ce que la conception matérielle de Google ? Comment toutes ces choses fonctionnent. Ils sont semblables. Ce sont les mêmes contenus dans les cours. Donc je ne veux pas perdre ton temps. Si vous avez déjà vu mon cours, alors vous allez sauter les conférences et voir seulement les conférences avec le cœur. Ok, donc c'est le but de cette leçon. Je vais vous montrer mon écran. A quoi ressemble cette icône dure. Alors passons à l'écran. D' accord. Donc, hé, comme vous pouvez le voir, je suis en ce moment, ajoutant ces leçons dans mon ajout Mr Dror vue enseignants. Et vous pouvez voir ça. Il y a un petit cœur. Je vais au début de cette leçon. Donc c'est ce que je veux dire. Donc, si vous voyez ça dur, je l'ai obtenu signifie que c'est la nouvelle leçon et elle est listée. Qu' obéir à X'd. Et si vous avez déjà acheté mon autre cours, c'est la leçon différente de l'autre. Donc, vous devez le regarder donc si vous avez. Si vous commencez ce cours à partir de zéro et que vous n'avez pas lavé mes autres cours ou mes autres cours à la fin sont conçus, alors vous pouvez simplement regarder normalement. Ok, donc j'espère que vous avez compris le concept de ce cœur et comment je suis. Tu dois laver ce cours. Passons à la leçon suivante. 3. What résolution et de densité: maintenant, dans cette section, nous allons à la pointe. Commencez par les différentes densités d'écran de résolution hors écran de type différent. Qu' est-ce que la résolution d'écran DP I et qu'est-ce que le SP ? Pixels évolutifs et densité DP porcs indépendants est donc ce sont tous les termes que vous devez maîtriser avant d'entrer dans la boutique photo ou adobe X T ou même croquis pour commencer à concevoir vos abs android. OK, maintenant, maintenant, dans ce moins et d'abord nous allons les pieds, prenez soin de la résolution hors écran par rapport à la densité de l'écran. Ok, donc dans cette leçon, on va couvrir ces deux-là. Allons sur les pieds notre première diapositive. Maintenant. abord, nous allons examiner la différence entre la densité de l'écran et la résolution de l'écran . La résolution d'écran est toujours en pixels, ce qui est que mon téléphone mobile est de 9 20 pixels par ou 10 80 pixels par 9 20 pixels, ce qui est une résolution Full HD ou 12 80 pixels par 7 20 ou 5 40 pixels par 9 60 images. Donc ce sont des cochons différents, résolutions malveillantes que combien de cochons sont là sur votre écran ? Ok, donc c'est le nombre total de pixels dans un appareil d'affichage. Il pourrait être votre écran LED ou il pourrait être votre je fais cinq k écran, donc il y aura un nombre de pixels que ces nombreux pixels les nombreuses portes fléchettes numériques sont présents sur cet écran. Ok, maintenant, à propos de la densité de l'écran signifie à quel point cet écran est dense avec le nombre de porcs échappés . Donc, c'est le nombre de décompte des photos dans un pouce hors écran. Ok, donc pour aimer, vous pouvez voir ici dans le côté droit, il y a deux écrans de la même taille. OK, donc ils sont les deux, comme les écrans de cinq pouces ou quatre pouces d'application mobile écrans et vous pouvez voir le nombre de pixels sur eux sont différents. C' est plus que le droit est plus dense que celui de gauche. On a la même taille d'affichage en pouces, mais il a moins de pixels. Ainsi, les images sur cet écran de gauche seront moins nettes. Ok, ainsi de suite Et les images ici sur l'écran de droite seront plus nettes et auront plus de résolution et plus de pixels. Donc, il est juste comme vous pourriez avoir entendu le terme sur vous lorsque vous imprimez quelque chose que ce soit un 300 dp je l'impression ou 600 pouces je l'impression Donc il est fondamentalement des points d'argent maison l' imprimante a imprimé dans un pouce du papier. OK, donc si c'est 600 pouces I ou 600 pouces du FBI, il va imprimer 600$ dans ce pouce. Ok, donc il aura plus de couleurs et il vivra plus naturel et aura plus croustillant. Vous pouvez dire l'expérience. Donc, ici, vous pouvez voir il ya un exemple que 10 80 pixels par 9 20 résolution et la densité est 401 pouces de tache sombre ou DP. Je pense que tu as compris ce que ça veut dire. Maintenant, je vais vous montrer des exemples sur mes deux écrans mobiles différents et leur résolution réelle et leur densité. Ok, maintenant vous pouvez voir sur le côté droit que j'ai cette introspect. Il est une application mobile, application Android. Vous pouvez l'installer sur votre téléphone Android. Et en fait, si vous allez dans cet onglet d'affichage, vous pouvez voir différentes tailles ici. Ok, maintenant ou nous allons aller à cette densité horizontale et verticale. Vous pouvez voir qu'il est 403.41 db I Donc c'est le vrai dp I, qui est noir spot pouce de l'écran. Il s'agit d'un écran très haute résolution en haut. Ici, vous pouvez voir 10 80 pixels et sur le côté gauche vous pouvez voir 1920 pixels. Donc, c'est une activité presque. Écran SD Foon. Et c'est de Samsung essentiellement. Et c'est en fait l'écran de mon propre appareil mobile que j'utilise. Ainsi, l'écran mesure 5,46 pouces. Ok, donc c'est essentiellement cette distance diagonale. En fait, c'est la distance diagnostiquée. Ce n'est pas la distance de droite à gauche ou l'ensemble beaucoup large qu'il est. Donc, sur la base de ces calculs, en fait, ce que j'ai fait est que j'ai divisé mon nombre total de pixels par mon dp. Moi et moi avons pris la taille hors de mon écran. OK, donc si mon écran est 10 80 pixels de large, je vais le diviser par la porte Spottings Rdp I 403.41 et il va me donner 2.67 pouces, donc il est presque 2.7 pouces de large. Ok, donc c'est comme ça qu'on va aller aux pieds. Obtenez la relation entre la résolution de l'écran et les densités d'écran de DP. Voici un autre exemple. Ceci est mon vieux téléphone Samsung téléphone Android, et vous pouvez voir ce que Ici, il a presque cinq pouces écran presque, je pense, moitié moins que l'écran précédent. Mais vous pouvez voir ici la densité horizontale est presque la moitié à 21 GPS. Donc, les images sur l'écran que vous pouvez voir ici même cet écran court est un peu pixilisé et il n'est pas aussi clair qu'un écran précédent. Donc, c'est une différence différente entre DP I. Si vous achetez un téléphone mobile et un fusil, vous devez savoir combien dp i expédier. moment, il y a des aliments qui supportent 6 40 dB I. Ils sont donc des images très haute résolution et très précises. Vous pouvez voir les vidéos et les couleurs et tout ce qui est plus précis que celui-ci. Ils sont plus denses avec des exilés avec des couleurs, donc ici vous pouvez voir l'écran. Mais j'ai calculé est de 2,44 pouces et c'est la taille réelle des pixels. 5 40 images par 9 60 images. J' espère donc que vous avez cette densité par rapport à la résolution. Qu' est-ce que la résolution et qu'est-ce que la densité ? En outre, si vous allez sur les écrans LED ou le plus de moniteurs, vous pouvez voir qu'il y en a deux. Ok, c'est quatre K et plein en fait écrans. Ils ont des résolutions différentes et la densité de sortie différente est les appareils Apple, même si vous utilisez un Mac Book pro ou I American et je fais leur densité est toujours presque double que Windows ou écrans normaux ou écrans PC, bien qu'il y ait beaucoup de nouvelles allergies et moniteurs qui viennent le long et ils ont plus de densité et plus de résolution et créent un pixels et danse pixels dans des espaces plus petits. Non, j'espère que vous avez compris cette différence entre la densité et la résolution de l'écran et la densité de l'écran . J' espère que vous apprécierez cette leçon. Et n'oubliez pas d'installer cet introspect Abit est gratuit et passez à cet onglet d'affichage et voyez ce que vos appareils sont sportifs. Quelle est la densité de votre appareil ? Quels sont les porcs est la résolution de pixels de votre appareil et j'espère vous voir bientôt dans la prochaine leçon 4. Relation de DP et de PX: dans cette leçon, nous allons parler de ce qui est DP, qui est la densité, les pixels indépendants et ce qui est réellement pixels. Alors, quelle est la différence entre ces deux et comment vous pouvez utiliser et convertir ces orteils les uns avec les autres ? Si vous utilisez pour la boutique ou des cochons l dessins basés Ok, alors commençons maintenant. Sur l'écran, vous pouvez voir qu'il y a trois appareils différents avec trois densités différentes. 1er 1 est 1 60 dp, ce qui est très moins dense et très faible nombre de bouillie exultes. Ensuite, il y a 2 40 p A, qui est un dp moyen I et puis nous avons la rue quand TDP I ou extra haute définition haute définition et tache sombre dans votre écran de définition est venu. Maintenant, vous pouvez voir qu'il y a un bouton ou en bas. Par ici. Vous pouvez voir ceci est un bouton bleu et bouton bleu foncé, et il est de la même taille sur tous ces trois appareils Il est. Et si la taille est en pixels maintenant vous pouvez voir sur cet écran de gauche, nous avons moins de pixels. Donc, il est à la recherche créer. Maintenant, sur l'écran du milieu, nous avons plus de pixels. Et maintenant ce même exercice semble un peu petit. Maintenant, sur cet écran, nous avons trop de photos. Donc nous avons Cet écran est dense avec des exilés soutenus par des porcs. Donc, si nous utilisons des porcs malheureux menthes Meyer, ça va arriver à ça. Donc, si je crée un bouton et que je veux qu'il soit précis sur ces trois écrans, que dois-je faire ? Je devrais créer un autre monument. Sont une autre échelle orteil mes années. Il va donc être indépendant de la densité, donc cela ne dépend pas de la densité. Donc maintenant, vous pouvez le voir ici, si je définit ce bouton dans DP sont des images indépendantes de la densité, mes programmeurs sont il va regarder la même chose sur tous ces appareils. OK, donc ça va augmenter de 1 50% sur ce 200% ou celui-ci et ça va résoudre tous mes problèmes. C' est pourquoi android, un design matériel. Ils sont venus avec cette unité de millions de pixels, qui est DP Distt Density images indépendantes. Donc ces pixels, ces monuments, si vous donnez vos quartiers que mon bouton sera 200 dp vide par 36 To de haut. Il va rester le même proportionnel à leur taille d'écran sur ces trois appareils , il apparaîtra le même. Ok, donc c'est le problème. Pourquoi ils ont créé DP au lieu de pixels. Parce que les pixels vont paraître plus petits une fois que nous arriverons sur Ah, écran de densité plus élevée. Non, je vais vous montrer un exemple de la même application introspect que j'ai installée sur mon appareil Android . Et vous pouvez voir si vous regardez en haut ici les cochons, l' art des maux et 80 pixels. écart de pièce dans DP est de 3 60 db. Et maintenant, si vous regardez cet écran, nos pixels sont différents, mais les pixels indépendants de la densité sont les mêmes. Il est 3 60 dp vide. Ok, donc si vous définissez un bouton comme un 300 DP pour l'écran, vous voulez qu'il prenne comme, 300 DP, il va regarder la même chose sur ces deux appareils, même si leur résolution d'écran ou le nombre de pixels sont différents. C' est ainsi que nous allons utiliser les DP. Nos tailles seront les mêmes et ah, le monument principal DP pour n'importe quel écran d'application mobile. Si vous utilisez le système Android et écrire la conception de matériel, il sera 3 60 dp par 6 40 dp OK, alors gardez cela à l'esprit et nous allons prendre soin de toutes vos variations dans les prochaines leçons. Ne soyez pas confus sur la façon dont je vais utiliser ces DP dans ma boutique photo ou tout autre logiciel de conception . Ok, alors allons de l'avant et à bientôt dans la prochaine leçon. 5. Outils en ligne de Dp à px: dans ce s et je vais vous montrer quelques outils en ligne avec vous pouvez facilement convertir des pixels en vos DP sur. Et c'est un de ces cochons. Ill cochons place ville et vous pouvez voir ici à ce bas, vous pouvez entrer les pixels. 48 pixels. Ce sont les pixels. Tu sais, DPS Pmm pouces points n'importe quelle année signifiait que tu veux convertir les dp orteils ok, et tu vas sélectionner ce mtp I En ce moment je vais m'occuper de ça dans une autre leçon. Ce sont des seaux exultes et de ville et de garder ces paramètres tels qu'ils sont et vous pouvez voir si je le change à 100 et maintenant vous pouvez voir si nous commençons avec ce MDP I Mes 100 pixels vont être les mêmes que 100 dp's aussi sur ce DVD p I il est 1 33 porcs est le même 100 dB sur les écrans HDB I. Il va être 1 50 photos sur l'excès dp I ces écrans de densité Atmore, ils ont une densité plus élevée. Vous pouvez voir que c'est 200 pixels le double de la taille réelle. C' est 100 pixels. Mais sur ce X db I, c'est le double de la taille. Ensuite, il a triplé la taille qu'il a quatre fois la taille. C' est pourquoi nous appelons ces écrans 1,5 x deux x trois x quatre X s. C'est pourquoi nous les appelons comme ça parce qu'ils sont le double de la taille ou 1,5 de la taille ou quelque chose comme ça. Donc, c'est comme ça que vous pouvez convertir. Vous pouvez également sélectionner sur ces différents lancer une icône APP. Ce sont des tailles différentes. 36 48 images et ce sont toutes des tailles de pixels. 1 44 96 Barre d'action Petites tailles contextuelles, icônes de notification 24 images et vous pouvez voir à XX dp i Ce 24 parle. ALS va avoir multiplié par trois parce qu'il est trois x écran. 72 pixels est la taille et sur quatre sorties est 96 images parce que nous avons plus de pixels et des écrans plus denses sur les écrans DPS plus haute résolution ou plus haute. Maintenant, regardons un autre tabouret, qui va être plus simple que celui-là. Maintenant, vous pouvez voir que je vais orteil vérifier cette ligne de base C'est le 1 60 MDP it aller à la ligne de base de vos différents modèles sont pour la conception de matériel Android. Maintenant, si je sélectionne comme 50 pixels hors taille, vous pouvez voir qu'à L d P i, qui est son point cinq x il est essentiellement multiplié par 50.75 Donc 50 db sera 37.50 Porcs est en ce moment. Je ne pense pas qu'il y aura peut-être quatre ou cinq personnes sur toute la planète qui utilisaient ce LDP. Donc, nous allons aux pieds. Prenez soin de toutes ces forces pour cinq résolutions au nord de celle-ci. Donc mdb yeux essentiellement Avanex, qui est la base standard. Donc, tout le plus profond sera égal orteil les mêmes fictions que nous avons réellement P I, qui va être 1,5 donc multiplié par 1,5 il est 75 pixels, sorte que vous pouvez voir que vous obtenez la relation entre DP et pixels sur différents ces densités et écrans résolutions et vous pouvez voir ici pour quitter va être multiplié par deux, ce qui est pour ex sdp I et ensuite XX sdp I trois x multiplié par 31 50 triple X HDP I Il va être multiplié par quatre, et vous pouvez voir ici, nous avons 200 pixels, donc 50 50 DP va être 200 pixels sur ces écrans ces écrans les écrans grands ou haute densité et même pour les autres. Ok, donc j'espère que vous n'avez pas détruit cette relation sur la façon dont vous pouvez calculer les différentes tailles de pixels pour différents DP sur différentes résolutions de densité d'écran. Un travail supplémentaire, trois x et quatre x. Nous allons parler plus de STP XXV p A. Dans les prochaines leçons. J' espère que vous avez apprécié cette leçon. Passons à la leçon suivante. 6. Quels sont des boucles de are ?: Maintenant, nous allons parler de ce que nos seaux de densité et pourquoi avons-nous besoin d'eux ? Et pourquoi voulons-nous créer nos actifs graphiques ? Notre Grande-Bretagne est nos icônes en plusieurs versions différentes sur chaque carte de bits que nous allons créer . Ok, Donc, si vous concevez un bouton ou une icône pour votre application mobile Android, vous allez extraire la même icône dans le remorquage presque trois ou quatre tailles différentes. Et pourquoi avons-nous besoin de ça ? Parce que nous allons prendre en charge différents appareils. On a plus de pixels. Densité mélangeur. On en a moins l'un et l'autre qui est très haute densité. Donc, nous avons besoin d'icônes séparées tailles de boutons pour chacun d'eux. Sinon, que va-t-il faire ? Est-ce que le système Android va mettre à l'échelle votre seule image ? Si vous n'utilisez qu'une seule image, elle va mettre à l'échelle votre image et elle va flou des orteils. sang va se produire sur votre écran. Ok, donc pixélisé, ça aura l'air floue et pixélisé, donc on n'a pas besoin de ça. Donc, nous allons étudier que différents seaux de densité et il ya comme des tonnes différents dispositifs qui sont qui ont différents porcs, mauvais révolutions et seaux de densité. Et on va aux pieds. Classez-les en trois ou quatre sur ces différents compartiments. OK, alors voyons. Qu' est-ce que c'est ? Ok, maintenant sur l'écran il y a cinq seaux de densité différentes. Un que j'ai omis, qui est LDP, je ne pense pas que vous avez besoin de conception orteil pour ou développé pour. Ok, donc c'est leur MDP de base. J' ai gagné 60 GPS. Donc, tout appareil qui ont une résolution ou une densité qui est plus proche de ce 1 60 il va tomber dans ce seau que tous les appareils qui ont 2 40 p un r plus proche de ce 1 20 toe 210. Ils vont être dans cette densité, puis écrans extra haute densité. C' est deux X, tous les écrans qui ont quelque chose de plus proche de 3 20 Ils vont tomber dans ce. Ensuite, nous avons 40 db i ou XX sdp I trois x écran et tous les différents écrans qui ont haute extra extra haute définition écrans. Ils vont être ici, densité, densité, donc contre les écrans. Et puis nous avons ces écrans extra extra haute densité qui vont être de 6 40 db I et ils vont tomber dans cette catégorie. Maintenant, vous pouvez voir que j'ai montré la même boîte bleue ou avec différentes tailles sur l'écran. La raison en est que c'est la même taille de pixel sur le même fardeau qui va apparaître sur différents écrans comme celui-ci. Ok, donc si nous avons ce bouton de cette taille, c'est des excises comme peut-être 200 par 100 pixels. Il va être 350 photos comme ça un grand peu plus grand, 1,5 fois plus grand sur l'écran de Bouddha. Deux fois plus gros sur celui-ci, trois fois plus grand sur celui-ci et quatre fois plus grand sur celui-ci. Vous pouvez donc voir comment nous pouvons créer différents actifs pour tous ces écrans. Nous avons besoin d'un atout, et nous avons besoin de différentes tailles de cet atout pour porter tous ces différents écrans DPS . Maintenant, nous allons regarder un exemple Maintenant, vous pouvez voir ceci est l'image prise de Google matériel conception de leur propre documentation de ligne, et vous pouvez voir ou entendre qu'ils ont montré comment différentes tailles et comment différentes icônes ou images, ils vont orteils ont des résolutions ou des échelles différentes sur différents yeux DP ou écrans de densité. Maintenant, vous pouvez voir que c'est notre base de référence. Donc, si une icône est comme 48 x 48 pixels sur cette taille de ligne de base, elle va un peu plus grande. 1,5 fois sur, Http. I que sur X à X HDP I écran de hauteur et de densité supplémentaire les deux prochaines peaux extra haute densité afin que vous puissiez voir comment cette taille est. Compétence un x 1,5 x deux x trois X et quatre x Donc c'est vous devez garder ces points dans votre esprit que nous concevons peut-être pour celui-ci, ou nous allons utiliser un modèle que nous étions. Nous allons concevoir pour les cous et nous allons exporter nos graphiques dans toutes ces tailles différentes où vous pouvez le faire dans le magasin et obéir à X t sketch sur n'importe quel logiciel que vous utilisez. Donc, n'ai pas besoin de vous inquiéter pour ça. On va s'en occuper dans les prochaines leçons. J' espère que vous avez compris, garçon différent ce DP yeux, seaux, seaux tendus ont et pourquoi nous nous soucions d'eux et comment nous pouvons. Nous allons nous attendre à différentes tailles de différentes images pour armer tous ces écrans haute densité et densité. J' espère que vous apprécierez cette leçon. Passons à la leçon suivante. 7. Outil en ligne pour la résolution d'écran, la taille de périphérique et la densité: D' accord. Maintenant, je vais vous montrer un outil très simple, qui est de matériel de conception point io dispositifs slash, et vous pouvez voir ici vous pouvez voir toutes les différentes hauteurs et pixels écrits. DP dans les rapports d'aspect points sur vos appareils, pouces et centimètres, dimensions de l'écran et la plate-forme, et aussi vous pouvez voir sur le côté droit, dit Densité. Donc, si je clique dessus, vous pouvez voir ce sont les écrans avec un mdb I ou des appareils de densité moyenne. Chromebook 11 Chromebook 30. Ce sont de très grandes dimensions que vous pouvez voir ce sont des pouces, et si nous allons orteils, je vous fais voir qu'il a différentes tailles. Et si vous parcourez cela, vous pouvez voir si vous allez à ce trois X, vous pouvez voir qu'il y a des appareils de 5,1 pouces, et vous pouvez voir ici nous avons Sony Xperia et Itis 5.2 et 2.5 est le village et 4.5 pouces la hauteur off leurs appareils. Donc ce sont toutes les différentes résolutions, et vous pouvez voir ici la résolution de l'écran. Voici le chirurgien dans DP, et aussi vous pouvez voir qu'il existe différentes dimensions DP pour d'autres appareils comme Google Pixel Excel Order. Donc, si vous concevez pour un dispositif spécifique comme Nexus cinq pour Nexus six comme vous pouvez voir ou entendre ensuite un six ou six p, ils ont DP dimensionnel quatre Lemon par 7 31 Mais ils vont tomber dans 3.5 XXX comme dp I. Donc, ceux-ci prennent fondamentalement ces ensembles de ce seau de densité, et il y a différentes tailles. Vous pouvez naviguer si vous le souhaitez. Si vous êtes à la recherche d'un appareil spécifique, vous pouvez regarder l'aspect. Ratios. DP Hide Une résolution d'écran dans les Porcs est également la densité de l'écran, l'écran, dimension et les pouces et centimètres, ainsi que la plate-forme sur ce qu'ils travaillent. Donc, c'est tout cela. Dispositifs de conception de matériaux skiés, et vous pouvez regarder dehors pour toutes les différentes tailles si vous voulez. J' espère que vous avez apprécié cette leçon. Passons à la leçon suivante 8. Quelles tailles de caractères SP dans Android de conception matérielle ?: maintenant dans ce s et nous allons parler de pixel évolutif ou SP. Ceci est une autre unité que la conception de matériel android utilise, mais à des fins différentes. Maintenant, vous avez tous déjà entendu et nous avons parlé de pixels indépendants de densité DP pour votre résolution d'écran et mises en page et différentes tailles différents boutons et assertions. Mais ce SP est quatre force comme BB. Il est pour nous pour la force et il va sauver les quatre réglages dans la conception de matériaux endurés . Donc, chaque fois que vous allez donner votre taille est vos quatre tailles à vos développeurs, vous allez parler en sp et pixels évolutifs. Donc vos développeurs savent que ce designer connaît vraiment mes affaires. Ok, donc la principale différence est que SP npd ils sont en fait les mêmes. Mais SP va toe enregistrer tous les paramètres. Vous définissez donc sa taille. Très c'est audacieux ou nord ou quelque chose comme ça. Donc, cela va être un orteil relatif vos tailles d'écran. Donc, si vous utilisez SP dans vos quatre tailles, il va être relatif à votre écran et les densités, et il va orteil de la même taille, Il va apparaître sur la même taille sur différents appareils. Maintenant, je vais vous montrer un exemple de 20 s avant ainsi sur différentes densités. Nous avons donc nos prochains écrans 1,5 x deux x trois x et quatre X. Maintenant, vous pouvez voir que je trouve amusant 20 pixels qui est sur mtp I parce que sur MDP I c'est le filmé et la stévia. Mes pixels d'écran réels vont être égaux au SP ou DB réel. Ok, donc 20 s p est égal à 20 pixels sur mon mtp I qui est notre densité de base. Ensuite, nous avons 1,5, sorte que vous pouvez voir 20 multiplier par 1,5 30 30 pixels. Maintenant, vous pouvez voir que cette bordure est en train de changer car il suffit de prendre un exemple comme ceci est un fardeau et c'est un texte sur le bouton. Maintenant, si vous voyez sur cette taille l'amertume petite donc le texte petit a l'air génial, mais sur cette taille, texte si vous utilisez la même valeur de porc malade sur le texte ici, il va paraître très petit et il va être illisible. La capacité de plomb souffrira beaucoup. Aussi la lisibilité. Donc, ce que nous allons utiliser, c'est que nous allons utiliser la réalité quatre tailles, qui sont SP. Donc, cela va être 30 parce qu'il est en fait et il va toe traduire SP, qui est égal à 20 s, être multiplié par 1,5 30 20 multiple jamais physique, 40 et 20 multiple jamais trois est égal à 60 pixels et 20 multiplier avant 80 choix est. Donc, si vous concevez pour trois appareils X ou deux semaines des appareils de 1,54 X, vous devez multiplier vos quatre tailles avec ce rapport de densité et quand vous allez en parler à vos développeurs, vous n'allez pas leur donner des tailles dans pixels. Tu vas parler chez Espy maintenant. Ceci est en fait la différente échelle typographique hors conception de matériel android, qui est de vous pouvez voir ici, nous avons le bouton, tous les casquettes 14 sp, taille moyenne. Ils utilisent un robot se permettre. C' est essentiellement roboto et vous pouvez voir que c'est la taille des légendes. Régulier 20 sp taille du corps, une taille du corps, aussi. Vous pouvez utiliser 14 SP standard. Tout ce que vous pouvez utiliser moyen 14 SB ou SP moyen pour ordinateur de bureau. Donc, si vous concevez pour le bureau en utilisant la conception de matériaux pour les applications d'arrêt chrome ou quelque chose comme ça, vous allez utiliser ces trois valeurs. Ensuite, nous avons des titres qui peuvent voir moyen 20 SP Headlines vont être 24 SP et plus. Vous pouvez voir ce jeu un est également en tête Desperate était plus grand affichage des arbres beaucoup plus grand titre et l'affichage pour est très, très grand titre. Donc, c'est essentiellement appelé échelles typographiques et j'ai beaucoup parlé d'eux typographique, rythme radical et échelles typographiques dans ma typographie de cours pour les concepteurs et les développeurs . C' est ainsi qu'ils ont développé ce SP. Il va rester le même car il ne dépend pas des pixels. Il est capable de pixels. Fondamentalement, j'espère que vous avez compris le concept de SP et ah Android échelles typographiques matériel et comment nous allons utiliser différentes polices de caractères et tailles pour différents affichage de sur l' affichage. Deux sous-titres de titres, corps essentiellement pour les paragraphes, les légendes et les charges. J' espère que vous avez apprécié cette leçon. Passons à la leçon suivante 9. ♥ Comment de l'unité DP dans Adobe XD: OK maintenant à distance. Et nous allons parler de conception séchée dans l'utilisation d'Adobe X'd. Quelle taille de fichier ou modèle sont des tableaux d'art que nous allons utiliser. Ceci est Adobe X T. Et sur cet écran, cet écran de bienvenue, vous pouvez voir là, nous avons ce mobile Android, et vous allez cliquer dessus et il va commencer avec et droite livre de coeur Mobile. Donc, il est très facile à cela, alors soyez supplémentaire parce que ce n'est pas Ah ah, porcs, mauvais logiciel basé. C' est un logiciel basé sur des vecteurs, et il est plus facile à concevoir dedans. Ok, donc juste glisser et elipse comme ça, et, euh , Jack, une image ici, et vous allez créer quelque chose de similaire à ce même bouton, et je suis va créer quelque chose ici. Donc, si vous ne savez pas comment utiliser cet adobe x t, vous pouvez suivre mon cours adobe X'd, j'ai ah,cours j'ai ah, part entière de la bigness au niveau Mars tout ce que j'ai discuté à l'intérieur de ce cours. Donc, si vous ne savez pas comment l'utiliser, vous pouvez aller vérifier ce cours. Ou vous pouvez même m'envoyer un message pour obtenir ce cours sur un rabais ou quelque chose comme ça à nouveau. Donc nous allons utiliser du texte ici. C' est moi. Quelque chose comme ça. C' est le même exercice que je fais pour Ah, dans la boutique photo. Je n'ai pas photo boutique dans le précédent Écoutez que vous allez faire ici, et je vais utiliser ce véhicule ou ici comme ça, et vous pouvez utiliser quelque chose. Engagez-moi quelque chose comme ça. Donc je vais faire glisser cette image de ma fille. Et tu peux voir quoi ? Ici, cette image et un decks par ici. Et aussi ton nom. Oui. Tu vois, ou quelque chose comme ça. Et je vais m'occuper du reste. D' accord ? Donc, créez quelque chose comme ça dans Edo, Android Mobile et Ah, encore une chose. Je voudrais si vous cliquez sur cette bordure d'art avec la taille. Ici, il est 3 60 par 6 40 Si vous voulez augmenter la peau ou vous voulez concevoir pour quelque chose comme 411 de celui-ci et ah, 411 avec et 700 quelque chose 1937 était la hauteur pour les six prochains appareils ou plus grands comme, Ah, Samsung s huit ou quelque chose comme ça, vous pouvez spécialement conçu pour eux Si vous voulez. Vous pouvez utiliser quelque chose comme ça Maintenant, il y a une autre chose que je voudrais discuter ici , qui est différent de la boutique photo. Est-ce que dans un no b x d Vous allez toujours concevoir dans un X. Ok, Donc, si vous allez ici et aller à l'exportation de frais généraux et sélectionné, vous pouvez voir si vous allez à Android, vous allez sélectionner quel MDP I vous étiez en utilisant. Ok, donc tu vas toujours sélectionner ce 100 MDP I et juste exporter tous tes actifs avec ça ? Nous allons parler plus tard de ces affirmations et de ces problèmes maintenant je veux que vous créiez quelque chose comme ça et serait au milieu. Ok, quelque chose comme ça et juste exporté sont de prendre une capture d'écran de votre design et sommet dans cette mission. D' accord ? Vous pouvez également soumettre votre travail via des réponses aux questions si vous le souhaitez. Oh, donc si vous ne pouvez pas envoyer d'affectation ou si vous avez pu ignorer des affectations, vous pouvez le faire plus tard. Donc j'espère que vous avez apprécié cette leçon, comment vous allez créer différents tableaux d'art sur quelle taille X ou densité vous êtes que vous concevez, aller à la conception. Ce sera X'd. Passons à la liste suivante. 10. Le premier projet pour les apprenants: Maintenant, c'est le moment de votre première affectation, et ça va être très simple. Vous devez ouvrir votre Adobe X'd et créer un nouveau document qui va être le tableau d'art sur Android Mobile, qui est 3 60 par 6 40 Vous savez déjà comment ouvrir ce modèle. Et si vous ne savez pas, vous pouvez cliquer sur les tableaux d'art et laissez-moi le sélectionné et vous pouvez voir ici nous avons ce mobile android et vous pouvez également les excès à partir du premier écran de cette adobe X t. Et maintenant ce que nous devons faire est que vous avez besoin orteil. Utilisez votre image si vous le souhaitez. Oh, si vous ne voulez pas utiliser votre email, vous pouvez utiliser n'importe quelle autre image. Mais je préfère que vous utilisiez votre image comme vous pouvez le voir. C' est mon image. Utilisez quelque chose comme cette image d'avatar. Alors vous pouvez dire quelque chose d'essences ou, hum, bases dem ou quel que soit votre nom. Ok, alors tu vas écrire un texte d'introduction sur toi peut-être. Qu' est-ce que tu fais ? Quel travail faites-vous ? Qu' est-ce que tu cherches sur ce que tu aimes ? Quelles sont les choses que tu aimes lire ? Comme vous pouvez le voir ici, j'ai montré mes intérêts, et à la fin, vous allez utiliser ce fardeau. Les orteils ont de l'ombre dessus et du texte blanc. Et il va être tous les casquettes parce que la plupart des boutons dans la conception de matériel Android ils sont tous des casquettes. Maintenant, à propos de la taille est cette chose va être de 1 10 par 1 10 dp qui est en fait la même taille dans adobe x t. Donc juste 1 10 par 1 10 cela va être 20 sp ou ah, porcs évolutifs maux. Ensuite, cela va aussi être 16 taille et c'est ce texte sur ce bouton va également être 16. La taille du bouton sera 200 par 48 BP Alors pourquoi je vous donne cette affectation juste pour vous familiariser avec toutes ces tailles sur ce que les tailles de dip et les tailles utilisées dans adobe excuse Ils vont être le même que vous êtes en train de concevoir pour Avanex. Une fois que vous aurez terminé cette tâche, vous allez prendre une capture d'écran de cette. Vous pouvez également utiliser ce logiciel gratuit pour prendre votre écran court. Et une fois que c'est comme au début, vous pouvez sélectionner sur cela et vous pouvez C'était quelque chose comme ça. Écran de capture coupé et téléchargé. Et montrez-moi vos dessins. Jeu une autre façon d'extraire votre cette androïde concepteurs de matériel goto exporter tous les ennuis d'art et nous allons sélectionner cet android et sélectionner un quatre dossiers où vous voulez exporter et exporter nos taureaux d'art. Ok, maintenant nous allons parcourir orteil que pour le dossier d'exportation Si vous double-cliquez dessus et vous pouvez voir ici nous l'avons. Et ah, utilisons quelque chose au milieu, peut-être un excès de dp j'utilise cette taille et je le télécharge, OK ? Et je vais passer en revue. Donc, juste pour vous assurer que, vous savez, comprenez certaines choses et comment vous pouvez facilement commencer à concevoir avec Adobe X'd. Donc, si vous avez des difficultés à utiliser et à obéir à X t, vous pouvez prendre mon autre genre de cours de prototype de conception X T dans Collaborated, qui va couvrir toutes les bases. Ok, donc j'ai hâte de voir votre mission, votre visage, vos goûts et vos dégoûts et qu'est-ce que vous prévoyez à l'avenir ? J' espère voir vos dessins bientôt. Commençons à faire votre première mission maintenant. 11. Régions d'UI de matériel Android: non. Avant d'entrer dans notre conception, nous allons nous familiariser avec les différentes structures et l'eau. Les différentes régions de votre interface utilisateur. Et quels sont leurs noms hors conception de matériel Android ? Parce que nous avons besoin d'orteil se familiariser avec elle parce que nous allons parler à nos développeurs ce sujet. Et quand nous concevons, nous avons besoin de savoir ce que ce nom de région est dans le système conçu Android. Alors commençons. OK, maintenant, abord, on va voir cette image par ici. C' est matériel sont vos lignes directrices et vous pouvez voir quoi ? Ici. C' est notre Akbar, qui est que vous avez peut-être vu beaucoup sur le titre APS ici à la barre d'outils primaire. Il s'agit de la zone de contenu. C' est la barre inférieure où nous avons la navigation en bas ici. Quelques icônes, peut-être trois ou quatre. C' est essentiellement cette couleur de type Seoane bleu clair. C' est ce qu'on appelle bouton d'action flottant. Maintenant, sur la gauche, vous pouvez voir que c'est côté jamais, qui est aussi appelé navigation dessinée. Tiroir de navigation. Knave tirage. Ok, donc c'est sur la gauche. Et si vous appuyez ici sur l'icône du menu hamburger, il va glisser les pieds ici. Maintenant, vous pouvez voir que c'est juste. Navigation. Il va étendre certaines régions. Si vous appuyez quelque part, il va glisser les orteils dans. Mais vous pouvez voir qu'il y a un peu de différence entre les côtés. Jamais. Et en ce moment côté n'ont jamais plus de priorité. Il va prendre tout l'écran. Alors que cette navigation droite, il va quitter la barre d'état. Ok, donc la partie supérieure, qui est la zone la plus sombre, est appelée barre d'état. Ok, maintenant, si vous regardez la structure établie, c'est aussi la même chose. Juste un peu dépensé. On ne va pas concevoir pour tablette. Mais si vous concevez pour tablette et que l'arrêt, vous devez les voir car il y a peu d'options disponibles ici. Comme vous pouvez le voir. Quoi ? Ici et bureau plus. Nous avons une barre d'outils secondaire ou une autre barre d'outils avec l'outil principal, mais parce que nous avons plus d'espace. Donc, cette conception de matériau de conception est vraiment génial. Il est en expansion avec sa taille d' écran. Ok, alors passons à la suivante. Ok, donc vous, agents, vous pouvez voir des diviseurs verticaux. Comment ils l'utilisent Il s'agit d'un diviseur horizontal. Par ici, en haut. C' est un diviseur vertical. Juste demandé ligne grise et ah, séparant la zone gauche de la droite. Ok, donc ils ont dit que si vous voulez créer quelque chose comme ça, vous devez utiliser des espaces blancs plutôt que, vous savez, créer de nombreuses régions différentes. N' essayez pas de créer trop de régions, juste une région et utilisé des espaces blancs pour séparer d'autres éléments, comme les voitures et d'autres choses. Ok, alors parlons maintenant. Barres d'outils. Maintenant, vous avez tous vu les tabourets en haut. Ils ont différents outils comme ceux-ci. Ah, ces icônes. Les trois fléchettes, ce qui est beaucoup plus. J' allais juste te montrer plus d'objets. Et c'est le titre ici. Ces barres d'outils sont appelées barres d'outils et vous pouvez voir qu'il existe de nombreuses variantes pour ces barres d'outils. Il y a des barres d'outils minces, barres d'outils de fournisseur de bits. Et puis il y a des barres d'outils qui se sont détachées. Ils sont pour les affichages de tablette et de bureau. Il s'agit d'une autre barre d'outils appelée barre d'outils de carte. Vous savez, vous pouvez voir ici qu'ils ont utilisé un style de carte hors du chemin interfère pour créer cette barre d'outils. Il s'agit d'une barre d'outils flottante et ceci est détaché. OK, donc je ne veux pas entrer dans ah beaucoup de détails, mais vous devez savoir que ces barres sont dites que c'est la barre d'outils du bas parce que plusieurs fois leur concepteur, ils vont parler à leurs développeurs et je pense ils devraient suivre le même rythme. Ils savent au moins comment appeler différents éléments et comment ils vont interagir . Ok, maintenant l'essentiel, parlons de cet air. Mais c'est très important parce que chaque application va avoir cet Akbar. Et une fois que nous commencerons à concevoir, nous allons examiner ses différentes spécifications. Mais à l'heure actuelle, nous allons examiner quelles sont les différentes parties. Ce sont des icônes d'action. Ce ne sont jamais icône, qui va orteil glisser dans notre tiroir de navigation. Il s'agit de nombreuses icônes pour voir plus d'options de menu. Ceci est tel et ce sont plus d'icônes d'action. Vous pouvez mettre une ou deux icônes ici. Ok, donc voici différentes variations hors des équipes de lumière et d'obscurité. Vous pouvez voir par ici. C' est comme lui. Parle-lui. Vous pouvez également voir l'ombre est un peu plus claire dans notre ici d'un plus sombre ici. Ok, donc il y a encore une chose. Vous pouvez également le rendre transparent. Donc, toute couleur qui est sur l'arrière-plan de votre application sur l'ensemble de l'écran, il va orteil se fondre dans ce. Ce sont donc des options différentes. Ce sont une autre application. Des couleurs abstraites comme j'ai cette couleur bleue et un peu plus foncé bleu pour cette barre d'état. Et nous n'allons pas examiner ces spécifications de conception en ce moment. Ok, maintenant vous pouvez voir ici nous avons des menus. Et vous pouvez voir ce sont des menus. Lorsque vous vous déplacez ici, vous verrez ceci ou le lieu taper sur cette zone. Il s'agit d'une icône de filtre. C' est le filtre de flèche vers le bas. C' est ce qu'on appelle une grève. Et si vous cliquez sur celui-ci, il va montrer ceci. Ok, Donc un peu sur la façon dont cette barre d'état va ressembler et comment vous allez, vous savez, l'utiliser dans le système de conception Android. Ok, Maintenant vous pouvez voir qu'il va être au sommet, et il ihsaa je ne vais pas aller dans les tailles Nous allons aller dans les tailles sont dans DP dans la prochaine leçon. moment, nous allons juste, vous savez, vous savez,examiner quels sont les différents domaines et comment nous pouvons les représenter ou comment ils peuvent varier selon les apparences. Ok, donc je vais descendre maintenant. Vous pouvez voir par ici. Voici une autre couleur basée sur le contenu qu'ils ont pris à partir de cet arrière-plan. C' est un peu transparent, mais c'est noir. 000 20% 0 retour. Ok, donc ils ont Jean. Ils sont en train de changer l'opacité que j'aime vraiment comment ils, vous savez, changer les choses là-dedans sur le système de conception séché ou la conception de matériel Android. Maintenant, vous pouvez voir que nous avons la partie état du stock. Cet état est interdit de prendre la couleur d'ici. Ceci est la barre d'état de vie 70% blanc f f f. Donc, il ya beaucoup de variations que vous avez besoin orteil. Gardez votre esprit ouvert que si vous concevez quelque chose dans la conception de matériel Android, vous pouvez avoir beaucoup de variations pour ce titre de flic. Mais maintenant c'est la barre de navigation Android. Il est présent sur certains hors des téléphones. La plupart des téléphones Google, je suppose. Et il va être sombre et léger. Peu importe. Vous pouvez l'utiliser si vous voulez. Oh, d' accord. Alors parlons du côté. Je ne sais jamais que le côté ne prendra jamais autant d'espace et en laissera un peu plus loin ici. Il va se chevaucher les orteils sur tous les éléments derrière elle. Ok, donc ce sont des exemples différents. Laisse-moi te montrer. C' est l'exemple de la gauche. Jamais. Et voyons quoi ? Son exemple sur le droit maintenant. Ok, donc je vais jouer ça. Donc, c'est en ce moment que vous pouvez voir le glissement à l'intérieur juste dans la zone de contenu. Donc, il est plus sur cette image. Ils ont donc ouvert l'image que vous pouvez mener. Tu peux y retourner. Ok, donc c'est juste en ce moment est en fait agir comme des hommes supplémentaires. Hommes, hommes vous pour cette image. Ok, donc c'est la différence. Si vous vous demandez pourquoi il ya en ce moment, mais à gauche jamais le côté. Jamais. C' est la différence. Cela va prendre tout l'écran, et vous ne pouvez rien faire ici montrant certains hors de l'écran derrière. Mais il va orteil maintenant va prendre tout l'écran, et il va vous montrer plus d'options sur la même zone de contenu. Il va simplement prendre la zone de contenu, pas tout l'écran. Ok, maintenant ce sont des cadres blancs ou des cartes, je suppose. Ok, donc il est juste, hum juste garder à l'esprit que la plupart du contenu sur Android leur système de conception il est 100 conception matérielle. C' est sous la forme de ces cartes, et ils vont être comme ça. Avoir un peu d'ombre. C' est le bouton sur. Et nous avons plusieurs cartes. Prenez un trop autres voitures comme ça et vous pouvez voir ce que le contenu cardé ici et se dilate et s'effondre. Et c'est un concentré leur bar sur mobile et d'autres choses. Donc, ce sont tous les éléments cartes, barres de navigation, état ou barre système, zone de contenu de la barre d'outils principale, barre inférieure. Ok, donc je vais vous donner un autre exemple. Comme je te montre que c'est ah, la barre du bas. Vous pouvez voir ici est la navigation et la navigation, et en haut, vous pouvez voir que nous avons des favoris explorer un compte de la même manière, celui-ci et celui-ci ce sont trois équipes et ce sont essentiellement la navigation du bas qui va être global pour l'ensemble de l'application. Global signifie qu'il va rester. Tenez-vous à ce fond pendant toute l'application ou une partie offerte. Donc, c'est, je pense, tout sur toutes les différentes régions que vous avez étudié toutes les cartes barre d'état Arrêter à une barre contenu de la zone de navigation inférieure gauche jamais ou dessiner pot gauche et navigation droite et action flottante bouton. J' espère que vous avez apprécié cette leçon. Si vous avez des questions à me poser, passons à la prochaine leçon. 12. Comment fonctionne la conception matérielle: Ok, regardons ce qui est l'équipe ou les bases de la conception de matériel Android. Maintenant, cette conception de matériau Android est basée sur l'empilement de papier les uns sur les autres. Maintenant, vous pouvez voir dans ce diagramme sur la droite il y a deux éléments. L' un est ce papier, le livre blanc. Et il y a un autre bouton ou et un papier de forme arrondie sur le dessus. Vous pouvez voir que c'est un excès de Z. Donc, tout sur votre conception de matériau est surélevé avec un accès facile. Ok, donc chaque élément a ah, épaisseur du matériau sur un DP. Ok, donc, comme les gens, les gens ont une épaisseur très légère. Papier très mince, mais il a une certaine épaisseur. Ok, donc du papier et des choses sur l'autre, juste des orteils similaires empilant du papier sur le dessus, l'un de l'autre, comme l'origami. Vous pouvez Vous créez peu de conception ou d'interfaces en mettant différents boutons. Différentes barres d'air sur le dessus. Le papier de base se trouve hors de la base. Tu sais combien plus éloigné ? Un élément est d'un autre va être enlisé dans l'excès de Z. Combien c'est ? Ah, élevé de la base. Ok, Donc différents éléments ont des animations et des ombres différentes, mais en ce moment nous allons parler de ça dans la prochaine leçon sur l'élévation et les ombres. Différentes ombres matérielles. instant, nous devons voir et comprendre. C' est l'excès de l'axe y et les excès chose que combien est une épaisseur hors ? Quelque chose comme vous pouvez voir votre tête ici est un smartphone et c'est la maladie est enlisée dans Z OK, OK,z excès qu'il va prendre Il va avoir quelques trois formes d. Si nous supprimons cet accès facile qu'il est, suffit de faire le ou en deux dimensions. Donc, pour faire cet effet de trois d et ces boutons et ombres, ils utilisent essentiellement deux ombres. Donc nous avons ici, ah, une ombre de la lumière clé une lumière et l'ombre de la lumière ambiante. lumière ambiante signifie que va être la lumière très forte et vous pouvez voir qui ont des ombres douces sur le côté. Et il y a nous avons éclaircir les ombres sombres parce que la lumière est quelque part ici en haut et combinant les deux ils ont cette ombre mixte, qui est fondamentalement ombre android. Ok, donc tout ça fonctionne avec l'axe Z pour que vous puissiez voir ce papier. Est-ce que ce bouton ou cet élément est élevé de cet arrière-plan en utilisant cette ombre. Donc, vous pouvez dire,ils font vous pouvez dire, semblant d'être comme trois éléments D et utilisent l'ombre et cette élévation. Dans la leçon suivante, on va aller aux pieds. Voyez ce qui est différent. Ombres et élévations et eau, différentes élévations pour différents éléments. Ok, donc chaque élément a une altitude différente, combien il est plus élevé et combien il est élevé à partir de la base. Passons donc à la leçon suivante. 13. Ombres matérielles: Ok, maintenant, dans ce est dans, nous allons regarder la conception de matériel Android, ombres et l'élévation et comment ils fonctionnent réellement les uns avec les autres. Ok, Maintenant, avant d'entrer dans plus de détails, vous pouvez aller à cette fille matérielle, vos lignes directrices barre oblique ressources vie slash slash ombres fille CML et non, vous pouvez voir ici nous avons croquis et pour le fichier show. Et vous pouvez également ouvrir ce fichier d'esquisse dans Adobe X'd. Donc, si vous avez un non, soyez extra, vous pouvez utiliser celui-ci. Ok, donc ils doivent ombres l'umbra et la pénombre de l'un est plus sombre. Ombre celui-là. Et celui-ci est plus léger ou doux. Shero et ah, ils ont tous différents, tu sais ? Ah, des lignes directrices pour combien ou combien il va répandre combien il est de l'OPEP, combien de sang il va avoir. Donc, ce sont tous des paramètres différents. Mais nous ne nous en souviendrons pas parce que nous pouvons déjà télécharger ces trois pour un spectacle, classer notre fichier illustrateur ou notre fichier de croquis et les utiliser. Ok, maintenant allons à cet effet d'altitude. D' accord ? Maintenant, l'altitude signifie que combien sur la distance dans l'axe Z est d'un élément à l'autre . Donc, si un élément comme celui-ci est en bas, vous pouvez voir qu'il doit dp élévation. Il a un peu d'ombre et vous pouvez voir qu'il est élevé de cette base. C' est la grande base de l'Eric. Ici, il est de dp élevé de la base. Donc, il a une ombre très douce, pas quelque chose. Quand quelque chose va être plus élevé, il va avoir plus d'ombre et plus étalé sur l'ombre. Ok, donc c'est très naturel. Maintenant, vous pouvez voir ici nous avons Ceci est le diagramme. Ici, nous avons l'axe Z Et si ZX se déplace en haut et que la distance entre ces deux éléments est de 60 p Donc, fondamentalement, l'altitude de celui-ci et celui-ci est de 60. Être élévation signifie que la distance du haut d'un élément ce bas, les deux peur donc celui-ci. Ok, donc la distance entre celui-ci et celui-ci sera l'élévation. Mais combien ? Ce papier d'arrêt est élevé de l'à partir du bas. Ok, donc si vous l'avez fait, vous êtes vous avez deux mains. Il suffit de chevaucher celui en haut et de voir combien les distances entre bâbord hors d'eux. C' est essentiellement l'élévation. Maintenant, vous avez attrapé l'idée hors élévation. Toute cette altitude est contrôlée par l'ombre. Si vous Si quelque chose est plus élevé, il a plus d'ombre répartis autour d'elle et il a plus d'ombre, plus d'ombres plus sombres. C' est tout ce dont nous devons nous souvenir. Et vous pouvez voir. Voici les élévations saisissantes des différents éléments. Maintenant, si quelque chose est plus élevé comme vous pouvez voir l'altitude et DPS 24, cela signifie qu'il sera au sommet de tous les autres éléments. Donc, si des boîtes de dialogue apparaissent ou quelque chose de sélecteur de couleurs apparaît à l' écran, vous ne pouvez rien faire d'autre. Donc, cela va être avoir le plus d'altitude et avoir plus d'ombre arrondie que nous avons Navigation dessiner Rij. Notre feuille de fond modèle de 12 dp est une barre d'action flottante. Vous les avez vus plusieurs fois le cercle plâtré dans et puis nous avons sous-menu. Ensuite, nous avons ce fond. Ce sont des cartes manuelles interdites. Ils ont une DB hors élévation et ensuite nous avons la barre de collation à six boutons d'action flottants. Et puis on a cette collation Abbott. Mais il est fondamentalement partie de statut un peu de staters, que quelque chose a été fait ou votre email ses e-mails ont été supprimés ou quelque chose comme ça . Ensuite, nous avons cette nouvelle indicateur pays rapide telle barre que tout cela, il a trois élévation off. Trois DP. Ensuite, nous avons une carte d'élévation au repos, boutons courus, une élévation arrêtant. Ce sont les boutons qui ont ah, arrêtant signifie qu'ils ne sont pas pressés ou qu'ils ne sont pas touchés. Donc, une fois qu' ils sont pressés, ils vont avoir un effet d'ombre différent. Et c'est l'interrupteur. Il a un dp donc presque n'ont pas d'ombre. Ok, donc ici nous avons le diagramme où vous pouvez voir ce que Ici, 24 ce sont les élévations donc et c'est fondamentalement facile d'accès de bas en haut. Et celui-là est au plus haut. Cela chevauche tout le reste. Cela chevauche tous ces éléments, et cela chevauche tous les éléments en dessous. Donc c'est comme ça que cette élévation et ça hein ? Les ombres de conception de matériel Android fonctionnent maintenant. Vous pouvez voir ici nous avons cette action flottante, mais c'est un très bel exemple. Et puis nous avons ce AARP sont maintenant que vous pouvez voir à la barre est un peu plus bas dans l'altitude, donc il a des ombres plus claires, OK ? Et si vous regardez cette barre supplémentaire flottante, il a plus de propagation et plus de médecin autour d'elle, il a plus de propagation. Donc, il est dans l'axe Z, donc il a plus d'ombre. C' est ainsi que cela va fonctionner. Ensuite, nous avons cette application tiroir Knave sur le côté gauche. Vous pouvez voir ce qu'il a altitude Mawr contenant à la fois le bouton d'action flottant dans une barre. Donc, il se chevauche les deux. Son ombre chevauche tous les éléments derrière elle. Il a une élévation de 16 afin que vous puissiez voir l'action flottante. Mais c'est derrière. Un corps est aussi derrière lui. Voici donc quelques exemples de la façon dont ces ombres vont fonctionner. Ils ont dit que cette action flottante a une bonne ombre parce qu'elle est élevée. Il devrait montrer élevé ici parce que cela vous pouvez voir ce Ah abaaoud à la à l' arrière. Il a aussi un peu d'ombre pour que vous puissiez lire tout cela. Quelles sont les ombres différentes et quelles sont les valeurs différentes. Mais nous ne nous souviendrons pas de tout cela. Vous pouvez voir que nous sommes là pour DP Arresting bouton et appuyez sur State est que ce sera un DP signifie que le bouton va être élevé plus. Une fois que vous appuyez dessus et que vous interagissez avec elle, il va apparaître dans l'axe Z. De même, celui-ci, vous pouvez voir quoi ici ? Une fois que quelque chose est pressé, il aura plus d'altitude et une ombre plus douce. C' est plus haut. Vous pouvez voir que la prostate est le double de l'état de repos. L' état de repos signifie bouton normal qui n'est pas pressé ou dans le trafic et qui interagit avec. Et une fois que vous appuyez dessus, il va orteil, se déplace vers le haut ou vers le bas et a quelques différences d'ombre. Ici, nous avons cette carte de carte est fondamentalement celle-là cette carte d'information et il a reposé . Obligation dévolue. 80 être non, vous pouvez voir qu'il a plus d'ombre parce qu'il est soulevé et puis nous avons ces menus sous-menus . Ils en ont plus. Vous pouvez voir le sous-menu avoir plus d'ombre car il est en haut de ce menu. Ensuite, nous avons ces dialogues. Ils vont être au sommet. Et puis nous avons ce tiroir à pression 16 dp Il a partagé ici sur la droite. C' est la feuille de fond mortelle. C' est ce qu'on appelle. Vous l'avez peut-être vu lorsque vous essayez de partager quelque chose d'une application comme Facebook ou quelque chose comme ça. Oh, notre partager votre photo et essayer de cliquer sur le partage mais il va vous montrer que vous allez partager Gmail. Sortez sur Google ou quoi que ce soit. C' est donc ce qu'on appelle la feuille de fond mortelle. Ensuite, nous avons ces trois nouveaux indicateurs trois dp Il est également bouton et puis nous avons ces pays de code à barres. Vous pouvez voir que c'est une telle barre et il a un mot à dire durable à visser État trois dp sur ce bar est snack-bar. Il s'agit essentiellement d'une action d'une seule ligne. Quelque chose comme cet indicateur dans la barre d'indication 60 p Ensuite, nous avons l'interrupteur. C' est l'interrupteur et il a une élévation dp off. Donc je pense que c'est tout cela. Ah, élévation et ombres. Je vais vous montrer comment j'ai ces ombres. J' ai téléchargé le fichier Io PST et maintenant vous pouvez voir ici nous avons toutes les ombres donc je n'ai pas besoin de me souvenir de tous les paramètres à peut-être trois d p J'ai toutes les ombres avec moi Laissez-moi vous montrer ce sont tous les chemises, ombres sur la droite, vous pouvez voir et nous avons ah, quatre DP. Et il y a essentiellement deux ombres parce que les lumières étaient deux lumières, Il s donc il y a deux ombres portées. L' un est ce 176 et 10 24% qui est Ah, un peu d'ombre légère. Souviens-toi, je crois. Et celui-ci est Sempra, et je ne sais pas si ce sont des mots français, donc je ne les prononce peut-être pas. Droit. Ok, donc c'est ainsi qu'ils ont un effet multiplicateur multiple, parce que ces ombres vont se mélanger ensemble afin que vous puissiez télécharger aller de l'avant et télécharger ces ombres matérielles à partir des ressources. Je pense que je vais prendre en charge tous les liens de ressources afin que vous puissiez les télécharger et expérimenter avec ceux-ci. J' espère que vous avez compris ce concept d'élévation et d'ombre matérielle. Et je veux vraiment que tu apprennes ça parce que je n'ai vu aucun cours ou personne prêchant toutes ces choses différentes. J' ai donc pensé que je devrais faire le cours plus détaillé sur la conception des matériaux, donc j'espère que vous apprécierez la session. Si vous avez des questions à me poser, passons à la prochaine leçon. 14. Nouvelle de la grille Adobe XD et de conception matérielle: arbre. Je vais vous montrer ce qui est le système de grille à huit points et pourquoi la conception Android Mobile ou conception de matériel Google l'utilise. Ok, donc en ce moment je suis dans Adobe Exit E et, ah, vous pouvez créer un nouveau tableau d'art, et nous allons utiliser ce mobile Android, et je vais vous montrer à la fois la grille carrée et la mise en page pour et écrire plus morsures. D' accord ? Non. D' abord, nous allons aller à ce caillé, assurez-vous que vous avez sélectionné ce tableau d'art, et les colonnes allaient utiliser nos six, et des deux côtés allaient laisser la marge de 16 points. C' est donc leur note de base pour la mise en page. Donc six colonnes des deux côtés. 16 marge d'écriture de colonne est 48 espace Qatar entre les différentes colonnes. Est-ce que c'est ? Donc c'est là. En gros. Maintenant, nous allons répliquer ceci en appuyant sur l'art ou la touche d'option. Et maintenant, on va passer à Square. Ok, Donc la taille carrée, vous pouvez utiliser soit l'utiliser parce qu'il y a cupidité est basée sur le système de grille à huit points . Nous allons donc diviser les notes de sa boîte ou de chaque boîte. Cet orteil de traduction de chaque boîte. Huit points sont donc les huit DP. Je suppose que oui maintenant, je vais en utiliser quatre. Maintenant. Pourquoi j'utilise pour Parce qu'ils sont de qualité typographique ou leur ligne de base typographique est lady toe avec cette ligne de base de quatre bases de données. Ok, donc ils utilisent quatre lignes DP orteil, vous savez, aligner leur typographie et séparer la taxe l'une de l'autre ou la distance entre deux lignes dans n'importe quel pont. Ok, alors laissez-moi vous montrer un exemple. Cette zone et je vais taper quelque chose ici avec cette taille de 16 et je vais utiliser euh, Roberto, Roberto, je veux Disons bonjour, ma chère. Ok, donc maintenant tu peux voir leur costume pour la planche. Ok, maintenant, vous pouvez voir si vous regardez ces lettres, elles sont assis sur ces lignes de quatre DP. Ok, donc vous pouvez voir ici que c'est la ligne assise par ici. Ensuite, il y a un écart de près de deux boîtes par ici. Donc, un écart DB entre les deux hors d'eux et alors cette ligne touche également cela en bas. Donc c'est comme ça qu'ils mentent va se asseoir comme ça. Ok, Donc si je vais utiliser 16, même si je vais utiliser 16 points et alors nous allons utiliser 24 qui est là en hauteur couchée. Donc, vous pouvez voir ceci est comment il va orteil ressembler à l'espacement des lignes. Tu as besoin d'orteil Assurez-vous toujours qu'il s'agit d'un multiple sur quatre. Donc, si je passe à 20 ans, il va encore s'asseoir sur les lignes par ici. C' est ainsi que fonctionne leur alignement de texte notre ligne de base de texte. Vous pouvez également utiliser quelque chose comme ceci afin que vous puissiez également déposer des boutons ici sur. Ils vont être traduits à nouveau comme le PDD. Donc, en ce moment, ma taille de balance est 10 dp pleine large et 36 dp haut. Alors assurez-vous que vous utilisiez quelque chose comme ça. Ok, alors nous allons zoomer et voir comment ça ressemble à S O. C'est la grille. Vous pirogues orteils une ligne sur mes années, Vos éléments selon un là-bas, huit DP creed ou quatre pixels DP. Super. Ok, donc c'est fondamentalement quatre représenté que j'utilise Il est égal dans le remorquage. Huit. Ou il est similaire à ADP parce que quatre est un multiple off. Ok, donc nos années 80 multiple de quatre. Donc, ils sont tous les deux quatre est fondamentalement à moitié sur elle. Donc, cela a du sens. OK, donc si vous concevez dans Adobe X T, je pense que vous devriez essayer d'utiliser ce grand cuir carré que celui-ci. Peut-être que celui-ci que vous pouvez utiliser pour la mise en page, mais je laisse aimerait voir en utilisant ce droit Une grille carrée sur carré, taille quatre dp et utiliser l'Android Mobile Art Board Et c'est tout ce dont vous avez besoin. Ok, donc j'espère que vous avez apprécié cette note de mise en page et huit DPP excellent 40 personnes célèbrent et comment je l'ai mis en page dans Adobe X'd. Si vous avez des questions à me poser, passons à la prochaine leçon. 15. Matrices et l'espacement verticale dans le design d'applications Android en Android: Non. Vous avez déjà compris ce qu'est une ligne de grille DP ou un système de courant à huit points et comment conception des matériaux Enright est construite sur elle. Maintenant, nous allons entrer dans plus de détails sur l'espacement vertical, comment différents éléments ont des hauteurs différentes, comment ces hauteurs ont été maintenues et pourquoi cette conception de matériau entier semble unique et élégant quand n'importe quelle application est conçue dedans. Maintenant, tout est basé sur le dimensionnement vertical, les lignes et l'espacement, et tout ce système, il va travailler ensemble avec votre huit points ou un DP cred. Alors commençons. Je vais vous montrer Il s'agit du document que j'ai téléchargé depuis Google Material Design et il est dans Adobe Illustrator. Et maintenant, vous pouvez voir qu'il s'agit de lignes de clés plus mobiles et d'espacement. Maintenant, il y a quelques choses que vous voulez comprendre. ADP est le plus petit bloc ou les quatre DP est la plus petite taille de bloc dans la conception de matériel Android . Maintenant, chaque fois que vous construisez quelque chose, même si vous construisez une maison, il doit y avoir de petits blocs et il doit y avoir des blocs plus grands. Par exemple, toutes vos fenêtres auront la même taille. Donc, c'est un bloc plus grand. Il n'est pas égal à la taille de la brique que vous utilisez. Donc, toutes les briques, ils sont la plus petite taille, qui va être un TBI, par exemple, et, par exemple, la deuxième taille de bloc. Vous voulez utiliser un bloc plus grand, vous voulez utiliser 56 db pour cela ? Donc, dans la conception de matériel Android, si vous regardez ici, fixe, fixe, incrémentielle, déterminer, déterminer avec off structurel vous éléments. Donc surtout les éléments en U. Ils ont leur taille défavorable de 50 60 p, donc ils utilisent cette plus grande pause pour leurs éléments en U. Ensuite, il y a la deuxième chose, qui est la clé de dimensionnement verticale. Maintenant, comment différents éléments seront dimensionnés. Quelle sera la distance entre eux ? Il est construit sur tous ces blocs de différentes tailles. ADP La clé de couleur est celle-ci Une profondeur est la taille 16 dp que 24 48 64 56 70 à 80 un idiot. Donc, toute la conception de matériel android est basée sur ces blocs de construction. Nous avons 123456789 types de briques différentes tailles, et nous allons les utiliser pour construire notre conception de matériel Android. Maintenant, le dimensionnement vertical va aussi aux pieds. Déterminez les tailles de différents éléments. De plus, les marges horizontales vont être ici. Alors je vais te montrer. Laisse-moi juste allumer la taille de la clé ici. Maintenant, vous pouvez voir que j'ai ah activé mes lignes de clés verticales et vous pouvez voir qu'ils montrent essentiellement les marges et les peintures maintenant sur la gauche et la droite. Si vous si je zoom avant, vous pouvez voir à gauche et à droite. Il y a une marge de 16 db des deux côtés. C' est la marge égale et tout le texte qui est ici à gauche. Il est aligné avec 72 dp off distance de la frontière sur le côté gauche. Donc, le texte a un caressage ou une marge de 72 les deux côtés ont 16 dp off marges de chaque côté . Ok, voyons d'autres choses. Vous pouvez voir comment cela va avoir fière allure sur tous les différents appareils. Maintenant, vous pouvez voir par ici. Il y a double marge de 16 et 32 utilisé sur cette application de téléphone où ils ont plus d'icônes ici aligné ici. Donc maintenant, vous pouvez voir qu'il y a deux marges ici 16 et 32. Donc, ils ont donné un peu plus de cheveux marginaux quand il ya un meilleur ni ici. Ils ont donc donné un peu plus d'espacement pour ce contenu à l'intérieur de cette zone ici. D' accord. De même, vous pouvez voir ici. Ceci est le tiroir de navigation, et vous pouvez voir ici nous avons 56 dp taille, qui est une autre taille de brique, notre taille d'élément principal. Et le reste est presque le même. 16. 70 à 16. Une fois que vous comprenez cela, vous pouvez facilement concevoir de superbes APS. Et ce ne sera pas un mystère pour vous que la façon de concevoir en utilisant le concepteur de matériaux Coogan conception de matériaux. Ok, maintenant nous allons revenir à cette clé de taille des particules, et je vais mettre en évidence ce qui est différent. Cachez celle-là, et je vais mettre en évidence cette taille d'encre. Maintenant, si vous regardez ces couleurs, elles vont être présentes ici ou 80 ici. Maintenant, vous pouvez voir que ce rouge était égal à un DP. Donc, une distance latérale dp entre ces deux éléments, alors nous avons huit et 8 16 db et entre nous avons une ligne séparée. Laisse-moi faire ça et te montrer. Vous pouvez voir que vous savez comment l'espacement fonctionne parfaitement. C' est ce qu'on appelle le rythme vertical. Ils ont créé un beau rythme vertical à l'aide de ces lignes clés et de blocs de taille de clés verticaux. Et ah, maintenant, si tu regardes celle-là, c'est violet. Laisse-moi voir. C' est 72 DP en taille à Hyde. C' est vertical avec eux. Donc tout l'est. Le calibrage est en vertical Maintenant c'est Ah, bleu pâle. Voyons voir. Qu' est-ce qu'un bleu pâle bleu pâle est 48 dp. Donc c'est, euh, c'est 40 ans de DP. Donc celui-ci est 48 dp Une couleur bleue tranchante qui est 50 60 p qui est votre barre d'air. Il est en 50 60 p. Donc, si vous avez ce fichier, vous pouvez facilement calculer l'ensemble du système de dimensionnement différent hors conception de matériau et ce sera un morceau de gâteau pour vous. Vous pouvez voir que c'est un peu violet. C' est bleu, alors ceux-ci sont aussi soufflé. Ça veut dire que je pense que c'est une ou deux lignées de tuberculose ici. Ouvrons les marges horizontales maintenant. Ce sont les mêmes que nous avons discuté avant 16 ans. 72. Toutes ces lignes sont 16 dp large et toute cette distance est d'ici à ici Il est 72 db et le texte est aligné sur le 72. Ils sont sur le côté. Ok, Donc j'espère que vous avez apprécié cette leçon et vous avez compris ce que fait cette taille verticale et ce que sont les skis ? Ce sont tous les blocs de construction de différentes tailles pour la conception de matériel Android. Une autre chose que je veux mentionner ici, il y a des boîtes englobantes nées pour chaque élément que vous pouvez voir même si chaque élément est différent ces icônes autour d'elle ou quelque chose comme ça . Mais ils sont la boîte de délimitation, qui est la taille réelle dans cette conception de matériau Android est différente. Donc, c'est 56 par 56 DP. Les cheveux sont le bouton. Et je pense que celui-ci est ah, peut-être 48 dp, je suppose. Et ces icônes sont 2040 personnes allaient parler de ces icônes plus tard dans la leçon suivante . J' espère que vous avez compris cette clé. Lignes verticales, rythme vertical, espacement vertical. Si vous ne savez pas ce qu'est l'élément vertical, j'ai un cours à part entière sur la typographie, la verticale d'entre eux et tout ça. Si tu veux prendre ça, tu peux le prendre. J' espère que vous avez apprécié cette leçon. Passons à la suivante. 16. Les specs d'icônes d'Android pour la conception d'applications Android: dans ce. Écoutez, nous allons parler de boutons, icônes et de tailles cibles tactiles. Et quelles sont les peintures appliquées orteil les icônes sur les appareils Android et la conception matérielle. Maintenant, il y a standard pour n'importe quelle cible tactile parce que vous êtes des icônes et vos boutons, ils seront interactifs. Donc, si quelqu'un va bout tapoter sur eux, ils doivent être égaux orteil leur taille de doigt. Ou au moins, il est plus facile pour eux de taper dessus. Donc, les tailles standard 48 avant l'a. D. B. Et il est basé sur la recherche que la taille du doigt chaque taille de doigt chavire 7 à 10 millimètres. Donc, selon cela, leur taille est presque neuf millimètres écrire 48 dp Donc ils utilisent neuf millimètres pour leur standard. Donc, si vous concevez votre application dans la conception mobile Android ou tout type hors application mobile, vous devriez prendre soin de la taille étoile Stargate pour notre US S. S. Je pense qu'il est un peu différent, mais pour Android il est 48 dp. Alors maintenant, vous pouvez voir sur le côté droit Il y a cette action. Les icônes sont dans l'Anbar et puis nous avons Ah, ici nous avons des zones plus capables avec sont les images que vous pouvez taper sur eux. Et ah, il y a cette icône plus par ici. Ceci est également interactif. Et maintenant vous pouvez voir Laissez-moi vous montrer comment ils utilisent différentes sections ici . Donc c'est ton icône ici ? Il doit décrocher le batteur autour d'elle. Vous pouvez voir la zone blanche. Il a un peu d'espace. Donc, il est fondamentalement de dp encore et encore. C' est ce que vous pouvez voir à nouveau. Il y a presque deux DP de tous les côtés ou peut-être quatre, je suppose. Ensuite, vous pouvez voir autour qu'ils ont plus caresser ou espacer cette zone rose, vous pouvez voir quoi ? Ici. Donc c'est votre icône et de tous les côtés c'est un quatre dp off en attente. Alors gardez cela à l'esprit que si votre icône est 48 dp off size, il doit y avoir si vous concevez Vous êtes un concepteur d'icônes pour Android Mobile Labs. Vos icônes doivent avoir un cahier ou quatre dp de tous les côtés. Vous pouvez voir ce qui touche Il s'agit d'une cible tactile. Donc, dans ce cas, l'icône tailles réelles 40 db Mais ils sont capables taille ou cible cible cible zone cible est 48 dp Maintenant c'est une icône qui est standard petites icônes. Il y a 24 maux de cochons ou 24 trempettes ou DP. Et si tu le regardes, tu peux voir. Mais ils sont ciblés. L sera toujours 48 dp et la distance entre ces outils et les zones. Laisse-moi te montrer. Vous pouvez voir ce que l'on entend chaque icône de point. 40 DP Ce sont détourner nos icônes. J' appelle les petites icônes qu'ils vont être 24 dp Touch Target sera sur les deux sera 48 dips ou DP . Et aussi il ya une chose de plus que la distance entre ces zones capables d'orteil doit être égale à 80 pièce. Donc ADP écart entre eux afin que vous puissiez voir ou entendre, entendre. Nous avons un fossé profond entre eux et encore dans cette section. Nous sommes ici, vous pouvez voir, désaccord et d'accord qu'il y a un plafond d'un DP entre eux. C' est donc leur zone de contact. C' est la cible, et l'écart est un débat entre eux. Pour que cet utilisateur ne manque pas les hommes Mlle, vous savez, Mlle Habit. Je pense que ce serait un petit faux pas et cliquez ailleurs si vous voulez. Si elle veut que les orteils cliquent sur « En désaccord », elle ne finisse pas par taper ici. Donc, nous avons encore ici. La taille des boutons, qui est de 30 60 p, est la hauteur minimale de la charge. C' est la hauteur minimale tout bouton que vous concevez pour et écrire concepteur mobile Android Model design 30 60 p est la hauteur et 48 db est en fait la cible tactile, donc vous devez avoir un peu de rembourrage autour d'elle pour gérer cette taille. Donc tu caresses bluff. Le fardeau devrait être de 48 PDD. Ok, alors encore une chose. Ces icônes ici, ils sont appelés icônes système, leurs icônes Android. Et si vous voulez ces icônes, vous pouvez aller à cela un point matériel io icônes barre oblique. Vous pouvez rechercher n'importe quelle icône ou vous pouvez parcourir toutes ces icônes. suffit de cliquer sur l'un d'eux pour qu'il soit sélectionné et vous pouvez voir en bas vous verrez DP 24 dp 32 db 48. Quelle que soit la taille que vous voulez, vous vouliez en noir ou blanc et choisissez SPG. Je pense que s qui est la meilleure chose si vous voulez P et G ou des formes d'icône qu'il peut générer pour vous. Vous pouvez sélectionner n'importe laquelle de ces icônes. En fait, j'utilise ces icônes dans mon AP dans l'exercice final de cette leçon, alors assurez-vous que vous pouvez télécharger à partir d'eux icônes point ru slash matériel et vous pouvez télécharger ces icônes. Et maintenant je vais aller au bout de celui-ci pour vous montrer que l'état est hors de vos boutons et comment les différents types de fardeaux ont. Donc nous avons un bouton d'action flottant. Il a cette déclaration simple et cela a vraiment suggéré où ils l'ont, il a une ombre d'ID plus répandue . Ensuite, nous avons ce bouton plat. Ceci est arrangé une ligne droite. Donc c'est normal. Mais dans cette zone est une zone cible tactile, c'est à nouveau bouton normal sur. Il y a de l'ombre autour. Ce sont donc deux styles de brevets. Ensuite, nous avons le même bouton, opprimé et désactivé. Maintenant, dans le cas de celui-ci, la prostate aura une bordure arrondie comme cette chemise grise et désactivée aura cette création désactivée mais l'ennuyer. Donc, ce sont deux équipes différentes sombre et légère. Et il y a encore une chose. Ok, maintenant je vais vous montrer un autre type d'icônes qui sont appelées application lanceur. Icônes des icônes de produit de la conception de matériel Google sera conception matérielle et toutes ces icônes que vous pouvez voir c'est la capture d'écran de mon appareil Samsung appareil Android, et vous pouvez voir ici ce sont toutes les icônes qu'ils sont dans 48 DP. J' ai un cours complet sur la création de ces icônes d'application lanceur d'icônes de produit Si vous voulez, vous pouvez concevoir votre propre icône APS là. Si vous faites ce que vous pouvez, consultez ce cours afin que ce sont d'autres icônes. Donc, les icônes réelles, que nous allons utiliser dans notre pomme appelé icônes système et ceux-ci sont appelés icônes de produit. Donc, si vous voulez plus de détails sur différents systèmes de grille et guider leur utilisation pour le développement ces systèmes d'icônes de conception, vous pouvez aller à ce guide de conception vraiment lignes directrices de conception, style et icônes. Je vais lier cela va vous montrer ce lien partager ce lien avec vous, et j'espère que vous avez apprécié cette taille d'icône, tailles boutons et toutes ces choses hors convivialité que combien de cible tactile nous avons besoin ? Si vous avez des questions à me poser, passons à la leçon suivante 17. Tabs matériels: dans cette leçon. Nous allons regarder les dabs hors conception de matériel Android et pourquoi nous les utilisons. Quels sont les différents types de ces coups de couteau ? Et quelles sont les métriques et les spécifications de conception ? Quelles sont les tailles en DB ou dips pour ces étapes ? Ok, alors commençons. Non. D' abord, nous allons voir quels sont les composants des coups de couteau. Ils sont deux types. Il existe deux types d'onglets. L' un des étapes fixes que vous pouvez voir dans cette zone de vendredi, il y a trois onglets et ils ne sont pas à base de plantes à l'école. Donc, si vous avez, comme, ici, quatre ou cinq robinets, alors ils sortiront hors de l'écran et vous pouvez faire défiler entre quatre ou cinq onglets différents. abdos fixes, ils vont être trois. Fixez les robinets et vous pouvez simplement faire défiler entre ces trois, marcher sur eux et déplacer orteil cette section. Maintenant, il y aura des étiquettes d'onglet présentes sur eux. Vous pouvez utiliser n'importe quelle couleur de votre propre marque ou de votre propre site Web, votre propre application, ou de la couleur que vous voulez dans vos onglets mobiles. Et c'est tout. D' accord. Pourquoi on les utilise ? C' est la deuxième question essentiellement les onglets. Ils vont vous aider à regrouper votre contenu et il fournit les moyens d'afficher contenu du groupe. Maintenant, vous pouvez voir qu'il existe différents types d'applications d'onglets. Où vous pouvez appliquer fait et comment vous pouvez appliquer Ceux il ya un sur la gauche, vous pouvez voir par défaut leur barre plus fixé là. Mais c'est un bar. Ce sera le titre paginé ou le titre de votre application. Alors on en a un autre. Une autre application hors qui s'étendait à la barre et fixé à la barre. Vous pouvez voir ici nous avons seulement trois articles. C' est pourquoi ils sont appelés fixes et vous pouvez voir ou entendre. Ensuite, nous avons cette pincée barres d'onglet de contenu de l'école. n'y a pas de bar en haut et juste les trois sections étaient là et ensuite nous avons eu une telle interdiction avec ces foutus bars. Ensuite, nous avons ce sont le rouleau à base de plantes leurs barres. Maintenant, vous pouvez voir que la différence entre les rebelles de vis et fixe est que fixe vont commencer à partir du bord de cette section. Ok, donc bord de votre toile entière ou application Android, et il va commencer à partir de ça. Je pense qu'il va être à près de 72 db d'ici. Vous pouvez voir que cela est aligné correctement avec chacun d'eux. Le texte de ces points Un et le titre de la paix. De même, vous pouvez voir ici nous avons avec des icônes, les mêmes onglets avec des icônes. Et ce sont ceux que nous allons utiliser dans notre conception d'application avec photo shop et Adobe X'd. C' est ce que j'ai utilisé. C' est avec l'icône et le titre ici. Ok, donc chaque coup a le titre, qui va être dans tous les casquettes, toutes les casquettes. Vous pouvez voir les favoris à proximité de trois puisque tous les majuscules. Donc, ces air pour les onglets de bureau, Si vous concevez pour bureau peut-être ou tablette, peut-être que vous pouvez voir ces. Je vais inclure le lien. Ok, maintenant il y a quelques choses que vous devez considérer tout en utilisant ces foutu buzz d'abord est qu' ils vont groupe orteil contenu similaire. Ok, donc si vous êtes familier avec les clients de design, ce qui est que j'ai discuté dans mon expérience utilisateur design pour les grandes écoles, vous pouvez vous voir ici sur le côté gauche Musique, films, livres, jeux. Ce sont donc des catégories hors d'un magasin. Donc, il y a différentes catégories et vous pouvez acheter auprès d'eux. Maintenant, ici du côté droit, cet exemple est un peu faux. Ils ont donc désespéré que vous ne puissiez pas faire quelque chose comme ça. observations d'idiome de profil aident parce qu'ils sont tous différents. Ils sont toutes différentes catégories, donc tu peux voir tes cheveux. Ils sont toutes différentes catégories, Ne pas absolument entre les destinations sont très importantes dans le magasin. Donc, ceux-ci ne sont pas liés les uns aux autres. Ce sont essentiellement le regroupement de ce contenu. Ainsi, les films sont regroupés dans un contenu, une section, un onglet. Donc c'est leur primaire Vous de même ici vous pouvez voir que vous avez juste besoin d'orteil les alliant comme ça. Vous ne pouvez pas les utiliser. Ah, empilés verticalement l'un sur l'autre. Il y a encore une chose. n'y a pas de menu sont le sous leur barre. Vous ne pouvez pas faire quelque chose comme ça. Il n'y a qu'une seule catégorie majeure. Ceci est fondamentalement patrons de conception de navigation eso besoin que vous devez prendre soin d'eux. De même, il y a une autre application que si vous utilisez ah, très grand nom, vous allez utiliser quelque chose comme ça. Nouveaux arrivants et fille Dort. Vous ne pouvez pas utiliser le monde entier comme ça. Et vous pouvez aussi. Vous devez minimiser la taille des quatre. Je pense que les quatre tailles différentes ici. D' accord. D' accord. Donc, c'est tout ce qui est l'onglet fix. Trois éléments que nous avons des onglets différents. Ok, donc c'est ce qu'on veut discuter ici. Spécifications, onglets fixes. D' accord. Maintenant, vous pouvez voir les tailles de robinet. 40 ans DP, qui est une taille de robinet standard que tous les éléments capables où vous devez taper, mais votre doigt Ils doivent être 48 db de hauteur. Ce n'est pas vrai pour les boutons. Les boutons ont 40 30 60 purifiés. Mais ils ont un rembourrage inclus avec eux. Donc, ils vont encore être 48 en gros. Ok, alors vous pouvez voir ce que les cheveux 20 dp sont le rembourrage inférieur de ce texte. Donc, vous devez déplacer votre texte 20 dp de la ligne de fond de ces dabs 12 bp est la marge entre les onglets des deux côtés, les marges droite et gauche va être 12 dp. Et c'est tout ce que je pense. OK, maintenant il y a quelques autres choses comme moi. Ok, donc je veux ce seul orteil parce qu'on va l'utiliser. Donc, vous avez besoin d'orteil obtenir quoi ? En fait, les monuments sont pour ces barres d'onglets avec des icônes. Maintenant, vous pouvez voir ici les ponts inférieurs est 16 db loin du bas. Et il y a un écart de 10 dp off entre cette icône et ce texte pour l'icône. J' annule notre standard 24 dp pour toutes les icônes système comme vous pouvez voir ici. C' est une telle icône. Ceci est plus icône de menu icona. Ils sont tous 24 dp toute la hauteur de ce coup de couteau notre y compris l'icône ici est 72 To. Donc, c'est ce que nous allons, vous savez, utiliser dans notre application. Donc tu as besoin d'orteil. Pensez que quelles sont les spécifications ? Tu dois garder ça à l'esprit. 16 profondeur du bas 10 db sur la distance entre l'icône et celui-ci, nous allons utiliser clients déjà faits et nous allons vous utiliser comme ça. Donc, vous n'avez pas besoin de vous souvenir de tous ces Ne pensez pas que vous allez vous souvenir de tous ces semblables ici coeur. Plus de spécifications. 40 ans DP 24 db 12 BP du bas pour les icônes et quelques autres spécifications que vous pouvez voir ici . Ce sont pour les onglets, qui vont être inscrutables. Danse. Vous pouvez voir votre école de cheveux Onglets à base de plantes ont un 72 D p off marge gauche, qui va orteil aligner ce texte avec celui-ci et vous pouvez voir qu'il est un peu à l'extérieur. La barre jaune est en dehors de celle-ci, donc je pense que ça va être quelque chose comme 56 ou 64 ici. Et ça ressemble à un trou de 16 bébés ici. Donc, voici comment il va jouer à un jeu 20 dp du fond 12 dp 12 db des deux côtés et ah, il y a quelques autres spécifications Vous pouvez les lire ou entendre maximum. Quelle est la taille maximale du DP pour chaque étape à 64 dp Et quel est le minimum ? Ok, donc c'est tout ce que je veux que tu regardes. Tu n'as pas besoin de tout mémoriser. Mais si vous concevez quelque chose de spécifique pour ordinateur de bureau ou tablette, vous devez peut-être les regarder. Ok, donc c'est tout sur les onglets. Quels sont les différents types de correctifs d'onglets et à propos de l'école ? Quelle est une différence distincte entre eux ? L' un est de diviser l'onglet entier en trois. Et l'un commence à partir de, euh, d'ici. D' accord. Donc vous pouvez voir ce qui a frappé. C' est donc la différence majeure. Il y a un peu de différences entre les spécifications. J' espère que vous avez apprécié cette leçon. Passons à la leçon suivante. 18. Taille et des specs dans Google Material Design de Google: dans cette leçon. Je vais vous montrer quelles sont les magiques au Bar ? Parce que l'Abbott allait aux pieds. Prends soin de celui-ci encore et encore. Nous allons concevoir chaque application aura. Presque toutes les applications auraient ceci à la barre en haut. Maintenant, vous pouvez voir qu'on va aller dans les matelas de cette eau. La distance, tout va bien ? Donc, nous avons déjà discuté à 16 pixels Est-ce la marge des deux côtés et 72 est la marge gauche pour notre remplissage pour ce titre ou le texte ? Donc maintenant, vous pouvez voir dans les deux exemple ceci est un peu dépensé et c'est un peu court et barre. Dans les deux cas, la distance de la gauche est de 72 dp et la hauteur de la barre d'air est de 8 56 Il sera toujours 56. Vous pouvez voir que c'est la zone où nous avons ce 56. Et ce sont les icônes 24 db icônes. Et ils ont ce stock à ce point. C' est la cible 48 dp autour d'eux. Vous pouvez voir que ce sont les boîtes bleues ici. Et si tu regardes par ici. Vous pouvez voir à nouveau. Nous avons 16 pages sur la marge gauche pour ces icônes et ah, la literie inférieure pour le texte sera 20. Donc c'est ça. Tu dois le prendre. Jake est mort à l'esprit que votre titre sera 20. Le DP est loin de ce fond. Ok, donc dans ce cas, celui élargi. La hauteur totale de la partie air est de 1 28 dp et dans ce cas il est 50 60. Maintenant, regardons un très bel exemple sur un projet d'application réelle titre du projet Monumental, description de l'aéroport. Maintenant, vous pouvez voir dans cet exemple, il vous montre que la façon dont tout ce système hors ligne et les mesures de matelas minés doivent être utilisées. Donc vous pouvez voir que c'est le 56. C' est un mais alors nous avons ce 80 pour cette zone et il tp yeux utiliser pour le caressage. Maintenant 80 plus huit est égal à 88, ce qui est leur plus grande taille de bloc. Vous pouvez voir ce que je reçois à nouveau, vous pouvez voir le suivant est 72 dp pour cette description de ce projet. Mais encore une fois, ils ont utilisé 16 DP hors paris. Maintenant 72 plus 16 est à nouveau 88 donc ces deux blocs sont 88. Mais ils le sont. Ils ont des distances d'élevage en utilisant les différentes marges et literies autour d'eux en bas, et vous pouvez voir que c'est ainsi qu'ils ont créé cette belle mise en page. Maintenant, vous pouvez voir tout ce système si vous comprenez tout ce système, que la façon dont vous pouvez gérer ces blocs et effacer différents blocs avec des literies et des hauteurs différentes . En utilisant ce système de groupe à huit points et huit lignes clés de points et matelas, vous pouvez créer un beau rythme vertical, et je crée une apparence impressionnante APS. Maintenant, si vous vous demandez quelle est la taille de l'état ? Mais c'est 24 DP. Donc, si j'ai oublié de le mentionner comme barre d'état supérieure où nous avons ce temps des signes de batterie, il a la hauteur de 24 DP. Je pense que c'est tout pour moi. Si vous avez des questions ou des problèmes, vous pouvez me le demander. Donc, vous avez vu dans la leçon suivante 19. Listes en conception matérielle: Ok, maintenant, dans cette leçon, nous allons parler de listes. Vous avez vu ces listes dans votre boîte de réception Gmail et beaucoup d'autres APS, comme vos contacts dans tous ces types de peut-être pas, listes ont le bit égal et ils ont des règles. Vous pouvez voir quoi ici. Et ils appellent une tuile fondamentalement, parce qu'ils vont très dans différentes tailles. Ok, donc si vous avez un contenu plus petit, vous allez utiliser une mosaïque plus petite, et si vous avez un contenu plus grand, vous allez utiliser une taille de pneu plus grande. Donc, ce sont essentiellement des règles que vous pouvez voir ici. Allons directement vers les spécifications et toutes ces différentes tailles. Ok, donc c'est les bases à droite et à gauche. Cet élément de liste, toute votre zone de liste, il va avoir un caressage ou des marges hors 16 et 16 ici, puis le texte, qui est la norme 72 sera l'alignement de la gauche. Il aura 72 dp et ah, la liste des mariages sera 16 des deux côtés. C' est la même chose que vous pouvez voir ici. Ok, donc encore une chose où je veux vraiment que tu sois orteil. Qui est celui-là ? Ok, donc tu peux voir par ici. C' est le marginal supérieur ici pour toute la liste. Donc, il va être huit DP avant de commencer la liste. La hauteur totale de cette liste sera de 48. C' est le minimum. Donc, si vous avez une seule ligne de liste d'éléments où vous avez juste une ligne de texte, vous allez utiliser cette petite tuile qui est 48 et la suivante je vais vous montrer le style suivant. Ok, donc voici la prochaine taille de style, qui va être 56. Donc, si vous vous souvenez dans mes matelas de cours et le rythme vertical, ils ont des styles différents. Pour le 1er 1 était 48 que celui-ci sur 6 56 Et le prochain sera 72. Alors gardez cela à l'esprit que lire en haut il y a un tipi pour toute la liste. Puis ils ont 56 56 56 56 pour tout cela. Maintenant passons à la suivante. Et ici, vous pouvez voir qu'ils ont quelques icônes d'action sur la droite. Donc, le réglage de gauche est le même. Ensuite, nous avons l'icône de la section ici, qui sera 24 dp et l'ensemble de l'élément de la liste unique taille de l'article est 56. taille tactile est de 56 la marge sur les côtés de la carte de cette icône, par exemple, si vous avez une boîte jack ou quelque chose comme ça, il est 16 et 16 des deux côtés. Donc, si vous avez un peu d'action, nous sommes là et laissez-moi passer à la suivante, que nous allons utiliser dans notre conception. Il est à l'élément de ligne et cela va être l'article de la liste sur deux lignes et la taille de la tuile sera 72 Tipis rembourrage et tout est le même. Juste qu'on va utiliser celui-là. Donc, ce sont toutes deux lignes différentes, des éléments de ligne uniques de cette conception de matériau qui sont des éléments de liste appelés cadrans. Leur structure est presque la même. Juste les tailles sont différentes pour différents contenus. Donc, si vous avez ah, grand contenu ou deux lignes, alors vous allez utiliser cette plus grande tuile, qui est 72. C' est la même structure avec une icône 72 taille de tuile, même voir ce que ici maintenant, c'est la liste de trois lignes. Vous pouvez voir que la taille de la tuile est maintenant 88 parce que nous avons plus de contenu, donc nous avons besoin de plus d'espace entre eux. C' est l'exemple ici sur le côté droit. Boîte de réception Gmail. Il utilise un Nikon ici Vous pouvez voir ici et il sera 24 taille 16 au moins de droite et de gauche. Et que les tailles de tuile 88 dp. Donc je pense que nous allons concevoir en utilisant ce 88 dp dans nos conceptions. Et c'est leur mise en page. Comment il est tout disposé sur leur verticale eux sur la typographie est sur une ligne de base de quatre g p. Donc vous pouvez voir qu'ils montrent que 44 vous vivez un pied profond vos cheveux puis, Ah, quatre db ici entre ces deux lignes. Donc je pense qu'ils utilisent quelque chose comme ça. Donc, ils montrent aussi comment le texte est fondamentalement aligné sur leur rythme vertical. Donc, je pense que c'est tout au sujet de ces trois lignes. Deux lignes, listes de lignes simples. Si vous voulez orteil obtenir plus les jours que vous pouvez. Je vais lier cette page ici pour voir l'ensemble des spécifications. Et c'est tout. Si vous, si vous voulez vraiment orteil, voir la grande liste, qui sont en images image bonne liste, que je ne vais pas aller dans tous les détails de cette conception matérielle parce qu'il est de tout grand système. J' espère que je ne vous tuerai pas qui utilise toutes ces spécifications, mais je pense que vous devriez au moins avoir une position à leur sujet ou les regarder. J' espère donc que vous avez apprécié cette leçon de liste. Si vous avez des questions, demandez-moi. Passons à la leçon suivante. 20. Basde Navbar dans le design matériel: Il y a beaucoup de composants hors conception de matériel Android, mais je vais juste regarder un aperçu sur Lee, ceux qui sont Juifs, la plupart du temps dans la plupart de l'abside. Et je les ai vus beaucoup de fois des concepteurs ou des développeurs les utilisant encore et encore. Donc aujourd'hui, je vais parler de navigation en bas Maintenant navigation en bas. Il y a deux ou trois choses que vous devez garder à l'esprit que sur la navigation inférieure, il va fournir l'accès direct à la partie de votre application. Deuxièmement, il y aura 3 à 5 destinations de niveau supérieur, donc il n'y aura que 3 à 5 éléments de navigation de fond que vous ne pouvez pas dépasser de cinq. Alors gardez à l'esprit que 3 à 5 il y a encore une chose que la hauteur de cette navigation inférieure que vous pouvez voir ici C'est celui qui et il doit être 56 db et la taille de l'icône qui est déjà la norme va être 24 par 24 dp. Une autre chose est que le maximum avec off tout off celui-ci hors d'eux, vous pouvez avoir 1 68 db et minimum off. Http Maintenant laissez-moi aller ci-dessous et vous pouvez voir ici. Ici, nous avons barre de navigation inférieure. C' est essentiellement la barre de navigation Android système Mobil et c'est la barre de navigation . Et il va orteils ont suivi l'accès à trois portions favoris à proximité et récente. Ok, donc une autre chose est que le texte avec eux devrait être très court. Alors n'utilisez pas vos favoris de tous les temps ou quelque chose comme ça. Vous devez être très concis. Pourquoi ? En utilisant le texte ici ? Ok, Maintenant, quand nous devrions utiliser cette navigation en bas lorsque vous voulez que votre utilisateur ait accès à n'importe quelle partie de l'abs instantanément le jour sont hors d'importance égale et vous voulez qu'ils y accéder de n'importe où dans l'application vous pouvez avoir cette navigation en bas eso vous pouvez voir ce que ici ? 3 à 5 niveaux supérieurs d'importance similaire. Donc, c'est le but principal de cette partie de la navigation aussi vous pouvez voir ici nous avons quelques exemples plus de cette barre de navigation inférieure fixe. Il y a aussi quand vous essayez d'aller vers le haut ou vers le bas, il va apparaître quand nous allons faire défiler vers le haut. Il y a sur n'importe quelle mission ou laissez-moi vous montrer. Ok, donc à propos des couleurs que vous pouvez les colorer comme ça. Mais n'essayez pas d'utiliser méticuleux comme ça. Si vous avez ah fond coloré pour l'ensemble de l'onglet sont vous pouvez utiliser combat sur le dessus c' est si elle a ah, couleur plus foncée et vous pouvez voir celui-ci est très en blanc pur et les autres icônes, ils sont un peu hors Ah, transparent. Donc peut-être 70% ou 60% transparent et ils sont mélangés dans le fond de celui-ci. C' est ainsi que vous allez l'utiliser ou le concevoir d'une autre façon. Est-ce une barre blanche avec la couleur pour la mise en surbrillance et les autres seront augmentées . Donc ce sont deux styles. Laisse-moi te montrer. Ce sont deux vidéos que vous pouvez voir ou entendre. Ils montrent que ça va apparaître. Une fois que vous faites défiler vers le haut ou vers le bas Ok, donc j'ai défilé vers le bas et de n'importe quel défilement vers le haut, il va apparaître. C' est ainsi que ça va changer les orteils à n'importe quelle minute. Donc, cette conception de matériel android il est très, très spécifique dans l'utilisation et toutes les animations et tout. Et j'adore ce truc à ce sujet. Parce qu'il s'agit de l'animation de fondu croisé effiloché sur la façon dont vous pouvez utiliser ces dabs. Vous pouvez voir quand l'onglet actif est présent. Vous pouvez voir le texte et j'appelle sur le bateau. Montez. Ok, donc l'inactif est au milieu et l'autre monte. Donc, vous pouvez voir ceci est l'animation. C' est pourquoi il a l'air très cool. Parce que les onglets actifs, ils se déplacent vers le haut dans l'air dans la direction. , ok Ok, ok, maintenant nous allons regarder les spécifications de cette navigation en bas. Ceci est fixé un. Il va rester le même ici en incluant l'ensemble de l'application. Et vous pouvez voir la hauteur est de 50 60 p que nous avons déjà discuté. Et maintenant, il y a la question de savoir comment nous allons orteils conçu cette partie. Non, le Deb actif pour cela, vous pouvez voir la distance du bas est de 10 dp et du haut , il est de 60 p pour cette icône. Vous pouvez voir ça. Il est qu'il sera toujours 24 dp parce qu'il est une taille standard des icônes système pour la conception de matériel Android . Et vous pouvez voir maintenant que cette différence entre cet état inactif et cet état actif est les yeux de force Vous pouvez voir les quatre tailles différentes Aussi, vous pouvez voir l'icône est colorée et l'icône est déplacée vers le haut Donc vous pouvez voir ici pour la taille plus grand. Une fois que la taille du téléphone est augmentée, nous avons moins d'espace ici. Donc, ils l'ont déplacé vers le haut de sorte que vous pouvez voir maintenant il a 60 être la literie supérieure marginale, et un état inactif a huit db topping que vous pouvez voir ici est n'importe quelle mission à quoi il ressemble . C' est vraiment cool quand ils d' passentd'un état à un autre. Donc très gentil retour. Si vous ne savez pas ce que sont les commentaires, vous devez voir mon cours de conception d'expérience utilisateur. Quoi qu'il en soit, vous pouvez voir ici est le maximum est un caresser 12 dp des deux côtés. Je pense que c'est standard parmi leur conception d'application 12 db 12 dp des deux côtés et ah, c'est tout. Si vous voulez regarder les autres vues comme les vues de tablette, vous pouvez aller de l'avant et les regarder et aussi vous pouvez voir ici nous avons à nouveau les mêmes événements, la même chose que vous pouvez voir ceci est juste l'icône. Donc, les spécifications un peu différent 16 dp du bas Et c'est à nouveau l'icône avec le texte et il a la même distance d'une chose de plus est que l'icône orteil La distance entre l'icône et le texte est de 60 p Donc c'est une autre chose aussi vous pouvez voir actif vous minimum oiseau 90 db Ceci est avec icône et le texte maximum est allé à celui-ci et maximum actif vous Il pourrait être celui-ci. Ok, donc le mini-membre si vous avez, vous pouvez voir ici nous avons les petits tampons. 123 Ceux-ci sont un peu plus petits, donc le minimum Brit est pour eux. Mais juste l'icône est 56. Donc, si vous envisagez d'utiliser quatre ou cinq par ici, vous devez utiliser ce modèle plutôt que d'utiliser seulement le texte et les icônes à la fois hors d'eux Donc vous pouvez utiliser celui-ci afin qu'ils puissent facilement s'insérer dans cet espace. Donc, c'est tout ce que je pense si vous voulez, afin que vous puissiez aller de l'avant et voir toutes ces spécifications. D' accord. Et maintenant il y a une autre chose que j'aimerais vous montrer. Est-ce une barre de navigation inférieure. Quelle est l'altitude et pourquoi ils utilisent cette altitude ? Tu peux voir quoi ? Ici ? Ici, nous avons snack-bar, bouton d'action flottant et contenu flottant un snack-bar général. Ils ont la même altitude, soit 60 B. Si vous ne connaissez pas l'altitude, vous devriez voir la conférence d'élévation dont j'ai parlé auparavant. L' élévation signifie que combien élevé, Plus élevé il sera dans la hiérarchie sur l'index Z. Ainsi, vous pouvez voir les corps de navigation en bas ADP à piquer sur le bouton d'action flottant barre de collation parce que généralement besoin d'accepter l'accès et aller à différentes parties dans votre application. Ces boîtes ont dit BP parce que ce sera la partie A de votre contenu. Najjar va prendre le dessus de toutes les choses parce qu'il va être 16 dp en altitude. Alors gardez ces choses à l'esprit. C' est un très beau système Off Z index et différentes ombres. Et quel élément se chevauche ? Lequel ? Donc, tout est à propos de la barre de navigation inférieure. Passons à la liste suivante 21. L'en design matériel: Maintenant, on va parler du côté. Jamais ça. Ce sera une conférence très courte. Donc le côté ne va jamais apparaître. Vous appuyez sur cette icône Ah, hamburger ou ici et vous pouvez voir que c'est notre côté. Jamais. Maintenant, il y a peu de matelas et de règles qui vont nous guider sur la taille de ce côté. Mais maintenant, la taille de cette taille maximale sera de 3 20 dp Parce que nous avons besoin d'avoir un peu d' espace pour que les utilisateurs puissent taper et il va disparaître orteils. Donc écran avec la règle simple est écran avec moins 50 60 Soyez donc ils vivent comme 50 60 b ici. Donc, vous pouvez utiliser à nouveau appuyez ou ici et ah, avoir cela a disparu. Donc c'est tout ce que je pense pour garder cela à l'esprit que vous êtes. Si vous utilisiez quelque chose comme celui-ci, vous le dimensionnez correctement. Donc, n'essayez pas de prendre en charge l'ensemble de l'écran afin que les utilisateurs auront des problèmes à revenir ici. Donc, la règle de base est cette 11 chose de plus que vous voulez orteil Considérez ce qui est ici Il va superposer sur tous vos écrans précédents. Il a une élévation de 16 dp. Donc, il va être au sommet de l'ensemble de votre contenu, de votre navigation en bas, de votre navigation en haut, vos dabs. Ou ici, il va orteils. se chevauchent tous. En outre, vous pouvez voir à la barre de bus d'état ici. Quand il se déplace ici, la barre d'état sera au sommet de celui-ci. Et ce sera, ah, ah, une partie transparente et une partie opaque. Donc c'est que ça va arriver une fois que tu sortiras à propos de ce tiroir. Ça va se passer comme ça. Donc, vous pouvez voir que c'est l'arrière-plan. Et il y a un fond sombre sur le dessus qui est multiplié dans ce fond. Donc, il a Ah, un peu de transparence, comme peut-être 30 40% de transparence. Donc je pense que c'est tout au sujet de cette navigation latérale et ah, j'espère que vous avez apprécié cette leçon. Passons à la leçon suivante. 22. Édition typographique que j'utilise dans Adobe XD: nous avons couvert les bases de la couleur et tous les jeux serrés au cours des dernières leçons. Maintenant, nous allons examiner comment la typographie va jouer un rôle et quelles sont les tailles et les tailles j'utilise dans mon application. Maintenant, il y a seulement cinq tailles que j'utilise, qui sont de l'échelle de la typographie de conception de Google Material et le point pris 34 est le titre principal le plus grand titre que j'utilise pour mon nom de titre de mon application sur l' écran avant . Ensuite, j'utilise 20 points pour mon titre sur l'APP, titre de l' application APP dans l'application de conception matérielle et j'utilise le moyen 4 à 8 avec 20 et c'est mon corps texte qui est 16 points régulier Roberto, puis le petit texte Roberto 12 points réguliers et vous pouvez également utiliser moyen ici si vous le souhaitez. Donc ça va ressembler à celui-ci. C' est le cas. Ok, donc c'est une chose, alors j'utilise 14 points pour les liens. C' est aussi un médium pour, donc il est un peu plus chatoyant que la Ford régulière. Donc, ce sont toutes les forces. Je les utilise sur tous les paramètres que j'utilise. J' utilise également 14 points pour le texte plus petit. Certains endroits sur certains endroits. Laissez-moi vous montrer mon design actuel dans Adobe X'd pour vous montrer comment j'utilise toutes ces tailles . Ok, Maintenant vous pouvez voir ici nous avons le design réel et vous pouvez voir ici si je clique sur ce titre. Double-cliquez. C' est 20 roboto moyen. Donc, c'est le titre apt que j'utilise. C' est ah, 14 points moyen parce que ce sont les spécifications de la conception de matériel Google eso ces barres osez. Ils ont tous les casquettes. 14 points moyen. Ensuite, si vous regardez celui-ci, c'est le corps decks moyen 16 points moyen et le texte plus petit. Si vous double-cliquez dessus, c'est Roberto régulier 12 points. Donc aussi ici, vous pouvez voir qu'il est 14 points moyen roboto régulier, et c'est Ah, je pense que ce sont toutes les tailles que j'utilise. Donc, hum, si vous vous déplacez vers l'écran de la famille d'accueil, d' accord. Donc, ici nous avons ce premier écran, je vais zoomer un peu. D' accord. Maintenant, vous pouvez voir ici nous avons le plein écran et ce téléphone est fondamentalement 34 agonie supplémentaire audacieuse . Et c'est toute la taille du téléphone que j'utilise. C' est à nouveau 16 points pour les piles champs que vous pouvez voir ou entendre 16 points Roberto régulière . Donc fondamentalement 16 points est mon corps formé et il est principalement utilisé sur la plupart des endroits sur les boutons ici. Et c'est encore une fois le petit téléphone, qui est 12 frontière régulière 12. Et c'est ainsi que vous allez créer ces typographies impressionnantes, différents éléments. Ils vont être superbes ensemble parce qu'il faut créer une hiérarchie typographique . La typographie avait notre clé ici. Certaines choses doivent être plus grandes avec l'importance, et certaines choses doivent être plus petites, avec moins qui sont moins importantes. Donc, c'est tout au sujet de cette typographie et de la façon dont je l'utilise dans mon application. Alors à bientôt dans la section suivante et ah, nous allons concevoir une création à la recherche 23. Réglement des couleurs dans la conception matérielle 2.0: Maintenant, si vous voulez être un grand designer, il n'y a que deux choses que vous devez maîtriser. L' un est la typographie et le second est le schéma de couleurs. Maintenant, si vous voulez construire un grand schéma de couleurs hors conception de matériau, vous devez le comprendre. Et il y a peu de bases et il y a peu de principes que vous devez suivre. Et votre schéma de couleurs sera génial. Ok, donc voici deux choses ou quelques choses que je vais te donner. D' accord. Donc, pour tout bon schéma de couleurs, je pense que tu as juste besoin de nous tuer. Et si vous sélectionnez ces deux tueurs créer, vous pouvez les très. Vous pouvez ajouter quelques variantes claires et sombres de cette construction de l'orteil fille apparaît. Schéma, Schéma de couleurs. Maintenant, ici, vous pouvez voir ceci est la palette de conception de matériaux et ils ont montré que c'est votre couleur primaire, qui va être au-dessus de la couleur principale. Et c'est la deuxième régulière. Maintenant, vous pouvez voir le Mikola premier qu'ils ont sélectionné au milieu. Il n'est pas trop clair, pas sombre. Et le second régulier qu'ils ont sélectionné, il va être un peu du côté plus léger, il y a deux autres choses que vous devez voir. Si vous regardez de près cela, soyez primaire. Il est écrit invitation. Et si vous regardez le secondaire, il est écrit avec la couleur noire. Maintenant, ce que cela signifie, c'est que cela signifie que le rapport de contraste entre le texte et l'arrière-plan . Ici vous pouvez voir le texte et l'arrière-plan il Le rapport de contraste est créé. Il sera facilement visible et lisible. Donc ce sont quelques choses que vous devez garder à l'esprit. Ce sont des paramètres différents pour la même couleur. claires, sombres, des nuances plus claires. Sur Dhere, nous avons des parts plus légères et des boucliers plus sombres et ternes. Nous allons passer sur orteil palette de couleurs réelle où ils vous montrent toutes les instructions. D' accord. Maintenant, si vous comprenez ce graphique ou ce schéma de décoloration, vous pouvez créer n'importe quel jeu de couleurs avec votre conception de matériau ou la conception d'application Enright ou tout autre AB. Maintenant, vous pouvez voir ici que nous avons deux tueurs. C' est notre premier. Irrégulier. Cette unité et c'est fini. Deuxième régulier. Maintenant, vous pouvez voir que c'est la couleur primaire sur la gauche. Ensuite, nous avons la variante principale, qui est une couleur plus foncée, que nous allons utiliser pour nos barres d'état et alimenter les éléments que nous avons ici. Ah, très lumière partagée sur la variante primaire. Ici, nous avons moins saturé. Nous avons er très local et il est un peu sur le côté vital ou le côté léger. Ok, alors nous avons cette deuxième régulière très nette et la seconde Revere Ian un peu plus foncée. Donc, en fait, ils utilisent juste deux couleurs. Et ce sont la variance de ces vraies couleurs. Ok, donc c'est une chose. D' accord ? Maintenant, la deuxième chose est que la couleur que vous allez orteil utiliser comme un texte sur ces couleurs. Vous pouvez voir sur les deux couleurs plus foncées ou plus nettes. Ils utilisent le blanc comme texte et sur toutes ces couleurs ils utilisent le noir. Ok, donc ce que ça veut dire, c'est que tu regardes en bas sur les 80 dernières années. Ici, sur primaire, sur secondaire, sur fond, sur surface, sur lui. Cela montre essentiellement quelle couleur nous allons utiliser sur quel fond ou quelle couleur Primerica ou donc s'il utilisait des produits chimiques, Comme vous pouvez le voir sur les moyens primaires que nous allons utiliser la couleur blanche. Vous pouvez voir ici sur la prime. Mikola. Donc toutes les variantes de ces couleurs primaires que ces deux villians vont utiliser cette valeur f f f f sur secondaire. Vous pouvez voir que ce sont deux rébellions secondaires et deuxièmes qui utilisaient le noir. C' est sur la deuxième reste sur secondaire. Vous allez utiliser le noir un peu sur n'importe quelle seconde régulière à l'entrée. Nous allons utiliser F f f parce que chez local est rouge vif Donc, nous allons utiliser la couleur blanche sur ce Vous pouvez voir ou entendre qu'ils utilisent vital ou il et sur la surface sur la surface signifie tous les arrière-plans utilisés dans la conception du matériau. Donc, si votre application a un arrière-plan et que le contenu défile sur cet arrière-plan, il va s'appeler surface. Donc naturellement, la surface est essentiellement blanche sur tous les modèles et matériaux et le fond va être Oops. OK, donc la surface est essentiellement vos cartes. Donc, si vous avez des gardes de conception de matériaux qui coulent, je vais vous montrer dans une seconde. Donc, toutes les voitures, toutes les informations sur le dessus de votre arrière-plan, va enregistrer surface est fondamentalement vous êtes toutes les cartes d'information ou tout, um, um, blocs d'information sur votre conception de matériel d'application mobile application. Donc, ils vont être blancs là où ils sont dus par défaut, leur blanc Aussi, l'arrière-plan est blanc et ils disent que sur la surface, nous allons utiliser cette couleur comme texte sur l'arrière-plan. On va utiliser cette couleur. Donc, fondamentalement, leur idée principale derrière tout ce schéma de couleurs est le rapport de contraste. Ainsi, vous pouvez voir qu'ils conservent un bon rapport de contraste entre le texte et l'arrière-plan . C' est donc leur but principal derrière tous ces schémas de couleurs. Non, Si nous regardons ces jeux de couleurs, vous pouvez voir qu'il s'agit de la couleur primaire et ils montrent comment vous pouvez faire un jeu de couleurs différent en utilisant ces acres principaux. Ok, donc ceci est un exemple Ceci est un autre exemple où ils utilisent la troisième lumière partagée sur la même Primerica tire parti de cette publication d'une couleur de lumière et voyons l'interaction ce primaire et second habitués. Vous pouvez voir ici nous avons primaire dans la deuxième primaire sombre pour la barre d'état et puis c'est fort abondant. Donc, vous pouvez voir maintenant il est à l'air grand parce que nous avons plus de couleurs et voyons ici son exemple. Nous avons plus de couleurs ici, donc une couleur, qui est notre deuxième régulièrement, va être pour nos actions primaires. Ici, nous avons l'éditeur là-bas montrant comment vous pouvez utiliser d'autres. Et c'est ainsi que l'autre couleur est utilisée et que la couleur on peut voir la couleur on est blanche . Vous pouvez voir sur éditer Combat sur l'arrière-plan. C' est le fond blanc. C' est notre, euh, vous pouvez voir la carte. C' est la carte élevée. Il a de l'ombre. Il est également blanc, et la couleur qu'il utilise est noir. C' est ainsi que cela montre que c'est l'accessibilité. Donc, une fois que vous passez à la teinte plus claire, vous allez utiliser l'alerte noire pour maintenir le rapport de contraste entre l'arrière-plan et la couleur de premier plan. D' accord. Maintenant, si vous voulez vérifier le rapport de contraste entre effondré, vous pouvez vérifier avec cet outil de rapport de contraste en ligne, et je pense qu'il est en contraste avec effectivement émis ou calme. Et vous pouvez utiliser les couleurs ici comme vous pouvez le voir. J' ai ajouté faire des tueurs à partir d'un schéma de couleurs. L' un est ces deux e. Dewey pour le texte. Et c'est pour l'arrière-plan et vous pouvez voir ici que nous avons un bon problème de contraste. Il doit être au-dessus de quatre. C' est ainsi que vous pouvez vérifier vos rapports de contraste. Maintenant, je vais vous montrer très vieille palette de conception de matériel de vote, qui a été apporté en 2000 et 14. Et ce sont les principaux tueurs de base pour tous ces granulés. Maintenant, vous pouvez utiliser dans le matériau conçu pour pointer ou qui est la dernière version. Vous pouvez associer votre application à votre couleur personnalisée afin que vous n'ayez pas besoin de limiter vos sites Web ou notre conception de matériel Android à l'aide de cette palette de couleurs. Maintenant, dans la leçon moins, nous allons voir l'outil de couleur, qui est donné par la conception de matériel Android. Alors passons à l'écoute suivante. 24. Outils de couleurs de Google matériels en ligne: Ok, maintenant là-dedans. Ecoute, je vais parler de cette garantie de conception de matériaux, et c'est comme ça qu'on peut l'utiliser. Et il est en ligne orteil par conception matérielle. Et vous pouvez voir que c'est leur palais. Et ils ont le violet rayé et le violet indigo bleu clair Gussie sur. Donc, ils ont les couleurs spécifiques. Donc, comment vous pouvez utiliser ceci est d'abord cliquer sur ce primaire, et vous pouvez voir ici, j'ai créé certains des autres schémas, Donc, cliquez sur le primaire et sélectionnez votre particulier. Donc, vous pouvez voir maintenant que j'ai sélectionné cette couleur primaire au milieu de ce jeu de couleurs, vous pouvez également utiliser celui-ci. Ok, donc c'est ma couleur primaire. Si bien. Ensuite, cliquez sur le secondaire et ah, sélectionnons celui-ci comme ma deuxième régulière. Ou peut-être celle-là. Oups. Je n'aime pas celui-là, alors je vais passer à celui-ci. Non, sélectionnons quelque chose. Du bourbon. Peut-être un violet comme. Ok, donc peu importe les couleurs que vous choisissez, je vais aller avec cette couleur jaune, et vous pouvez voir maintenant c'est un beau jeu de couleurs avec ce rouge et jaune et il est un peu hors Pincus partagé. Donc, c'est comme ça que vous pouvez créer. Et cela va vous montrer certains des problèmes d'accessibilité comme vous pouvez voir ces différents écrans, comment vos onglets vont ressembler, et c'est à ça que le texte et d'autres éléments vont ressembler. C' est votre barre latérale. Jamais. Ce sont vos gardes de texte. Et voici la liste, je crois. Et c'est ainsi que si vous passez à cette accessibilité, vous pouvez voir qu'il va vous montrer que le texte noir n'est pas visible illisible sur celui-ci, aussi le noir. C' est pourquoi le test n'est pas admissible, non admissible. Donc ce sont quelques problèmes, et je pense qu'ils le seront parce que chaque couleur n'est pas visible sur toutes les autres couleurs. Donc, vous devez sélectionner soit noir, soit via du texte pour le but de lisibilité que vous pouvez voir ici. Ils sont tous noirs partagés, donc ils sont vraiment visibles sur celui-ci, et ce sont deux blancs, et c'est une autre chemise légère, comme partagée. Il va utiliser du noir. Donc, c'est vous pouvez, comment vous pouvez construire votre jeu de couleurs et aussi, vous pouvez l'exporter. Toe et Reid sont US ou tribunal, Ben. Je ne sais pas grand-chose à ce sujet parce que je pense qu'il va être dans le dossier d'examen matériel, mais je ne suis pas sûr que vos quartiers ou développeurs en savent plus à ce sujet. En outre, si vous allez dans cet onglet personnalisé, vous pouvez sélectionner n'importe quelle couleur que vous aimez. Par exemple, si je veux utiliser quelque chose comme ça pour la deuxième régulière et pour la couleur primaire, je veux quelque chose, euh, comme ça. D' accord. Donc, vous pouvez sélectionner n'importe quelle couleur personnalisée que vous voulez, alors laissez-moi revenir en arrière et voir à quoi ressemblent mes couleurs et mes articles. Donc secondaire est un gros ennuyeux. Donc je vais le déplacer quelque part. Donc maintenant, vous pouvez voir que j'ai sélectionné les deux couleurs personnalisées pour ma couleur primaire et secondaire. Je n'aime vraiment pas expérimenter dans cet outil. Je ne suis pas sûr, mais en tant que designer, j'aime ma boutique photo. Ou peut-être Adobe X'd où je peux expérimenter moi-même avec des rapports de contraste et des combinaisons de couleurs. Donc, c'est juste pour donner une idée que comment votre application va ressembler maintenant je vais passer à mon o B x d Mais je vais vous montrer comment j'ai expérimenté ces jeux de couleurs . Maintenant, vous pouvez voir ici dans mon adobe x t j'ai ce jeu de couleurs primaires et quelques combinaisons suivantes étaient ici. J' utilise à nouveau un téléphone pour le titre de cette application et Roberto pour tous les autres endroits C'est le style de lien 14 points, 18 points pour le texte de création et maintenant vous pouvez voir ces autres couleurs pour le gris. Ceci est le grand tueur Ceci est une couleur de texte primaire Il n'est pas plein noir il est de manger pour manger, manger et vous pouvez voir ici Si vous regardez de près, il y a une ligne noire sur ce droit un cercle et Thies, J'ai utilisé comme mon statut est ceci est la teinte plus foncée et j'utilise la couleur claire juste pour améliorer l'accessibilité. De même, ici, j'utilise le starker partagé sur celui-ci comme ma barre d'état. C' est ma couleur primaire. C' est ma deuxième nuance adulte régulière pour la Grande-Bretagne sur la même deuxième régulière. Ah, et j'utilise vital où ça et ah, l'accessibilité craint vraiment pour celui-là, mais je pense que c'est assez visible. Donc je suis sur la base en me basant sur mes yeux. Ok, donc c'est la couleur de mes liens. Et c'est ma couleur d'erreur. Maintenant, vous pouvez voir que c'est comme ça que j'expérimente en construisant le schéma Michael. Maintenant, si vous regardez ça, ce sont essentiellement des grâces bleues. Ils ne sont pas pure émaillée crée Ils sont construits à partir de cette couleur primaire. Et vous pouvez aussi voir ce sculler si je vais à celui-ci une circulaire. Je l'ai construit à partir de cette couleur bleue. Donc, si vous cliquez sur cette couleur bleue et que vous vous déplacez jusqu'à la normale, vous allez créer un autre régulier pour ce jeu de couleurs. Ok, donc c'est comme ça que j'ai réussi à créer cette nuance plus foncée pour d'autres états . Encore une fois. La couleur de l'ONU pour ces autres Etats sera ce blanc comme celui-ci. Et ah, c'est tout. Je pense que vous pouvez comprendre comment j'ai créé ce jeu de couleurs. Je vais partager ce fichier avec vous, alors ne vous inquiétez pas. Vous pouvez l'ouvrir dans adobe X t. Je n'ai pas de fichier pour la boutique, mais je pense que je vais dans l'aperçu de l'image tuée de celui-ci, donc vous pouvez vous rapporter à cela. Donc, c'est tout au sujet de ces schémas de couleurs et comment vous pouvez utiliser différents outils et comment vous pouvez expérimenter dans votre pour la boutique et les outils supplémentaires adobe. Si vous avez la compréhension de base sur les couleurs et les couleurs primaires et secondaires, vous pouvez créer n'importe quel jeu de couleurs. J' espère que ces leçons vous aideront. Vous êtes beaucoup sur, et si vous avez des questions à me poser, passons à la prochaine leçon. 25. Le kit UI matériel pour Adobe XD: Non. Nous allons utiliser Adobe X T pour créer la conception matérielle et la conception de mon application. Et avant que nous commencions à le faire, nous allons télécharger quelques ressources ou des kits vous, que nous allons utiliser pour développer rapidement ce design. Ok, donc maintenant, comme vous le savez, ce matériel Android conçu pour pointer ou version plus récente du design original a été perdu. Eso Il y a quelques autocollants pousses qui sont manquants. Je vais vous montrer ce que vous devez télécharger. Vous devez télécharger cet android. Est-ce que je achète une grande histoire simple A. C'est la joie impressionnante que vous pouvez télécharger. Ensuite, il y a cette feuille d'autocollant composants qui étaient présents avant ce matériau android conçu pour pointer. Oh, et maintenant il n'est pas disponible. Mais je vais partager le lien Ma conduite google afin que vous puissiez télécharger celui-ci principalement. Nous allons utiliser celui-ci et lire votre g y par simple balade. Toi. Laissez-moi vous montrer où vous pouvez le télécharger. Matériau conçu pour obtenir point com slash et droite le chemin. C' est par grand studio simple et vous pouvez télécharger Adobe X t figure pour la boutique CC Onda sketch 40 toe 4.2 ou 42. C' est que vous pouvez entendre que vous pouvez télécharger. Et une fois que vous avez téléchargé ceci, laissez-moi vous montrer que c'est un très gros um beaucoup de fichiers. Vous pouvez télécharger la division X si vous voulez orteil. Vous pouvez également télécharger le pour les acheteurs et si vous voulez, Mais nous allons avoir besoin de celui-ci. Donc, une fois que vous aurez téléchargé et extrait ces fichiers, vous aurez ce fichier. Et Reggie, pourquoi ? Par les ruisseaux et pastoralement ? Si je double-clique et l'ouvre, je vais vous montrer qu'il a tous les composants, même la feuille d'autocollants et tout ce qu'il contient. Donc on n'a pas besoin de la seconde. Personne ne tête. Laisse-moi zoomer. Et maintenant, vous pouvez voir en haut. Ils ont tous les composants ici. Gardes, différents éléments de menu, menus étendus, différentes barres d'air, différents onglets sur différentes côtes ou appelez-les. Ok, donc c'est tout ce qu'il nous faut. Il suffit de télécharger celui-ci, et nous allons utiliser ces composants orteil, faites-les glisser sur nos écrans et copiez-les et utilisez-les pour créer un design impressionnant qui est celui-ci. Ok, donc, euh, commençons et assurez-vous que vous téléchargez tout ça. y a aussi Ily a aussiune autre chose que nous allons utiliser. Je vais utiliser les bibliothèques CC ouvertes par les bibliothèques cloud par adobe. Et ce que vous pouvez faire ici, c'est que j'ai généré ça dans ma boutique photo. Fondamentalement cette bibliothèque de ville. Si vous ne voulez pas l'utiliser, assurez-vous que vous avez créé tout ce jeu de couleurs avant de commencer à concevoir quoi que ce soit. Ok, donc ce que tu vas faire, c'est que tu vas aller aux pieds. Laissez-moi vous montrer le chemin. Donc, dans la leçon suivante, nous allons créer le premier modèle et je vais vous montrer comment vous pouvez utiliser toutes ces couleurs et créer le jeu de couleurs avant de commencer sur cette conception. Passons donc à la leçon suivante. 26. ♥ Électronique Partie 1 - Application d'Android médicale: avant de commencer à concevoir dans et plus d'un x t. Je vais vous dire quelques choses qui sont très nécessaires. Le premier est qu'Adobe Extra est un vecteur. Donc, dans Adobe X assurez-vous que vous concevez dans Vanek. Donc, quelle que soit la taille de votre tableau d'art sera de 3 60 par 6 40 db et c'est en fait dans les débats. Donc, chaque monument est tel qu'il est, comme spécifié dans la conception de matériel Android. Donc, vous n'avez pas besoin de vous soucier de le convertir en sont multiplié deux ou trois X si vous utilisez pour la boutique. C' est ainsi que nous allons commencer nos conceptions. Donc, je vais créer un nouveau fichier et cliquez ici et nous avons ce clic mobile android dessus et vous pouvez voir ici nous avons ce fichier. C' est notre tableau d'art de départ. Vous pouvez voir ici que nous avons le tableau d'art. Si vous ne savez pas grand-chose sur Adobe, Ecstasy devrait suivre mon cours, qui est un cours de niveau infirmier à expert pour Adobe X'd, une personne non b x d conçu prototype, je veux dire, a collaboré avec qui est le nom ou le titre de ce cours. Donc, d'abord, nous allons créer notre écran de connexion. Il s'agit donc d'un écran de connexion. Il est de 3 60 par 6 40 trempettes ou DP et notre couleur de remplissage ou la couleur de fond est combat. Nous n'en avons pas besoin et beaucoup dehors. Si vous le souhaitez, vous pouvez utiliser la disposition de la grille carrée, qui va orteil ont dessus. Taille huit. Vous pouvez l'utiliser si vous voulez. Oh, celui-là. Vous pouvez utiliser quelque chose comme ça si vous voulez, mais maintenant je vais le cacher. D' abord, nous avons besoin de nos antécédents ici. Nous allons donc faire glisser notre image d'arrière-plan de notre dossier d'actifs. Donc, ici, nous avons notre dossier d'actifs. Faites glisser cette image d'arrière-plan ici et passons à celle-ci et déposez-la ici comme ça. Ok, donc on va utiliser quelque chose comme ça. Rendons-le un peu plus grand. D' accord ? Maintenant, ce que nous allons faire, c'est nous allons superposer un rectangle ici qui va à la même taille de ce tableau d'art. Allons en dehors de la frontière autour de lui, appuyez sur TV et sélectionné, et nous allons utiliser ce lecteur d'arrière-plan. Donc les vallées d'éblouissement de Bagram seront cinq, pas l'opacité. Quoi ? Celle-là ? Je vais utiliser cinq par ici. Oups. Je ne suis pas sûr de ce que son problème avec cela. Il suffit de cliquer une fois que cinq va être montant. La luminosité va être de huit, et l'opacité va être de 30%. Nous avons donc besoin de quelque chose comme ça, ce qui est un peu clair parce que notre texte devrait être assez visible ici . Donc c'est notre expérience maintenant. Vous pouvez les sélectionner tous les deux, et je pense qu'on devrait les verrouiller pour ne pas les déplacer accidentellement ici. Ok, maintenant on va glisser notre logo dans notre dossier. Ça a traîné le logo et le déposer ici. C' est très grand. La taille que je vais utiliser est de 1 20 dp Oops. Wonder et PIB taille de cette taille. Je vais utiliser ici. Alignons-le au milieu et à partir du haut. Il va faire 72 plongeons sur la pièce. Maintenant, nous allons utiliser un texte, ce qui va être agonie. Donc, nous allons changer orteil agonie GP va Qui est ok Donc nous allons changer enceinte à nouveau et la taille va être 6 34 p. T. T. Donc, c'est la même taille que c'est et planche supplémentaire. Nous avons donc notre texte. Non, nous allons utiliser du texte pour la deuxième ligne. Je vais traîner un truc comme ça et on va les orteils. Copiez ce texte à partir d'ici. Il y a des vêtements, des dossiers supplémentaires. Ok, donc voici notre texte de l'écran de connexion. Essayons de le faire glisser dessus, voir ce qui se passe. Faisons-le maintenant. Ok, donc notre texte Israel ici, changeons l'orteil de force Roberto Voter régulièrement. Et ça va être 14 points. Quelque chose comme ça. Donc je vais utiliser comme ça. Donc je pense que ça vient de copier la première ligne. Donc nous devons copier le reste de la ligne centrale de vous. Appuyez sur V. Nous allons à nouveau l'aligner. Tu sais ça So 15. 15 maintenant dans un o b x d. Vous allez appuyer sur la touche d'option Artur. Donc, si vous voulez voir les distances entre deux éléments, il est donc sept. Je vais y arriver. Huit ici plonge la différence entre les acheter. Maintenant, nous allons glisser un peu sur les champs de notre kit conçu. Nous en avons besoin. Donc je ces que j'ai créé personnalisé Lee. Alors je me suis créé moi-même. Mais maintenant, je vais le traîner d'Ana. Tu aimes ça ? Nous avons téléchargé. Alors ouvrons ça. Est-ce que je comprends que c'est un seau. Trouvons que ces champs de texte sont longs et frais. Donc, ici, nous avons les craintes d'entrée qui zooment. Ok, c'est le champ d'entrée actif et c'est inactif. Donc, nous devons des champs de texte, du texte caché. On a besoin de se concentrer un. Et nous avons besoin de celui-ci Nous avons besoin de ceux-ci Fondamentalement, nous pourrions aussi avoir besoin de celui-ci qui est centré comme celui-ci, parce que dans certains endroits, nous nous sentons fondamentalement sur le champ de texte. Alors copions tout ça. Allez, tu vois ? Et on va aller à notre dossier avec des cheveux comme ça. Ce sont donc des tailles standard, donc nous n'avons pas besoin de nous soucier des différentes mises en page et tout ce qui est fou. Ok, donc nous y avons, nous allons le nommer Boss Word. Et ça va être mon mot de passe Ok, donc on n'a pas besoin de ça ou d'ici. D' accord ? Donc, je vais enlever ce Dilute. Cela a aussi discuté, monsieur, nous allons l'avoir juste ici et, euh, euh, couleurs. Nous allons les traiter plus tard parce que nous allons avoir des couleurs générées ici parce que nous avons besoin de toutes les couleurs de cette bibliothèque CC que j'ai créée dans Vidin pour la boutique. C' est notre bibliothèque de la ville. Donc maintenant, nous allons faire est que je vais sélectionner ce déménagement à la bibliothèque de la ville, cliquez sur ce texte noir. C' est à Ito ego e Non. En plus de cela, vous pouvez utiliser de la même manière Vous pouvez faire la même chose, est-ce pas ? Cliquez sur et ajoutez de la couleur aux ressources. Donc, si vous allez orteil cette zone SX, vous pouvez voir maintenant cette couleur de texte a été ajoutée. Maintenant, si on y repart, orteil, on va comme celui-là. Et si nous repartons, nous avons une autre couleur, qui est le statut de gris bleu. Je pense que c'est pour cette texture. Vous pouvez utiliser ce moyen bleu gris. Donc maintenant cette usure de couleur va à nouveau l'ajouter ici. Vous pouvez le faire manuellement. Vous pouvez simplement en créer quelques-uns. La connexion est ici avec la même couleur. Ok, Donc, si vous savez quelle est la couleur, par exemple, à Ito Ito, vous pouvez utiliser qui a une valeur décimale. C' est la méthode manuelle que je vais vous montrer. OK, donc tu peux utiliser quelque chose comme ça. Donc non, c'est cette couleur que vous pouvez faire un clic droit et l'article en ce moment. Il est déjà ajouté. Donc, il ne me montre pas l'option. Ainsi, vous pouvez créer différentes boîtes hors qui sont créer votre ensemble de couleurs avant commencer cette conception et ajouté à vos couleurs. Et puis vous pouvez simplement cliquer ici et appliquer ce Philip plutôt que d'utiliser la bibliothèque CC. Donc, si vous ne savez pas comment les bibliothèques U C ou les démarrer, vous pouvez utiliser quelque chose comme ça. Ok, donc c'est fait. C' est notre email. Ok, donc ça va être un courrier électronique. Quelque chose comme ça. Ok, donc c'est désactivé. Sens que je vais aux pieds, utilise celui-ci plutôt que celui-là. Ou peut-être qu'on peut utiliser ce mot de passe un et quatre. On va utiliser cette maladie. D' accord. Laisse-le partir. Celle-là. Nous avons fondamentalement à la nourriture. Et la couleur de cette barre va être le tueur, qui est notre couleur active, deuxième réactive. Donc c'est notre couleur active qui détruit que cette partie est notre ici. Passons à ces couches et voyons avec la marque de type je vais orteil l'espère ici. Quelque chose comme ça, et il va utiliser la même couleur. Donc, d'abord rejette, ajoutez cette couleur à nos actifs et déplacez les asserts et sélectionnez celui-ci et utilisez cette couleur. Ok, donc nous avons sur le champ de texte prêt. Il y a une chose qui n'est pas présent parce qu'il est ancienne version de ces craintes technologiques, qui est sur la petite étiquette supérieure, qui, comme vous pouvez le dire, étiquette flottante, qui est le nom réel off ce patron qu'ils utilisent en deux points. En outre, nous allons ajouter un email de cheveux, quelque chose comme ça, et nous allons utiliser la même couleur, celui-ci. Donc c'est une nouvelle chambre qui a été parmi, euh, ce nouveau matériau conçu pour pointer. Et si je vois la distance, ça va être 16. C' est créer. Maintenant, vous pouvez voir que c'est la mise en page réelle que nous devons être à la recherche. Voyons, quelle est la distance entre ces deux-là ? Rendons-le un peu moins. Ok, donc je pense que ça a l'air super. Nous avons juste besoin de dire que c'est à quoi il doit ressembler. Déplaçons un peu par ici. D' accord ? Donc aussi, je pense que c'est très mince, donc je vais faire la hauteur à, Donc il est un peu visible sur le dessus, que aussi, je vais orteil, um, um, utiliser l'orteil, ont quelque chose comme 40% parce qu'il semble prêt. Très fait sur ce dos. 27. ♥ Élément de connexion partie 2: Ok, alors passé Virginie pour entrer. C' est un e-mail. Tout fait. Nous allons générer un bouton ici, alors créons le fardeau. Donc, le bouton sera 42 DP grands espoirs que j'ai besoin de 42 ici, et il va utiliser 80 choisi. Donc, si vous voulez augmenter, vous pouvez augmenter à 90 quelque chose. Je pense que ça a l'air mieux. Retirez la bordure et notre couleur primaire. WAAS celui-là. Ok, donc je vais utiliser ce bleu primaire sur ce bouton. C' est ce que nous avons utilisé et Breast V et nous allons bien, nous n'entendons pas. Ok, donc j'ai besoin de 24. Utilisons 24 différence entre ces deux. Ok, Maintenant, nous allons ajouter un texte de connexion ici, ce qui est très facile. Logan 14 ne sera pas la taille que nous allons utiliser. Nous allons utiliser 16 ou ici pour le fardeau, et régulier et blanc sera le texte. Ok, on va l'aligner dans le quart de travail du milieu. M. C. Et c'est un mensonge dans le nous allons ajouter quelques coins arrondis pour dénicher la brute et accepter quelques ombres ici. Ça va être deux et six et la couleur de l'ombre. Nous pouvons utiliser la même couleur d'ombre comme celle-ci, qui est notre collection principale. Aussi, ajoutez cette couleur ici dans les couleurs du document et ah, c'est ajouter ceci comme une ombre. Ok, maintenant on peut utiliser quelque chose comme 50%. Ok, donc c'est comme ça qu'on va façonner nos ombres. OK, OK. Donc, c'est fait. Allons être diffusés. Mot de passe oublié ici. Cela va être une couleur de lien, ce qui était différent. C' était une couleur bleue. Alors, alignons-le au milieu avec cela. Quelque chose comme ça. Maintenant, je remonte aux pieds. Ouvrez ma bibliothèque sissy avec ma bibliothèque sissy. Suivant. Fermé ce fichier Ne pas enregistrer. Ok, donc C bibliothèque c, ouvrons à nouveau la bibliothèque cc, et ensuite je vais utiliser ce lien Brugler. Ok, donc c'est notre mot de passe oublié. Et, hum, si tu veux, tu peux le déplacer un peu, aller, ou peut-être le garder ici comme ça. Donc, pas de soucis à ce sujet. Ok, donc encore une chose dont nous avons besoin ici, c'est une nouvelle porte G B suivante. Voir chemin. La couleur est celle-là. Donc, va utiliser le sélecteur de couleur, orteil ramasser cette couleur. Ok, c'est nos ponts. Color Neutra Chipotle est là. Vas-y. Donc, cette couleur de compte de création va essentiellement être des alertes de lien. Ajoutez ceci à nos couleurs de document ici et aussi à notre Essex, vous savez, nous allons l'aligner au milieu. Sélectionnez ce texte. Il était décoloré. Ok, donc on en a fini avec ça. Si vous voulez souligner juste ceci, vous pouvez l'utiliser ici comme ça dans un txt. Et maintenant, il est souligné. C' est ce que nous avons utilisé dans la conception de notre boutique photo. Ok, donc je pense que c'est génial. Allons l'aligner au milieu. Tout. Alignez-le au milieu. Ok, donc on a oublié d'ajouter de l'ombre dessus. Donc nous allons ajouter un peu d'ombre et la couleur de l'ombre sera quelque chose. Elle lui a dit de ça. Allons le déplacer à 50%. Quelque chose comme ça. D' accord. air super. Nos ombres sont superbes. Si vous voulez ajouter l'état supérieur de petit, vous pouvez l'ajouter ou nous allons le cacher sur un écran de connexion. Donc, si vous voulez l'ajouter, vous pouvez le faire glisser de cette zone ici. Et voyons si nous avons une partie de statut noir foncé. Ok, donc nous l'avons. Si vous zoomez sur celui-ci, il est fondamentalement avoir cette barre d'état et nous pouvons le copier et basique là-bas. Suivant. Il vaut mieux ou ici c'est sur. Nous allons rendre ce film transparent. Et c'est ainsi que nous allons utiliser cet écran. Donc le remplissage de ces corps de statut transparent et nous avons du temps et tout ici. Donc notre écran a été terminé. Bûche et peau. J' espère que vous avez apprécié cette leçon. Si vous avez des questions à me poser, passons à la prochaine leçon. 28. Écran d'inscription d'Android médical: Ok, Maintenant, nous allons créer un écran d'inscription. Et avant de passer à l'écran d'inscription, il y a peu de choses que je veux. Oh, dis-toi par ici, ce qui est ? Cette étiquette e-mail va être de 12 points ou 10 points. Dans la boutique photo, nous avons utilisé 10 points, et ici nous allons utiliser 12 points parce qu'ils sont très petits et l'alignent avec ce surcoût de texte. Ok, encore une chose que nous avons utilisée et je peux ici un chèque. Mark, je continue si tu veux. Tobe, amène cette icône ici. Vous pouvez le faire et aller aux icônes. Et c'est notre vérification de base. Déplaçons ça à l'intérieur. Notre qui sera un document supplémentaire et le déplacer ici comme ça. Déplaçons ça à l'intérieur. Et il doit y avoir quelques combats ici, qui va être à 12 de celui-ci. Donc, je vais utiliser cette couleur de mes assertions cette couleur pour celle-là. Donc, je vais le sélectionner et cliquer sur cette couleur. Donc, nous avons ce chèque. Mark, si tu veux orteil, fais quelque chose comme ça. Ok, maintenant cet écran est terminé. Allons passer à autre chose. à l'écran d'inscription. Je vais dupliquer celui-là. J' appuie sur l'art et cliquez sur le nom. Et c'est comme ça que vous terminez le faire inscrire. Écran d'inscription. Ok, maintenant notre statut, mais va être changé parce que nous avons des cheveux sur AB Ottawa. Et ces choses vont bouger parce que nous n'avons pas besoin de ce mot de passe, et cela va être changé. Toe, hum, j'ai déjà un compte, et ça va être connecté ? Non, quelque chose comme ça. Ok, Donc aussi, ce bouton va être changé pour créer un compte, donc nous allons changer ce bouton soupirs. Ensuite, rendez-le un peu plus grand. C' est L. Une ligne centrale. Il se déplace. Tu vois ? Ok, donc nous avons ce compte de création et tout ici profond. Ce sera la même chose. Rallons-le un peu plus petit. Ensuite, faites-le 100. Les abeilles et nous allons tout déplacer vers le haut. Peut-être par ici, parce que nous avons besoin d'un champ de texte de plus, qui sera le numéro de décision de notre Amérique. Alors déplacons ceci ci-dessous. Ça va être au milieu. C' est les grouper contrôler ou commander G toe, les regrouper et nous allons les orteils. Nommez-le joliment. Maintenant. Si vous voulez créer des symboles à partir de ces boutons, vous pouvez faire un clic droit et créer ce pardon comme un symbole fait symbole. Mais maintenant, je vais le laisser comme ça. Ok, donc nous avons cet email concentré. Mongie, c'est notre email. C' est notre mot de passe. Et nous avons besoin d'un champ de plus, ce qui va être Oh, eh bien ici. Et ça ira. Suivant. Voyez la distance qui les sépare. Je pense que les distances ne sont pas moins. Donc nous allons le déplacer ici comme ça. Donc j'utilise une distance de 16 dp que vous pouvez voir sur le côté gauche. Il me montre la distance entre tous ces et ici j'utilise 24 ici. Ok, donc entre le bouton et le champ de texte 24 DP maintenant je vais tout regrouper ici dans une forme kwon ji. Et voici notre formulaire d'inscription à la ferme. Ok, donc , non, on peut les déplacer comme ça. Donc c'est plus facile pour moi, tu sais, le contrôle. Ok, donc on a quelque chose par ici. C' est ça. Jane, le message à Okay, maintenant on va glisser la barre supérieure au-dessus. Donc nous allons supprimer cette, euh, barre d' état, et nous allons en prendre une autre ici et la mettre ici. Ok, donc on va y aller, n'est-ce pas ? J' ai ce juif génial, un gamin qui nous rend la vie plus facile. Donc, nous allons aller au sommet. Là où nous avons les pars d'air l'année prochaine, c'est le bar dont nous avons besoin ici. , Ok, alors peut-être qu'on peut l'utiliser parce qu'il a le bouton de retour et qu'on devrait peut-être y retourner. Retournez à l'écran de connexion. Alors passons l'utilisation de celui-ci. C' est des barres d'outils et qui a parlé de celle-ci ? 12344 écriture. Ok, donc c'est pour demain et voyez tout ce que vous pouvez utiliser cet orteil 5. Utilisons le 500. Allez. Et maintenant, nous allons le baser ici, et la magie va arriver. Oups. Donc ça n'arrive pas ici. OK, donc bouger en haut et la couleur pour celui-là. Si vous vous souvenez que ce sera la barre d'outils. BG. Voyons, quelle est la couleur de celui-ci ? Donc, nous allons utiliser cette couleur pour cela, et le haut va être statut. Partie B G va être couleur plus foncée. Alors voyons ce qui se passe. Ok, donc c'est un petit problème ici. Nous allons passer à nos actifs, et nous n'avons pas ajouté cette couleur. C' est notre couleur bleue primaire. Ajoutons de la décoloration. Ajoutez de la couleur aux actifs et nous avons aussi besoin d'une autre couleur, qui était cette couleur plus claire sur ce 118 à 9 40 Donc nous allons et cette couleur 18 à 94 D. Ok, alors ajoutons ici. Et aussi, nous allons faire un clic droit et la couleur à la SX. Maintenant, nous avons deux couleurs par ici. L' un est une couleur un peu plus foncée, et l'autre est une couleur plus claire. Alors allons, euh, encore une fois au tabouret bar. C' est un outil sur l'arrière-plan, et c'est notre principal régulier. Je pense que celui-là est notre couleur primaire. Et si nous passons à celui-ci, voyons ce qui se passe ici. Donc, c'est la couleur fondamentalement. Ah, c'est plus léger. Dans la partie supérieure de l'état, cela va être plus sombre. Ok, donc maintenant vous pouvez voir que nous avons le même arrangement ici. Allons, hum, basé sur le changement de titre. Modifions-le pour vous inscrire avec les outils GP. Ok, maintenant tu vois qu'on doit bouger un peu nos affaires. Si vous voulez orteil, retirez l'ombre autour de cela sur. C' est l'ombre. Si vous voulez vous déplacer, l'ombre a supprimé l'ombre. Si vous voulez garder l'ombre, vous pouvez la garder. Mais je vais utiliser cette équipe. Ils sont lisses. Les choses sont des choses vers le bas, donc je vais utiliser 80 80 pièce pour cette icône. Je ne veux pas que ce soit très grand. J' ai besoin de plus d'espace ici parce que les Juifs sont déjà connus qu'il est dans cette application utilise cette application. Ok, alors déplacons ça un peu par ici parce que je ne veux pas d'orteils, tu sais, changer. Ah, la taille de celui-ci. Je voulais être le même 80 ici parce que si je le déplace vers le bas, il sera difficile de s'adapter avec le Tom serait ici. Encore une chose que nous allons au centre des orteils. Alignez ce Pardon comme ça. Même si vous voulez le garder ici, je ne pense pas que ce sera Ah, grosse affaire ou ici. D' accord. Donc, je pense que notre conception pour cet écran est complète si vous voulez. Oh, garde les ombres. Tu peux garder les ombres. Utilisons les ombres ici. Ok, donc notre écran d'inscription est terminé. Si vous avez des questions ou des suggestions ou quoi que ce soit au sujet de l'école pour ne pas comprendre quoi que ce soit, vous pouvez me poser des questions, des questions, même des questions de nombre Sont des questions simples ? La torche soit timide. Essaie de me demander quand tu as un problème, OK ? Ainsi, vous pouvez voir nos écrans. inscription et la journalisation sont terminées. Passons à la leçon suivante où nous allons faire plus à ce sujet et, ah, ah, nous allons créer notre écran de tableau de bord 29. Conception de tableaux de dans les caractéristiques de matériaux de conception matériels: Ok, maintenant, dans cette leçon, nous allons créer cet écran de tableau de bord. Mais avant de creuser dans l'écran du tableau de bord, nous avons besoin de ce coup de couteau avec des icônes ici maintenant, dans mon bateau que tu aimes, c'est que j'ai tel et je n'ai pas pu trouver ce patron ou ici parce que je pense qu'ils l'ont oublié . Ou peut-être que je n'ai pas ajouté dans leur version gratuite. Donc ce que je vais faire, c'est que nous allons utiliser ces trois éléments ici, et ah, nous allons les combiner avec quelque chose comme ça ici. Ok, alors laisse-moi te montrer un peu. Les spécifications à cacher sont pour ces barres d'air fixes Is 72 dp 12 dp est un marginal supérieur ici. Ensuite, nous avons l'icône 24 dp que nous. Notre texte va être assis au fond du bloc 20 dp ou 20 db de base. Et cette ligne est fondamentalement aux DP pour que nous puissions la créer nous-mêmes. Donc, nous allons le faire dans cette leçon. Alors commençons par créer ce coup de couteau sont dans ce. Ecoute, donc nous avons nos dossiers, donc je vais reproduire le cricket. Celui-ci sont Drop Shin Ki, et je vais le faire glisser ici pour créer un autre écran ou ici, et ils mangent encore l'arrière-plan. Donc, non, nous n'avons pas besoin de ces milieux. Rectangles de thèse. Je vais les déverrouiller. Donc, nous allons supprimer cela et aussi supprimer cela. On n'a pas besoin du logo en ce moment. Peut-être les piles. On n'a pas besoin de ces téléphones dont on n'a pas besoin. Et celui-là et celui-là, je garde juste ce texte ici. Ok, donc si on l'utilise, c'est notre barre d'outils. C' est un peu différent. Donc ce qu'il nous faut ici, c'est quelque chose de plus proche de ça. Donc, c'est le numéro de barre d'outils 1234 Donc je vais copier ceci maintenant et peut-être nous allons voir si nous avons quelque chose. Ok, si génial. Copie-le. Et on va le badigeonner ici et diluer celui-ci. Le tabouret bar. Nous allons supprimer aussi les livres. Aussi la partie d'état que nous devons supprimer Ceci est notre quatre. Donc je vais le déplacer comme ça. On changerait les couleurs plus tard. Donc en ce moment, nous allons juste enlever les ombres pour ne pas enlever les ombres de cette couche ici. Ok, donc les ombres ont été enlevées. Maintenant, bougeons ça. Ah, article par ici, il a l'air Oups. Ok, donc je vais monter. En haut, en haut, en haut, par ici. Ok, donc on a ce troisième bar papa et viens, vois ? Et je vais le badigeonner ici. C' est quelque chose comme ça. Ok, maintenant ce qu'on va faire, c'est le faire bouger un peu par ici. Et si je double-clique sur ce fond, ce sont les limites. Ils sont essentiellement 48 dp, mais pour l'onglet avec lequel nous voulons qu'il soit 72 db. Donc nous allons augmenter la taille à 72 DP. Ça a augmenté la hauteur comme ça, et on va le déplacer. Donc notre indicateur est en bas de celui-ci comme celui-ci. OK, donc nous avons vous fait un très beau fond qui zooment à 200%. Déplaçons ça un peu vers le haut. Ok, changeons la couleur. Il est donc plus facile pour nous de définir que nous concevons quelque chose dans ce genre de chose. Aussi, celui-ci, nous allons le remplir avec la décoloration et en échange, décolorer orteil notre bleu primaire. Ok, donc c'est plus comme si ça avait besoin de concevoir quelque chose dans ce sens. Ok, donc on a besoin de notre icône ici. Avant cela, nous allons créer un bloc de 12 DP. Ok, donc la hauteur va être 12 parce qu'on doit placer nos Icahn en dessous de ça. Ok, donc regarde, utilise quelque chose comme ça. Je vais utiliser la couleur rouge juste pour m'assurer que ce sont nos lignes directrices. Et c'est des icônes traînées ici. C' est notre tableau de bord. C' est un nuage un Plourde. Et il y avait une autre activité où ses activités. Oups. En avant. Donc je vais prendre tout ça, le glisser dans mon fichier Photoshopped, le fichier Alps, et je vais les déposer dehors comme ça. Donc, nous avons ceci. C' est notre nuage. C' est notre tableau de bord. Et ce sont nos activités, donc je vais l'aligner sur cette ligne. Vous pouvez voir à quel point il est plus facile pour nous de faire quelque chose comme ça. Ça va être notre tableau de bord. Oups. Tout devrait être dans les lacunes. Bash, Seigneur. Et c'est un D. Nous avons tous fini de créer ça. J' espère que cela vous a plu. Comment nous avons utilisé les spécifications fournies par Google Material Design et nous les utilisons pour créer quelque chose comme ça. Maintenant, il y a encore une chose. Je pense que ça devrait être au milieu. Même chose. Celle-là. Ça devrait être au milieu. Ok, donc maintenant ils cherchent créer. Alignons cette icône avec les groupes. Il y a une ligne cette icône Lexie avec ces icônes sont en fait donc nous allons les faire glisser ici quand nous avons cet indicateur et tout. Donc maintenant, nous avons Ok, donc, euh, à partir de ce panneau de calques, vous pouvez sélectionner celui-ci, et vous pouvez sélectionner les fichiers de synchronisation. Et maintenant, vous pouvez facilement les arranger plutôt que, vous savez, battre avec ça. Ok, donc nous avons le tableau de bord comme ça. Et si j'essaie de combiner le tableau de bord, voyons si cela combiné Il y a quelque chose de bizarre qui se passe avec ce fichier SPG. Donc, je ne vais pas combiner quoi que ce soit sur. Laisse-le comme ça. Ok, donc c'est comme ça que vous allez tout aligner. Votre tableau de bord va devenir indicateur. C' est notre indicateur. Et si je veux augmenter la taille sur l'indicateur orteil trois DP. Je pense que je vais utiliser celui-ci trois d. taille de l'indicateur. Nous allons le déplacer avec cette ligne. Supprimons ça. C' est à propos de ceci était notre échange de guide décolore de ce fond à notre bleu primaire , qui était celui-ci. Et aussi pour celui-ci, nous avons besoin de la même couleur. Et pour la barre d'état B. G. on va utiliser une teinte plus foncée, qui est celle-ci. Ok, maintenant tu peux voir notre père. Bod est terminé. Ce sera le titre de notre AARP plutôt que l'expérience utilisateur. Design GP Outils Année Talon 18. Ok, non, nous avons créé cette barre supérieure, barre de navigation ou onglet sont essentiellement notre barre d'air avec des onglets fixes trois Debs, et nous allons l'utiliser encore et encore dans notre conception. D' accord. J' espère donc que vous avez apprécié cette leçon. Passons à la leçon suivante où nous allons créer le contenu à partir de ce tableau de bord . Ensuite, renommez-le le tableau de bord. Alors à bientôt dans la prochaine 30. ♥ Avatar et Graph de Doctor: Maintenant, dans cette leçon, nous allons créer la partie supérieure ici. On a l'image d'Everton du docteur et un message du docteur. C' est agrandir l'activité. Ensuite, nous avons ici un petit spectrographe à barres circulaires. Ok, alors commençons à avoir quelque chose par ici. Donc, nous allons utiliser un titre de médecin. Docteur, excusez ce titre. Je vais utiliser ce texte parce qu'il est dans un petit texte n'est pas un très gros texte. Allons effacer une autre ligne. Laissons la ligne. C' est ça. Et pour ça, je vais utiliser, um 12 points comme ça. Et pour celui-ci, je vais utiliser 16 points, 16 points. Suivant juste ville dans la couleur sera notre couleur de texte, qui est je pense que j'ai oublié d'ajouter ici. C' est la couleur de notre texte, et ça va être notre couleur grise. Si vous voulez l'utiliser rapidement, vous pouvez l'utiliser. C' est notre texte. Curriculaire, en fait. Ok, donc maintenant ce qu'on va faire, c'est qu'on a besoin d'ellipse, et, euh, on va utiliser 58 pièces qui ont été utilisées pour l'orteil de la boutique. Donc ici, nous avons 50 ans sur 58, nous allons le reproduire ici. J' appuie sur la touche d'option ne sont pas pour le répliquer. Et maintenant je vais faire est que je vais orteils activer ma grille carrée. D' accord. Pourquoi je l'ai fait. Je vais vous montrer que je vais laisser 16 marges à partir d'ici 16. Et il est plus facile pour moi d'aligner des choses comme ça. Et maintenant c'est au milieu. Tout a l'air super. Mon alignement est fait. Et maintenant, je vais attraper l'image des médecins, qui est, euh, ici, dans mes images, médecin , femme , femme. Et je vais tout laisser tomber ici comme ça. Maintenant, je vais faire est que je vais faire un grand plus petit et nous allons sélectionner les deux hors d' eux, le clic droit et la mosquée avec navire. Que c'est ah, très correctement. Fais-le parce que parfois je dois, tu sais, changer d'image. Et maintenant je pense que nous l'avons fait. Et pour la frontière, je vais utiliser, hum quatre par ici et maintenant je pense que je ne peux pas utiliser la frontière alors ce que je vais faire ici c'est que j'ai besoin d'un autre cercle comme celui-ci au-dessous de celui-ci pour montrer une frontière. Donc, je vais créer une frontière de quatre oops nourriture qui montre le gros plantureux 100%. Je ne sais pas pourquoi ce n'est pas visible. , c' Le problème, c'est que la frontière est à l'intérieur, donc je vais la déplacer dehors. Centra Stroke. Course externe externe quelque chose à l'extérieur. Il est donc maintenant visible. Déplacez-le à l'intérieur. Je pense similaire. La même chose se passait ici, alors j'ai déménagé dehors. Il va montrer, donc il ne montre pas parce qu'il n'est pas masqué. Alors utilisons cette bordure. Et la couleur que nous utilisons pour cette bordure est un peu différente, qui est, je pense, cette discrète pour la bordure. Je pense qu'on doit utiliser la même couleur pour la bordure. Ajoutons-le afin que nous puissions utiliser cette couleur quelque chose comme ça utiliser la bordure à parce qu'elle a air trop grand. Ok, maintenant notre image tous les jours est faite. Nous allons créer le graphique ici. D' accord. Maintenant, pour créer ce graphique à barres circulaires en érection, nous allons passer par un processus. Donc je vais dupliquer celui-ci, et nous allons enlever la frontière, Jane, Jane, le champ en bleu et nous allons reproduire les pieds, cette touche d'option d'art. Et je vais changer sa couleur orteil blanc ou peut-être quelque chose d'autre comme ça et le rendre un peu plus petit, se déplaçant au milieu de celui-ci. Sélectionnez à la fois les formes et le sujet. Non, nous avons ce vaisseau hurleur. C' est juste un bar, et il y a plusieurs façons de le cacher maintenant que la chose que je vais utiliser est que je vais utiliser une autre forme pour cacher, couper la moitié du lot de celui-ci. Donc je vais le déplacer comme ça. Bougez-le. Celui-ci au milieu comme ça et en sélectionnant à nouveau les deux formes. Nous allions soumettre, et nous sommes restés avec ce vaisseau. Donc ça va être notre graphique. Ok, donc c'est notre barre de progression circulaire. Et celle-là pour celle-là, nous allons cacher la frontière et l'ombre, et vous pouvez voir ici que nous avons le même effet. Maintenant, si vous voulez changer la couleur de celui-ci hors cours, nous allons changer la couleur pour celle-ci. Ceci et maintenant vous pouvez voir que c'est notre, euh, graphique. OK, maintenant nous allons mettre du texte ici, qui va être terminé à 50 pour cent et la taille sera de 10 10 points. Déplaçons-le au milieu comme ça et nous allons utiliser 11 pour la hauteur de la ligne et la couleur du texte sera celle-ci. Allons donc bouche et voir à quoi il ressemble. Il a l'air un peu plus chatoyant. Donc, si vous voulez orteil créer une ligne élastique, vous pouvez faire la même chose. Et il y a aussi plusieurs façons de le faire. Vous pouvez également le déplacer ou les cheveux ou peut-être ajouter un peu d'ombre à celui-ci, quelque chose comme ça pour le rendre plus élégant. Donc, cachons ce tableau de bord un bon ici et laissez-moi vous montrer à quoi cela ressemble pour que vous puissiez ajouter une ombre qui va être cette couleur bleue ou peut-être le même bleu ici orteil. Avoir un peu de lumière autour d'elle et vous pouvez également le faire comme 50%. Donc, il va regarder 35% mieux sur 35% et quelques autres choses. Vous pouvez aussi utiliser un peu de trucs ternes de ce bleu ou ici comme ça pour l'ombre. Ok, donc je pense que notre partie est complète. Nous l'avons fait. Bon, maintenant, si vous voulez des coins arrondis autour de cette forme, ce n'est pas vraiment possible parce qu'on doit le dessiner avec un stylo alors et je ne le ferai pas. Je ne veux pas perdre de temps avec le stylo, donc je pense que cette technique est bonne. Vous, Si vous voulez ajouter des ombres, vous pouvez ajouter de l'ombre à celle-ci ou sur la forme en dessous. C' est à vous de décider. D' accord. Donc, nous pouvons aussi ajouter quelque chose comme ça moins deux. Donc l'ombre apparaît de ce côté moins cinq. L' ombre, c'est maintenant. En ce moment, de ce côté-ci. Donc aussi, cinq pour celui-là. Ok, donc c'est comme ça que j'utilise deux ombres et crée cet effet, mais je pense que je vais cacher cette ombre et utiliser celle-ci sur Lee. Ok, donc maintenant nous avons terminé notre première section. Nous allons passer à la section suivante de la leçon suivante où nous allons concevoir la première garde à l'écran 31. Conception de cartes de bord de façon supérieure: Ok maintenant en détresse. Et nous allons créer cette carte ici, qui est vos mises à jour d'évaluation et tout ici. Allez en prison, et dans la leçon suivante, nous allons créer ça avec le fardeau civil. Ok, alors commençons. On va se pencher sur les documents qu'on a laissés. Et maintenant, nous allons créer des orteils sur un enchevêtrement par ici. Hum, hors de la taille, la taille va être de 192 plongeons hors hauteur et 328 va être le Ok, donc on va l'aligner au milieu comme ça. Et nous n'allons pas utiliser la frontière cette fois. Si vous voulez utiliser la bordure, vous pouvez utiliser une décoloration nord de la bordure légère. Mais si nous allons à nos bibliothèques C C, je pense que nous avions cette couleur de bordure est la couleur de bordure. Ce sont les couleurs de la bordure, essentiellement des cerceaux. Alors diffusons cette couleur et utilisons-la comme bordure. Vous pouvez supprimer le champ dès maintenant. D' accord. Donc une autre chose que j'ai oublié est que sur le fond de la planchette, notre couleur est différente, qui est F quelque chose clique voir ce que c'était. La couleur C'était décolorée. F sept F neuf f e solaire enseignement le fond F sept F neuf f Il est déjà changé. Ok, alors celui-là va être blanc. Cela a arrêté un rectangle d'arrêt. Il va être blanc. Ok, donc on a quelque chose de plus proche de ça. Ah, et nous allons utiliser quatre DP off round Nestlé ici vous pouvez utiliser pour si vous voulez orteil, je vais zoomer pour voir à quoi il ressemble. OK, donc ça a l'air génial. D' accord, avant ça, on va aller aux pieds. Um bouge peu de choses en remorque. Différentes zones et sections. Ça va être au sommet de la tente. Donc si je l'ai dit, voyons ce qu'il y a en dehors de celui-ci. Donc, c'est la neuvième partie. Déplaçons dans le contenu supérieur. Ces deux-là sont aussi à l'extérieur. Peut aller le déplacer à l'intérieur ou avoir 50% va être haut. Cachons ça. Ok, donc on a ce contenu ici. C' est notre top. Allez. Jeet est notre foutu corps. C' est notre Margie. Ce sera notre garde. Ok, donc tout va être à l'intérieur de ce groupe. Nous allons donc créer ce BG. Ça va être de l'arrière-plan. Ok, donc on a ça aligné. Nous allons orteils utiliser cette ligne comme un séparé ou étaient ici quelque chose comme ça. Et il va avoir la même couleur que celle-ci aussi, si vous voulez utiliser un peu d'ombre autour avec l'ombre. Ok, donc c'est le problème. DoubleClick et la vidéo d'ombre que j'utilise est un et trois pour trois pour le flou et 16% noir. Quelque chose comme ça. Donc ça ressemble à une carte en ce moment. Ok, donc on doit faire glisser une icône ici. Du texte par ici et un bouton par ici. Donc, je vais mourir le texte et sauter ça rapidement. Ok, donc le texte est terminé, je vais faire du texte de zone, et je vais l'attraper comme ça. ai laissé une ligne, et nous allons utiliser quelque chose comme ça. Donc, nous avons le prochain Il ne va pas être fait. Il va être 16, alors assurez-vous qu'il est 16 et ce sera 24. Je suppose que Faisons ça 2016. 20. Et la couleur suivante va être celle-là. Allons ici expiré. Décoloré parce que nous l'utilisons encore et encore. Aussi cette couleur c'est aussi notre couleur de texte Great X. Ok, donc on a tout ça sous contrôle et je vais en laisser 12 du haut. Créons le fardeau maintenant. Donc le fardeau va être par ici comme ça. Pas de frontière. La sensation va être notre couleur primaire secondaire. Fondamentalement, je vais l'ajouter encore ici. Et je pense qu'on a utilisé une seconde régulière différente, qui était celle-ci. Donc, je vais ajouter celui-ci à nouveau ici, et aussi je vais l'ajouter. Les orteils sont des laïcs par ici ? Ok, donc nous avons des choses de base. Peut-être qu'on peut le rendre un peu plus grand parce qu'on a moins de visage au sommet. Quelque chose comme ça que nous allons utiliser pour BB de NUS à une ombre autour d'elle. Et la couleur de l'ombre pourrait être celle-ci, celle-là ou celle-là, celle-là. Donc, je vais utiliser un peu d'ombre très claire 40%. Quelque chose comme ça. Il y a eu un peu de Dexter ici. Ligne centrale. Nous allons utiliser la couleur blanche pour ce texte. C' est quelque chose que tu as quelque chose comme ça. Alignez-le au milieu comme ça. Et je pense que nous avons besoin d'un peu plus de Grande-Bretagne parce que nous avons, peur que les marges et les literies des deux côtés. D' accord. Donc, nous pouvons aussi utiliser quelque chose comme 14 ici parce que c'est plus logique. C' est un peu un statut. Ok, donc nous l'avons fait. Vous êtes donc les concepteurs. Vous pouvez changer quelques choses ici et là si vous voulez. 12. OK, donc on en a 12 ici. Quel est le problème avec cela ? Parce que je pense que c'est au niveau de sous-pixel 0.5. On va supprimer 0,5. Nous allons utiliser pour 27 et voir quelle est la distance. Ils sont petits pendant 20 ans, et ça va être 16 cochons zélot pour 16 points en bas. Ok, donc notre texte dans tout ce que tout le reste est fait. Et si vous voulez, vous pouvez également utiliser 15 Roberto, et utilisons ceci quelque chose comme ça. Et je pense que le 14 est meilleur parce que nous en avons plus ? Euh, tu sais, plus d'espace ici, et ça a l'air mieux. Ok, donc maintenant nous allons répliquer ce texte ici. Ok, donc on a ce texte ici. Faisons le texte en ligne, et je vais l'aligner ici comme ça. Rendons cela un peu plus grand dans la couleur du texte. Je vais m'en servir. Créer, ext, parce que c'est une sorte d'un studieux. Et nous allons Graham sur les icônes et mettons-les ici. Ce sont affirme les icônes animales. Quand on a eu celle-là, un autre c'est celui-là, attrape-les et mets-les ici. Ils les ont traînés un par un. Déplacez-le à l'intérieur. Par ici. Comme ça. Et celui-là aussi. Maintenant, je vais augmenter leurs tailles. Donc, il va être 36 et celui-ci est Gardions celui-ci tel qu'il est. Ok, donc on va utiliser les urgences physiques pour être quelque chose comme ça. Couleur du texte aussi pour ce centre. ligne avec ceci, En fait, quelle est la distance entre celui-ci et la frontière 12 aussi pour celui-ci, En fait, En fait, vous devriez vous soucier de vos eux en mettant quelques 24 gros vendeur 24 bloc dp ici. Donc, la bonne façon est que si vous voulez, vous pouvez utiliser quelque chose comme ça. 24.24. Mais vas-y. Ok, donc ce n'est pas en gros 24. Donc, nous allons utiliser un bloc de 36. Utilisons un bloc 40 40. Quelque chose comme cette porte ici pour celle-là. Verrouillons ce fond de garde parce qu'on n'a pas besoin de bouger une noyade. Allons-les tous les deux et déplacons-les ici comme ça. Ok, donc fondamentalement, tu dois faire quelque chose comme ça. Mais on n'utilise pas ça comme ça. Nous utilisons nos yeux pour, vous savez, aligner les choses. Donc je vais croire que ce rectangle comme ça, et je pense qu'ils ont l'air assez bien sur ne sent aucun problème à voir ça. Et maintenant, si j'ai tout l'air, déplacez tout ça à l'intérieur de cette carte, et si je veux le déplacer, je peux le déplacer. Quelque chose comme ça. Cette icône est un peu en bas et ne s'aligne pas avec celui-ci. Il y a une ligne pour compléter ce texte. Ok, donc je pense que ça regarde. Créer Si vous voulez déplacer cette icône ou la rendre un peu plus grande cette fois, vélo sur ce scan de pouce, vous pouvez utiliser 36 par 36 quelque chose comme ça et changer la couleur de l'orteil. C' est peut-être celle-là. Donc, ça a l'air génial. Également aligné les bords gauche de ces icônes, celui-ci dans celui-ci comme ça. Ok, donc dans la leçon suivante, nous allons créer le prochain contenu, qui est notre prochaine carte. Passons donc à la leçon suivante. 32. Conception de cartes de bord de bas: avant de créer la deuxième partie de cette carte, je vais vous montrer quelques choses que j'ai faites, que je change en ceci. Ok, donc la première chose est que j'ai ajusté la taille de ce texte à 16 points, qui est fondamentalement sur la partie quatre côtés, donc je ne veux pas jouer avec ça car 14 est fondamentalement une taille plus petite que nous utilisons. Donc, c'est 14. C' est 16. Aussi, cette icône est 36 celui-ci que j'ai changé à 28 DP. Ok, donc ça va être poursuivi par 28. Ou ici aussi fait la taille de cette hauteur et de la largeur de 1 98. devrait être 3 28 Je ne sais pas pourquoi c'est. Euh voir 100 fin 20. Ok, donc trois et 28. Ok, donc c'est la taille. Ok, maintenant nous allons répliquer celle-ci, cette carte, et voyons où va cette carte, donc nous voilà. Je vais être d'accord, Mandy et nous avons une autre carte, et je vais traîner ici, et nous avons besoin de peu de choses, donc je vais les supprimer comme cette ligne. Ok, donc j'ai supprimé les choses inutiles. Je vais le redimensionner et faire glisser le nouveau que j'ai passé ici, Jane, les ponts. Donc je vais accélérer ça. Non. Nous allons utiliser le bouton et changer sa couleur pour le bouton désactivé, qui était notre sur cette couleur ici. Désactivé. Encombré. Ok, donc je vais cliquer sur cette suppression de l'ombre, et c'est tout ce que nous allons changer l'orteil du texte. Pas besoin de centrer. Clignez-le de notre équipe. Voyez-les. Et c'est au milieu. Je pense pour, euh, pour le système d'exploitation Mac. Les raccourcis sont un peu différents, je pense. Mars, si C o r peut contrôler Gypsy. Je ne me souviens pas. Ok, donc vous pouvez vérifier ça, ou vous pouvez utiliser juste un port mou sur eux et utiliser ces contrôles ici. D' accord ? Non, si vous voulez faire quelques ajustements mineurs comme vous pouvez voir ici, cette icône est trop proche de ce côté gauche. Ouais, je pense que c'est juste avoir. Ensuite, la distance. Je vais utiliser 12 dp et quelques autres ajustements comme vous pouvez réduire la taille de cet un orteil 140 quelque chose comme ça et déplacer ce bouton de synchronisation de charge ici. Un grand haut nous a également vérifié les marges droite et gauche, donc il doit être 12 DP. J' utilise 12 autour des marges, qui est, je pense, je pense, la norme pour la conception des matériaux, Google Material Design. Et je pense que c'est tout. Si vous voulez changer autre chose, la distance entre ces deux est de 12 DP. Si vous vouliez augmenter la profondeur 16, vous pouvez le faire et il va ressembler à cela aussi. Si vous le souhaitez, supprimez les ombres, vous pouvez supprimer les ombres, et il va être les mêmes preuves. Ce sera la même élection des Ombres. C' est essentiellement l'effet que nous avons conçu pour un choc, parce que ce bouton n'est pas élevé et cela est signalé car cela signifie que c'est, euh, c' euh, est fondamentalement interactif. C' est donc tout au sujet de la création de ce tableau de bord. J' espère que vous avez apprécié cette leçon. Passons à la leçon suivante 33. Écran d'activités de conception: avant de concevoir l'écran d'activité passent à la prochaine chose. Je vais te donner quelques conseils pour t'arranger. Oh, sont en train de faire un meilleur usage de l'espace de combat dans votre conception. Ok, donc maintenant si vous regardez ici, nous avons une marge de 16 DP des deux côtés pour tenir ces voitures. Et cela ces éléments No. Je suis sûr que vous pourriez vous demander que ces éléments semblent un peu différents du passé Exemple. . Parce que ces lignes ici, vous pouvez voir que ce, euh, euh, texte et cette image que je veux orteil le déplacent plus pour l'intérieur de la ville. Ok, donc ce qu'on essaie de faire, c'est que je te montre. Allons allumer la grille. Ah, carré, Greg. Ok, alors nous allons zoomer et je vais te montrer. Vous pouvez voir ici nous avons ce contenu et il est à partir de 1234 presque ici et ici nous avons le contenu, qui commence à partir de cela, et il regarde aussi en dehors de ce domaine. Donc je vais faire, c'est que je vais le déplacer à l'intérieur comme ça ici. Ou peut-être au moins ici où ils correspondent l'un à l'autre. Ok, donc aussi, on va faire la même chose pour ça. Cela semblait ce que nous avons ou ici. Ok, alors allons les regrouper ensemble. C' est un piège. Donc là, nous avons quelques problèmes hors de ces éléments supplémentaires, donc je vais le déplacer plus à l'intérieur de ce aussi ce plaisir. Oups. Donc peut-être que je pense que je dois déplacer ces deux-là l'un avec l'autre comme ça. Ok, maintenant on peut aussi déplacer ces deux-là. J' en ai pris plus ici. Ou peut-être 24. Ok, donc ça a l'air mieux. Ok, alors sortons de la chambre et finissons ce grade et voyons les résultats. Maintenant, vous pouvez voir qu'ils ont l'air plus alignés. Plus de mètres espacés. Même si vous voulez déplacer cela un peu plus près de cela. Oh, ici. Comme ça, tu peux le faire. Et maintenant, vous pouvez voir qu'ils ont l'air plus alignés les uns avec les autres. Ok, donc ce n'est qu'une simple pointe des pieds. Alignez votre vous un des éléments de conception. Non. On va bouger les pieds cet écran d'activité. Répliquons ce tableau de bord et nommez-le activités. Il l'est. Maintenant, nous allons orteil Activer ceci dans la zone supérieure du tableau de bord. Ok, donc pour l'activer, on va à DoubleClick. DoubleClick et nous allons utiliser notre capacité, remplir leur en utilisant 70%. On va utiliser 100%. Aussi cette icône. Nous allons en faire un gros 100 % et faire le reste pour celui-ci. On va le désactiver ou on va utiliser les orteils. Ah, peu de transparence par ici. Donc, nous allons utiliser quelque chose comme 2%. Donc, il utilise 70%. Bien sûr. On va utiliser 70% pour la prochaine. Utilisons 70%. Il suffit de déplacer cet indicateur de quoi ? Les cheveux ? Sélectionnez le bateau sur les os et l'indicateur. Et on va l'aligner au milieu comme ça. Ok, donc c'est activé. Non, on a fait quelque chose. On est là. Et pour ça, nous allons supprimer tout ça. Juste celui-là dans celui-ci. Peut-être qu'on va garder celle-là. On n'a pas besoin de ce graphique. Donc tu vas l'effacer ? Et aussi nous allons orteil Relate ces ? Je suppose que oui. Diluons celui-ci. Et aussi celle-là. Non, ce texte va servir comme notre texte haut, qui est pour nos éléments de liste étaient essentiellement créer des éléments de liste. Allons en groupe au début. D' accord. Donc, dans cet exemple, je vais utiliser trois lignes de texte ici, et c'est notre cercle principal. Je vais réduire leur taille à 40, ce qui est en fait la taille sur les traitements globaux. Donc je vais utiliser 40 pour celle-là. Ok, donc nous avons deux éléments par ici. Nous avons besoin d'une chose de plus, qui est notre icône en forme de flèche. On va faire glisser l'icône de la flèche ici. C' est notre icône en forme de flèche, et nous allons la faire glisser dans Adobe X'd. D' accord, allez-y. C' est une ligne comme ça pour certains. Suivant à l'intérieur. Donc 01 Quelque chose comme cet orteil wiki. Fais une ligne dans le bateau mou du milieu hors d'eux comme ça. En l'alliant au milieu. Ok, donc je pense que notre texte et tout les yeux sont presque alignés. Nous allons le rapprocher de celui-ci. Parce que la distance devrait être, je pense, presque. Oups. Donc nous avons deux Over par ici. Déplaçons la frontière autour d'elle. Et maintenant, c'est exactement 40 dP. Ok, donc c'est la taille exacte que Google recommande pour un statut ou des images ou ici. Donc j'utilise celui-là. Maintenant, on va aux pieds. Rapprochez-le et il va être à 16 db d'ici. Ce sont les spécifications exactes. Aussi, ça va être 16 ans pour être loin d'ici. Ok, donc on a presque tout aligné. Changeons sa couleur orteil ce bleu, qui est notre couleur active. Et ce qu'il nous faut ici, c'est un rectangle avec un er vital. Ou peut-être qu'on pourrait utiliser autre chose. Utilisons. Ok, donc on va utiliser un rectangle hors de la hauteur 88 et on a déplacé la bordure. Phil se battra, et on va le déplacer en dessous de tout. Ok, donc on en a fini avec celle-là. Allons au milieu de ça. Donc ce que nous allons faire, c'est nous allons les regrouper, alors allons les regrouper. Voici nos étudiants, quelque chose comme ça. Et nous allons l'aligner au milieu de tout ça. De plus, ces deux-là allaient les regrouper en suivant. Il y a le droit au milieu de celui-ci, et aussi celui-là. Ok, donc on a presque terminé ça. Lexie, quelle est la distance d'ici ? Faisons 24 plutôt que 25. Ok, donc c'est fait. Nous avons besoin d'une ligne de plus en bas pour un séparateur. Donc, je vais tomber en ligne, et nous allons utiliser la décoloration de cette couleur de bordure très sombre, qui va être très agréable ici. Et on va l'aligner au fond de ça. Ok, donc maintenant vous pouvez voir qu'on a tout ici. Maintenant, nous allons au groupe ONU ce texte parce que nous allons le mettre à jour avec l'aide d'un fichier texte. Non, nous allons faire un groupe de tout ça, et nous allons créer une cupidité répétée, ou nous allons utiliser une répétition. Bizarre. Donc, je vais les sélectionner tous. Cliquez sur répéter. Bien. Et c'est notre répétition. Bien. Non. Voyez la magie, ce sera en plus. Donc, nous allons créer une grande liste de répétition comme ça. 3456 articles. Je suppose que vous allez avoir besoin de six articles ici comme ça. Et maintenant aller au milieu de cela et essayer de réduire la taille déplacer vers le haut, et il va être zéro orteil. Rends-le parfait. D' accord. Donc, vous pouvez voir, aucune autre liste n'est complète. Nous en avons fini avec ces activités. Si vous voulez changer quoi que ce soit, vous pouvez double-cliquer et Jane les couleurs de celui-ci. Avant ça, on va faire encore une chose. Ok, donc nous allons mettre à jour ces évaluations de texte. J' ai donc déjà fait un fichier texte, et c'est pour les activités. Donc je vais faire glisser ce fichier et je vais le déposer sur cette présence, donc ça va tout changer maintenant. Le problème est, je pense que mon texte était aligné au milieu, donc cela a créé quelques problèmes. Donc avant cela, nous allons revenir à la première étape et un bateau comme celui-ci et le faire aligné à gauche aussi celui-ci. Fais le laisser une ligne. Maintenant encore, créez eso. Répétez, il est déjà là, donc je vais le répéter à nouveau. Réduire la taille au milieu. D' accord. Et maintenant nous allons abandonner la prochaine, ou ici maintenant vous pouvez voir qu'elle ne remplace pas notre expédition de changement. Ok, donc tu peux aussi mentalement et ça ici, comme zéro orteil quelque chose comme ça. Si tu veux et ah, quelques choses de plus. Par exemple, si je veux changer quelque chose ici, peut-être que je veux que la couleur de celui-ci soit changer d'orteil ce bleu espère. Alors avant ça, je vais regrouper ma grille. Ok, donc je vais changer ma couleur sur Lee cet article. Donc ça va être blanc, et ça va être aussi blanc. Et continuons de décolorer la même chose, d'accord ? Et non, celui-là nous pouvons utiliser. Ah, peut-être une autre couleur. Peut-être celui-là. Donc, c'est un schéma de couleurs différent qu'avant, mais je pense que je l'aime vraiment très forte. Très gentil. Donc, c'est juste pour s'assurer que quelque chose est très important qui se passe ici. Ou peut-être quelque chose comme ça ou l'utilisateur a besoin d'attention à celui-ci, ou c'est possible ou quelque chose comme ça. autre schéma de couleurs que vous pouvez aller avec est celui-ci. Vous pouvez utiliser cet arrière-plan comme celui-ci, et pour celui-ci, vous pouvez aller avec une couleur plus foncée, qui est celui-ci, quelque chose comme ça. Et pour cela, vous pouvez également aller avec cette couleur plus foncée. Donc en fait, nous avons utilisé celui-ci parce que c'est nos couleurs primaires. donc je ne veux pas qu'il soit utilisé dans mon application beaucoup. Donc, cet écran est complet. C' est la magie hors classe répétée, et maintenant nous allons dupliquer l'écran, orteil un autre et effacer l'écran du lavabo dans la leçon suivante. 34. Écran de synchronisation de design: Ok, maintenant dans cette écoute, nous allons créer un écran de chant, et nous allons répliquer celui-ci parce qu'il est très similaire à cet écran. Donc, d'abord, nous allons utiliser ce coup de couteau et activer ces fichiers de synchronisation ici plutôt que ces activités. Donc je vais aller orteil et ah, faire la même chose. Faites ceci 70% ou 60%. Et ce texte va être de 70%. Et ça va aller aux pieds. C' est essentiellement sentir. Donc je vais perdre celui-là. Et voici notre icône. Il y a cette icône. Ok, donc nous l'avons. Faisons ça à 100%. Et cette barre de ligne va bouger. Donc celui-ci est activé que pour demander, désactivé. Et maintenant ce que nous allons faire, c'est nous allons supprimer ça. Supprimer ce Vraiment ce que je crois cela et libérer ce Maintenant, nous allons aussi au groupe de l'ONU cette, donc je vais pied sur le groupe. Donc, nous avons toutes ces couches sur. Maintenant, nous allons à nouveau de grands créateurs B grade. Et maintenant, nous n'avons besoin que de quatre articles de 123 et un de plus comme ça. Non, je vais bien. Vraiment utiliser l'espace à zéro à nouveau. Montée à zéro. Parfait. Et on va le laisser tomber à nouveau. Le dossier ici. Fichier texte Si vous ne savez pas comment cette magie se produit réellement, ce sont Ceci est fondamentalement un fichier texte en quatre lignes et j'ai déjà tapé. Donc je vais le glisser et le déposer sur mon Lear, que je veux changer celui-là. Et maintenant, vous pouvez voir qu'il a été beaucoup changé dans 44 fichiers, Quatre entrées. Si tu veux changer quelque chose ici, tu peux le faire. Les hommes ont été menés en double cliquant, en double-cliquant et en entrant ici. Donc, je vais utiliser ceci comme mon écran désactivé. Alors faisons-le en décembre. D' accord ? Donc, d'abord, nous allons faire est que nous allons toel news l'opacité et rendre cette capacité de texte à 60%. Oups. Donc, nous devons déballer cela Fondamentalement d'abord sous la grille. Où est notre grille ? Ce fils le groupe parce que nous changeons les styles ou ici, donc la capacité, réduisant l'opacité de la capacité de texte orteil 60% comme ça. Changeons sa couleur pour quelque chose d'autre comme ça. Ou peut-être quelque chose comme ça. Et aussi celle-là. Je vais utiliser quelque chose. Utilisons l'opacité des orteils Sculler de l'utilisateur cette Opacité s donc je vais le faire 60%. Maintenant, vous pouvez voir que cela semble clairement inactif ou désactivé parce que nous ne pouvons pas l'utiliser. Et si vous voulez changer le statut, par exemple, mes images pour télécharger nos 10 images, alors je peux aussi faire une chose de plus. Je peux changer sa couleur pour celle-là. Quelque chose comme ça. Ou peut-être une ombre plus foncée de celui-ci. Ouvrons nos bibliothèques et voyons qu'on avait d'autres couleurs ici, donc non, je vais utiliser une mère tueuse de la Bibliothèque d'Assise. Je vais sélectionner les orteils. J' ai sélectionné celui-ci. Ouvrons celle-là. Et je vais utiliser cette couleur plus foncée pour souligner que c'est important. Ok, quelque chose comme ça. Donc, euh, c'est comme ça que tu utilises ta cupidité répétée. Et si vous voulez obtenir quelque chose à l'intérieur, vous pouvez le faire dans Adobe. En fait, je pense que c'est plus facile les choses changerles choses. Je vais couler des dossiers. Renommons le. Nous avons besoin d'un bouton et d'un statut de plus ici pour que nous puissions faire une chose qui effacent cette évaluation de bouteille comme un symbole. Faites-en un symbole. Allez à la bibliothèque de symboles et je vais le glisser et le déposer ici comme ça. Tu sais, je vais faire un clic droit, et je vais déballer les orteils. Ce groupe est et un symbole de groupe, parce que je vais changer certaines des 10 randonnées. Donc, ici, nous avons couler vers le nuage. Voyons s'il va tenir dans la même taille. Je vais faire glisser l'icône ici, badigeonner ici quelque part. Faisons-le glisser à l'intérieur. Ce zoom dans les regards viennent, plus ism in, et nous devons l'aligner au milieu de cela. Donc je vais m'en servir. Ça le permet ici. Puis je vais orteil 11 tau 12.12 points ou 12 dp d'ici et aussi le texte, et celui-ci va avoir des abeilles de qualité. Ça a l'air super. Déplaçons ça ça au milieu de ça. Off espoirs couler tout le nuage, mais et faire un plus gros fardeau. Il est plus facile d'orteil gilet ou de cliquer par n'importe quel utilisateur espère. Faisons encore quelque chose comme ça. Voyons voir. Quelle est la distance entre les deux ? Il doit être supérieur à 12. Ça a l'air génial. Je vais aux orteils. Alignez-le au milieu. Oups. ID de groupe suivant Commande G, puis Aligné Illimité. Ajoutons le statut ici sur la poussette de pont ici en bas. Alors ramenons la couleur de cet orteil. Modifions cela pour que celui-ci crée ext aligné au milieu. Je ne vais pas utiliser le médium boto 14. Je vais utiliser le 14 habituel par ici. Quelque chose comme ça. Il est très bas en bas. Alors, je vais me rapprocher de celui-ci. Donc, ça a l'air génial. Ce serait la distance entre ces deux-là. Euh, OK, donc je pense que celui-là est fini. Si vous avez des questions ou si vous voulez en savoir plus sur les spécifications, est-ce que tout ce que j'ai utilisé ici ? Il s'agit essentiellement de 88 DP. Je ne sais pas pourquoi il montre un pixel de plus, mais si vous double-cliquez dessus, vous pouvez voir qu' il est 3 60 par 88 DP, ce qui est une spécification pour trois. Ligne A trois lignes Un élément de liste de la conception de matériel de Google. Ok, donc nous avons créé ceci avec succès. Nous avons un écran à gauche, qui est sur le coup de couteau ici est l'onglet sur cet écran. Je pense que j'ai oublié d'ajouter l'onglet. Donc, nous allons utiliser une icône de tampons ici pour montrer les écrans cette navigation dans le tiroir gauche ou ici. Passons donc à la leçon suivante où nous allons créer le dernier écran, qui est la navigation dessinée à gauche. 35. Écran de tiroir nav: D' accord, avant de commencer à concevoir cette chute de narration, nous avions gagné certains voulant juste réparer, qui était celui-là. Donc nous allons copier cette icône de hamburger ici menu hamburger, et nous allons le coller. Copie, et on va le coller dans tous ces dessins à l'endroit ici. Donc, je double-clique pour arriver à celle-là. Contrôle V. OK, sorte que vous pouvez voir qu'il a battu en place. Donc, nous allons orteil utiliser une autre fonctionnalité hors o B x D. Donc, nous allons toe klik et sélectionner avec décalage en cliquant sur tous les différents tableaux d'art que nous voulons travailler orteil avec et le contrôle ou la commande re. D' accord. Donc vous pouvez voir que j'ai vaincu cet élément plusieurs fois sur tous ces livres d'art. Donc c'est un truc très cool si vous voulez faire ça. Ok, alors maintenant, c'est notre barre d'onglets. Et nous avons entendu quelque chose ici qui est dans le contenu de la barre d'outils de retour du tout. Nous allons le supprimer de la même manière et aller avec celui-ci, donc nous avons juste besoin de supprimer ces flèches arrière. Ok, donc on en a tous fini avec ces, euh , hamburgers , tu sais, on va créer le côté. Jamais. Et, ah, nous allons utiliser ce tableau de bord comme arrière-plan, donc je vais le répliquer. Contrôle de commande, De. Donc nous avons un autre écran ou ici maintenant je vais le nommer, ne jamais dessiner. Et ce que je vais faire, c'est que je vais tout cacher sauf l'état d'étincelle. A Donc je vais déplacer le statut, mais en haut comme ça et le menu hamburger et toutes les autres choses, je vais les regrouper en un seul groupe, euh, sont appelés arrière-plan. Ok, donc je vais le verrouiller maintenant pour qu'on ne bouge pas par erreur ce fond. Maintenant, nous allons aller à notre toi, je passe et Reggie par un studio simple, et nous allons crabe des orteils cet écran et ce dont nous avons besoin est de passer à ce panneau de couches . Nous avons besoin de cette navigation de navigation latérale dessiner redoute cette barre d'état. Même si vous souhaitez copier la partie d'état, vous pouvez la copier. Et aussi ce contexte. Ok, donc ce qu'on n'a pas besoin, c'est que celui-là espère donc on a un problème. Nous sommes là n'importe quel espoir. Ok, alors sélectionnons ça tout de suite. Commande ou commande commandée. Tu vois ? Et nous allons le coller sur le dessus de celui-ci. Ok, donc maintenant vous pouvez voir une navigation. Tirant d'eau est là. Voyons, c' est quoi l'autre tout à l'heure, qui est celui-là  ? C' est le contexte sur. Et c'est nous allons copier ce fond et le baser ici. Ok, donc maintenant on va déplacer cette superposition à l'arrière. Mais le corps d'état va être au sommet comme ça, et ce que nous allons faire, c'est que nous allons utiliser une certaine capacité à ce 50%. Faisons de 50 % de capacité comme ça. Ok, donc c'est par ici, et maintenant on va y arriver. Nous allons développer, cliquer dessus et utiliser ce fond, et je vais le crabe des orteils ici et le rendre plein de lui. Ok, donc la peau est pleine. Maintenant, nous avons mis en place nos principales choses ici. Gleaton ceux dont nous n'avons pas besoin. Ok, donc peut-être qu'on n'a pas besoin que c'est fondamentalement une liste eso je vais sélectionner tout dessous de ça Nous avons juste besoin de trois sur eux. Ok, donc nous allons utiliser un est changer de profil ou peut-être sélectionner. Ah, année d'évaluation. Aussi par ici. On va utiliser le nom de notre médecin. Utilisons cet e-mail comme tout ce qu'il est ici. Voyons voir. Placez cette image par ici, chaque goudron et je vais changer la grande carte ici pour cette image de docteurs. Vous étiez ici des images, et c'est notre beau Dr. Il y a un endroit tout ici comme ça, et je vais enlever cette grande carte, la dimensionner et cliquer ailleurs. Et vous pouvez voir maintenant qu'il a déjà coupé. Donc, je vais double-cliquer et sélectionner ce film. Noyé. Rendons-le un peu plus petit comme ça. Ok, donc ça a l'air bien. Je ne suis pas sûr, mais je pense que celui-ci a l'air très proche de cette frontière, donc je vais la déplacer en dessous. Ok, alors voyons. Quoi ? Où est la taille de celui-ci ? Donc c'est notre liste, donc je pense que nous devrions déplacer une liste. Au moins, c'est le DP qui est en panne. Donc quelque chose comme ça. Maintenant, laissez-moi voir quelle est la distance. 10. Ok, donc maintenant, il est mieux parce que je pense que le matériel de conception Google conçu ils ont une certaine séparation entre la liste et d'autres éléments sur un DP, au moins. Maintenant, nous encourageons la séparation, et nous avons juste besoin de changer nos icônes ici. Ok, donc je vais faire glisser des icônes ici. Aussi, si vous le pouvez, vous pouvez modifier cet arrière-plan, qui est cette image de masque. Donc on peut le changer ici comme ça. Et je vais apporter cet arrière-plan de mon dossier SS, et je vais le remplacer par celui-ci. J' ai juste traîné l'image au-dessus de celle-ci. Ok, donc si je déménage maintenant en dehors de ça, ça va être quelque chose comme ça. Ok, donc encore une chose, si vous voulez, vous pouvez aussi superposer d'autres choses comme celle-ci, et je vais le remplir avec la décoloration, et je vais utiliser une certaine capacité comme ça . Peut-être que quelque chose comme ça prend dehors et vous pouvez voir que c'est le même effet que nous recherchions . Ok, alors faisons glisser cette image au milieu. Oups. Quelque chose comme ça. Ok, maintenant nous allons remplacer ces icônes. Alors passons à ça. Les dernières icônes de tâche. Et ici, nous avons l'icône. C' est un profil. Et voici la chèvre de la loi. Et le changement ici est celui-là. Donc je vais les saisir tous, les glisser dans mon dossier, les baser sur le meilleur tableau, pour qu'ils ne se mélangent pas ici. Et ce que je vais faire est de copier et d'aller dans l'icône de la boîte de réception de ce rôle basé ici. Non, je vais l'aligner en plus de ça. Je suis parti et je leur laisse juste la clé de l'icône de la boîte. Et maintenant ce que je vais faire, c'est que je vais changer la couleur pour cette couleur de surbrillance, qui était notre ça. Ah, couleur de surbrillance secondaire. Donc c'est à ça que ça va ressembler. Et pour celui-ci, vous pouvez voir qu'ils ont utilisé de la couleur sur les cheveux, qui est laissez-moi vous montrer quelle est la couleur de celui-ci ? 54% de capacité pour Phil couleur noir. Donc je vais faire ça va, donc on va tous bien. Il y a encore une chose. Si vous voulez le faire, vous pouvez déplacer ce logo en bas et mettre un peu de séparation de ligne. Donc, la loi, la chèvre est différente de tout ça. Mais si vous voulez le garder ici, c' est à vous de décider, je vais lire toutes ces icônes, et je pense que d'autres tirages de navigation sont faits. Cette partie va être au sommet. La partie statut va être au sommet. Tout va bien ? Parce qu'il a plus d'élévation et puis les deux hors de ces choses. Ok, donc tout est à propos de ce design. Je vous ai montré comment compléter complètement conçu tous ces. Sélectionnons-les et déplacons-les. Ou ici, déplacons-le à l'intérieur de Celles-ci. Ok, donc nous avons conçu six écrans et ah, merci d'avoir pris votre temps et de construire avec moi dans tous ces longs exercices. J' espère que vous avez apprécié cette leçon et appris les spécifications de conception de Google Madrid et apprendre à vous utiliser. Je construis rapidement votre design. Ok, donc ce qu'on fait ici, c'est qu'on grouille juste. Ah, basé sur les couleurs et la typographie et quelques-uns hors des éléments, tailles et distances en utilisant le matériel, directives de conception de matériaux Google, et j'espère que vous avez apprécié cette leçon. La leçon suivante. Nous allons utiliser la fonctionnalité d'exportation par lots ici, qui est dans l'exportation de badge pour exporter nos actifs dans différents compartiments de résolution . Pour xxx dp i xx e p i trois travaux supplémentaires un prochain 1.5 x et toutes ces différentes résolutions qui sont prises en charge par la conception de matériel Google. Si vous avez des questions à me poser, passons à la prochaine leçon. 36. Le mandat final Adobe XD: D' accord. Jusqu' à ce que vous sachiez que vous avez tout appris sur la conception de matériel Android et comment vous pouvez utiliser matériel Android conçu pour concevoir impressionnant APS à la recherche. Maintenant, vous m'avez vu faire un exercice pour vous. Maintenant, je veux que tu crées une autre mission. Ça va être votre dernière mission. Donc, vous allez créer Ah, application de messagerie très simple pour moi. Et je veux juste que vous fassiez trois écrans. Laissez-moi vous montrer quoi et quels écrans vous allez me montrer pour vos dernières missions. Créer une équipe ah, jeu de couleurs. Et appliquez cela à la conception des matériaux. Utilisé y enfants et ah, euh, essayez d'apporter cette vie. Vous pouvez utiliser vos propres idées si vous le souhaitez. Vous pouvez utiliser votre propre force personnalisée si vous voulez orteil. Mais je veux les trois écrans de votre part. OK, donc je vais passer à mon bureau et nous verrons ce que je veux vraiment de toi. D' accord ? D' accord. Maintenant, vous pouvez voir que je suis sur ce message plus application SMS et vous pouvez voir que je veux juste ces trois écrans d'un. C' est cette boîte de réception qui ont tous les différents contacts et tous les différents messages envoyés par vos amis et la date et peut-être l'heure ici. Et nous utilisons trois onglets fixes ici que vous pouvez voir en haut, et l'écran suivant sera l'écran de messagerie où les différents messages apparaissent et vous parlez à vos amis, puis la dernière reine sera contact. Bon, donc, SMS, je voulais que vous conceviez des SM, des contacts et des appels. Si vous voulez sauter l'appel, vous pouvez utiliser ce SMS et les deux écrans, en fait abandonner. Ok, donc trois écrans. L' un est avec ce SMS où vous parlez ou discutez avec vos amis. Un avec tous ces contacts et une cette boîte de réception où vous avez tous ces smmes. Alors essayez d'utiliser vos enfants blancs. Je vous ai fourni pendant les scores. Essayez de réinventer la roue. Alors allez-y et conçu cet exercice. Je vais passer en revue cet exercice et je vais vous donner des conseils sur chaud. Améliorez vos compétences en conception. Enlevez la capture d'écran du short. Vos conceptions les exportent en danger. Vous pouvez concevoir en trois x deux x ou quatre x xxx sdp I mais assurez-vous de créer un bel écran de tableau d'art de bonne taille où je peux facilement les voir. N' essayez pas de soumettre à des fichiers volumineux, il sera donc difficile pour moi de les afficher séparément. Ok, alors assurez-vous que les images que vous allez exporter à partir de vos tableaux d'art pour me montrer intégrées. Vous pouvez utiliser un peu plus de tasse si vous le voulez. Vous pouvez télécharger n'importe quel Samsung ou n'importe quel Android comme téléphone mock up et mettre ces écrans dans trois balises différentes et l'envoyer à moi. C' est une bonne façon de présenter vos designs. Ok, donc j'espère voir loin en avant et attendre vos devoirs qui commencent à les concevoir maintenant. 37. Les ressources d'exportation en Adobe XD: D' accord. Maintenant, dans cette leçon, nous allons nous occuper de la partie extraction des actifs de notre conception. Maintenant, l'extraction d' actifs est fondamentalement que nous devons donner à nos développeurs toutes les différentes résolutions pour deux x trois x Donc une image va être comme dupliquée 45 fois. Donc, nous devons donner cinq ou quatre fichiers pour soutenir tous les différents seaux de densité Google Android a les yeux pris en charge est supporté en ce moment. Ce que nous allons faire, c'est qu'il y a une fonction très créative dans Adobe X'd. Donc, nous allons cliquer sur ceci et faire le lot pour Mark pour les exportations de correctifs. Donc c'est notre logo. Assurez-vous que vous allez le nommer grand local, quelque chose comme ça. Et aussi ce local. Je vais l'appeler Logo Small, quelque chose comme ça. Donc je vais juste marquer ça, ça va être dans l'exportation de badge. Aussi, celui-là. Je vais le marquer comme une exportation de badge. En outre, si vous voulez toe, utilisez cette journalisation ici, vous pouvez sélectionner les deux hors d'eux. Venez sur G et utilisez ceci comme un bar Bt et Logan et aussi le marché comme l'exportation de badge. Donc tu allais exporter tous ces biens aussi ça, mais je sais ici, et c'est notre fardeau. Inscrivez-vous. Donc, je vais sur le marché comme mon atout. Alors continuez à le faire pour tous les actifs que vous avez utilisés. Vous pouvez également marquer ces ah, icônes ici. D' accord. Vous pouvez donc utiliser ces icônes et les marquer, ou vous laissez votre conception nos développeurs faire le reste. D' accord ? Donc, vous, ils peuvent obtenir ces icônes du système. Je cause des conceptions matérielles. Donc, vous n'avez pas besoin de vous soucier d'extraire toutes ces icônes. Ok, alors peut-être que ce bouton, nous avons besoin de ce brevet Subedi au Brésil. Je vais au marché des orteils. C' est notre évier en bois. Ok, donc je vais l'appeler évier, alors assurez-vous que vous les nommez correctement. Vous pouvez également parler à vos développeurs des conventions de nommage, ce qu'ils utilisent, il s'agisse d'utiliser un tiret ou un trait de soulignement. Oh, sont une autre méthode de nommer leurs feux quelque chose comme ça. Ok, alors peut-être qu'on peut s'attendre à ça. Ok, donc ce bouton, je vais être le nuage de synchronisation. Quelque chose comme ça. Ok, Donc une fois que vous avez sélectionné tout votre extrait et tous les actifs que vous voulez extraire. Juste nous allons orteil goto ce menu ici Exporter et lot. Il va donc exporter tous les actifs que nous avons marqués, alors assurez-vous de les avoir correctement marqués. Ok, donc sur cet écran d'exportation, nous allons sélectionner Android et nous avons conçu à 100% MDP. Je ne change jamais ça. C' est le dossier que j'ai sélectionné. Vous pouvez exporter vers le dossier que vous voulez. Formez-le. Essayez toujours d'utiliser BMG car il peut prendre en charge la transparence ici. Ok, donc , non, je vais cliquer sur Exporter. Il va exporter tous les biens. Voyons, où sont ces asserts et comment ils ont été exportés dans plusieurs tailles différentes. Ok, Maintenant, je suis dans mon dossier d'exportation et vous pouvez voir qu'il a créé toute la résolution différente. Prise en charge affirme tous les actifs qui entrent dans votre application. Ils vont être dans ces dossiers. Tribal sdvi triable, ldb I m d b a x DPS xdb I et triple X HD via Donc, si nous ouvrons celui-ci, vous pouvez voir les tailles sont très grandes, vous pouvez voir les boutons sont très grands. Le logo est très grand, donc si nous allons à celui-ci, vous pouvez voir tous les actifs sont un peu de taille moyenne pour les écrans extra haute définition , puis ceux-ci et ensuite les plus petits pour celui-ci. Donc, si nous cliquons dessus, vous pouvez voir où le minuscule journal en Grande-Bretagne. Normalement, je pense qu'on ne va pas aux pieds. Besoin de ces deux LDP et STP I nous allons avoir besoin de X m x x x et triple X. C'est ainsi que vous utilisez votre adobe X'd pour extraire tous les actifs utilisés dans votre application et le donner à vos développeurs. Dans la leçon suivante, nous allons apprendre à utiliser Zeppelin habillé. Extrayez toutes les couleurs, gorges et tout en utilisant votre Adobe X'd et donnez-la à vos développeurs. Et il aidera vos développeurs à construire rapidement le schéma de couleurs et la typographie ou votre hors votre application, ou même voir les spécifications que le bouton verrue sur la taille hors de la charge dans DP. Quelles sont les distances des différents boutons et éléments orthographiques dans les DP ? C' est donc un très bon outil. Dans la prochaine leçon, on va utiliser Zeppelin. Donc pour ça, je vais aller sur mon Mac. Eso prochain enregistrement d'écran sera de mon I Mac eso Vous voir bientôt dans la prochaine leçon. 38. ♥ Utiliser Zeplin & Android Adobe XD sur MAC: Ok, maintenant dans cette écoute, nous allons utiliser Zeppelin dot io pour extraire tous nos actifs et toutes les spécifications des développeurs et toutes nos protections de style et toutes nos distances entre les différents éléments en utilisant Zeppelin dot io Si vous avez pris mon ah, ce sera cours supplémentaire ou flux de travail plus que représenter les appels. Vous connaissez peut-être déjà Zeppelin dot io. Alors sachez ce que vous devez faire, c'est vous pouvez vous inscrire gratuitement et vous devez télécharger Zeppelin dot io pour votre système d'exploitation. En ce moment, il fonctionne avec l'application Mac. Vous pouvez voir ici, nous avons l'application Mac et il ya aussi une application Windows, mais à O b x d Juste le soutien en ce moment sur l'application Mac pour les utilisateurs Mac. Donc, si vous êtes un utilisateur de Mac, je pense que vous avez de la chance. Vous pouvez facilement extraire tous vos actifs et tout en utilisant cela. Ok, Alors téléchargez cette application, installez-la, et vous allez lancer cette application. Et une fois que vous le lancerez, il va montrer quelque chose comme ça. Ok, donc nous avons ce Zeppelin. J' ai supprimé mes projets précédents, donc il n'y aura que 13 projets. Donc, vous êtes dans un plus libre de sorte que vous pouvez juste garder un projet. Donc, je vais créer un projet amusant et il va être android. Et je vais appuyer sur les orteils, créer. D' accord. Donc je peux changer le nom, Toe GP outils, quelque chose comme ça. D' accord. Et les extensions. Ils ont déjà ajouté qu'il va utiliser examiner. Maintenant, vous pouvez voir ici, ils ont aussi le guide. Si vous cliquez dessus ou txt, ils vont vous montrer que vous devez aller à Export et Zeppelin pour croquis sur bx defict. esprit pour les magasins. Facile. Donc ce sont les quatre APS complets qu'ils prennent en charge en ce moment, donc je vais passer à mon Adobe X'd et vous pouvez voir ici. Voici le fichier ont été conçus. Je l'ai partagé en utilisant mes bibliothèques CC cloud. Alors comment ? J' ai ouvert celui-ci ouvert et je suis allé pieds fichiers cloud créatifs, et c'est mon extra dans la classe et le fichier d'écriture. Donc, je me suis ouvert ici, et maintenant ce que nous allons faire est que nous allons sélectionner tous les ennuis d'art aller à l'exportation de fichiers dans CEPAL dans. Ok, donc c'est le projet que nous ne remplacerons pas par l'importation. Et nous avons conçu MMD p I parce que c'est le Von X. Donc, nous allons sélectionner celui-ci, donc changer et cliquer ici, et il va commencer à télécharger différents écrans. Si un écran échoue, vous pouvez cliquer ici et réessayer une fois de plus. Ok, donc nous avons tous les écrans téléchargés. Maintenant, nous pouvons nous mêler avec eux et choisir différentes couleurs et typographie et tout. Ok, donc d'abord je vais aller avec cet écran d'ouverture de session. Maintenant, j'ai ouvert cet écran et vous pouvez voir si je clique ici il me montre la taille en DP. Ok, donc la distance entre ces deux-là est de 21 dB et ah, c'est ah les distances des deux côtés. 101101 jour être de tapis. 213 dP. Et si vous regardez sur le côté droit ici, nous avons ce panneau où nous pouvons ajouter nos polices de caractères. Ok, donc ce sont les fardeaux où on peut ajouter la couleur. Donc, si vous voulez ajouter cette couleur à notre guide de style, cliquez ici et elle est ajoutée. D' accord, même, si je veux ajouter le visage Styx ou le style, je vais aller l'appeler Ah dire AP nom quelque chose comme ça. Appuyez sur Entrée. Et c'est tout. Ok, maintenant vous pouvez voir en bas il y a une cour d'exemple, que vos concepteurs vont adorer. Vraiment l'amour. Ok, vous pouvez partager ces développeurs vidéo et ah, ils vont à la pointe. Obtenez le contenu que vous pouvez voir Voici ah, contenu tippy orteils. Ils peuvent le copier d'ici. Et celui-là, c'est Ah, texto par ici. Ils peuvent copier à nouveau. Vous pouvez ajouter toutes ces couleurs. Ce sont plus de couleurs que vous pouvez ajouter ces Ceci est dans le style que je peux voir comme sous-titre 14 sp. Ok, quelque chose comme ça. Ok, donc en ce moment j'ajoute tout mon retour différent sur différentes couleurs. Vous pouvez voir ici est ma couleur. Ma prochaine entrée est-elle active ? Quelque chose comme ça sur. Ensuite, nous avons ce mot de passe oublié Mot de passe. C' est un lien. Alors je vais l'appeler le lien suivant. Quelque chose comme ça. Donc, voici comment vous allez orteil construire votre Steiger jus Zeppelin outil ire fléchettes. Ok, donc encore une chose, c'est que nos actifs sont maintenant vous pouvez voir que vous pouvez le télécharger dans cinq agriculteurs différents du BND. Donc, vos développeurs, ils vont orteils, suffit de cliquer sur celui-ci et il va télécharger tous les actifs dans ce dossier. Donc, ce sont les quatre sec créé Zeppelin afin que vous puissiez exporter dans ce dossier comme ça et vous pouvez voir si je clique sur ce bouton. Il me montre la taille de ceci, mais j'appuie juste sur ma touche ici 90 dp par 42 db Donc c'est vraiment bon. Vos développeurs, ils ont besoin des tailles dans DP Ok, pas les images. De même, si vous allez à d'autres écrans, vous pouvez avoir différentes icônes ici. Ce sont des icônes système aussi les tailles hors. Ceux-ci, vous pouvez voir ceci est 80 80 p haut et 3 60 db vied. Donc, pour celui-ci, c'est une hauteur de trois db. Donc, vous pouvez avoir ceux qui sont ici. Ok, aussi, si vous double-cliquez ici, vous pouvez voir ici nous avons la couleur, donc je peux je vais ajouter cette couleur primaire. C' est aussi notre tueur pour la barre d'état. Donc je vais ajouter ceci. Ok, alors appelons-ça la barre d'état. Donc je sais que la décoloration appartient à l'état d'une tache. En outre, cette couleur que vous pouvez ajouter à la fin comme la barre F, quelque chose comme ça. Ainsi, vos développeurs peuvent savoir que c'est cela appartient à l'ambre. Donc, vous allez orteil Ajouter toutes les couleurs différentes et tous les différents textiles. C' est votre 12 point ou 12 SB um suivant quelque chose comme ça. C' est votre texte blanc. Donc, vous allez aussi utiliser cette lumière blanche. Suivant son prix Un médium. C' est pour notre bar d'air. Donc je vais utiliser une bouteille ici. Quelque chose comme ça. Retour. Retournez au tableau de bord. Donc, vous alliez continuer à faire cela pour toute votre application Et sélectionnez chaque textile de style que vous avez utilisé chaque couleur que vous avez utilisée. Et puis nous allons aller au guide de style et vous pouvez voir ici nous avons tout le médecin fait automatiquement. Ici, nous avons toutes les couleurs Long, gris, noir comme peut-être lien voler une barre d'action noir bleu foncé gris. Donc nous avons toutes ces couleurs et du côté droit, vous pouvez voir si je le rattrape pour l'un ou l'autre. Vous pouvez voir ceci est l'androïde et développeur marqué pour leurs textiles et leurs palettes de couleurs . Donc, toutes les palettes de couleurs et les textiles empilés seront générés automatiquement et ils peuvent simplement copier et coller ce froid ici. Ok, donc tout est à propos de la façon dont vous pouvez utiliser Zeppelin. Si vous voulez ajouter d'autres extensions ou que vous voulez partager cela avec quelqu'un que vous pouvez ajouter, invitez d'autres personnes comme cliquer ici, inviter par e-mail ou utiliser un nom. En outre, vous pouvez ajouter à mou sur. C' est le lien. Vous pouvez copier le lien et ah, une chose de plus est que si vous voulez oh, ajouter plus d'extensions ou si vous développez dans une autre langue vos développeurs sont ils ne sont pas en utilisant Androids vous a dit. Ensuite, vous pouvez aller explorer les extensions, et il va vous montrer d'autres extensions qui ont bean développé par Zeppelin ou ils sont développés open source. Vous pouvez voir vos cheveux rapide examen objectif C, Ill rapide et objectif C est pour, um, um, Mac ou IOS iPhones. CSS moins s est pour le Web. Un CSS est également styliste pour le Web. L' œuf indigène en est un autre. Donc, si vous voulez ajouter vous pouvez notre air à Zeppelin Vous pouvez choisir vos outils gp produit et vous pouvez ajouter à Zeppelin. Et ah, c'est comme ça que vous pouvez utiliser votre autre extension ici. D' accord. Donc, une fois que j'ai fini, je vais cliquer sur les pieds par ici. Vous pouvez voir que c'est un que je peux sélectionner n'importe qui. Je peux désactiver n'importe qui si tu veux. Si je veux réagir tribunal autochtone. Je vais l'obtenir, donc nous avons des cerceaux ici, nous avons les Oops directs. Donc ici, nous avons tout le tribunal natif réagir. Ce n'est pas différent, sorte que vous pouvez voir des couleurs et du contenu constants. Textiles. C' est totalement différent. Guide de style différent dans différents motifs de cordage. Vous pouvez voir en haut là-bas dire qu'il est réallumé Si vous voulez changer quelque chose ou quelques paramètres de cela, vous pouvez utiliser diable qui supposent un grand être à vous-même ou quoi que ce soit. Ainsi, vous pouvez dire à vos développeurs que c'est l'application avec laquelle nous allons travailler et il sera plus facile pour vous de collaborer avec vos développeurs sur ce projet de conception de matériel Android . J' espère que vous avez apprécié cette leçon. Si je reçois ce temps, je vais faire la vidéo en utilisant le jamais marqué sur. Il s'agit d'un autre logiciel ou application pour collaborer avec vos développeurs sur n'importe quel projet aérien ou n'importe quel projet. Et ah, c'est tout. Si vous avez des questions, vous m'avez posé, passons à la leçon suivante. 39. ♥ 9 patchs Adobe XD: Maintenant, je vais parler d'un concept très différent qui s'appelle neuf Patch Tool et neuf ancien générateur d'outils. Il y a beaucoup de rabais pour différents outils en ligne où vous pouvez les utiliser comme un orteil de designer. Créez neuf illustrations de patch pour vos développeurs. Savoir quoi ? En fait neuf signifie patch est en fait, Par exemple, si vous avez vu des boutons sur vos appareils Android ou ah, sur vos tablettes Android. Ok, Donc si vous avez vu ces boutons, vous pouvez voir que si ce même fardeau est sur un appareil mobile, par exemple, laissez-moi vous montrer celui-ci ce lavabo à tout, mais il peut être étendu en utilisant neuf pièces d'art. Ok, Donc, par exemple, si vous passez généralement en mode tablette ou si vous utilisez une tablette pour accéder à votre ah, cette ah, application ce qu'il fait cette image, cette image de neuf patch, Ce qu'il va faire, c'est qu'il va étendre ce bouton automatiquement pour s'adapter à l'écran suivant. Donc, si le bouton de votre écran de tablette est un plus grand, nous allons utiliser un seul élément graphique pour produire plusieurs boutons de taille qui vont être générés automatiquement par studio Android et enregistrement. Ok, donc le concept est très simple. Ce qu'on va faire, c'est qu'on a juste besoin de ce fond à l'arrière, qui est ce rectangle quatre. Et je vais faire un clic droit et l'exporter. Exporter par exportation, sélectionné à droite. Et je vais l'exporter dans mon dossier. D' accord ? Non, je vais accéder à mon dossier et vous pouvez récupérer n'importe qui de ces eso. Je vais prendre ce x x HDP I, et je vais le faire glisser et le déposer ici. Ok, donc c'est un outil très simple. Et maintenant vous pouvez voir ici nous avons des limites ici en plus et ah, le laissez-moi sélectionner ce xx STP. J' ai été sélectionné, en fait. Ok, alors choisissez ce numéro. La résolution que vous avez conçue pour cette image. Ok, donc ce qu'il va faire, c'est que vous allez voir des lignes ici. Ce sont quelques lignes noires à gauche et à droite. Et en haut et en bas. Tout d'abord, nous allons comprendre ce que ces lignes signifient réellement. Donc la ligne supérieure et la ligne gauche OK, donc la ligne d'arrêt et la ligne de gauche. Cela signifie que cette section toute cette section désespérée de haut en bas, y compris cette ombre. Il va être répété si le bouton va se développer dans la direction horizontale. Ok, donc ça va se répéter, répétez . Ces cochons vont se répéter ici, ici ou ici, et ces coins seront repoussés. OK, donc dans ce genre d'acte, ce qu'ils essaient de faire, c'est qu'ils élargissent le fardeau, mais les coins et cette ombre, ils ne vont pas, vous savez, euh, se pixéliser ou se déformer. Ok, donc cette partie et cette partie vont être ceci va être répétée. C' est pourquoi il s'appelle Patch neuf Batch. Il répète ce patch encore et encore. Ok, donc Ok, maintenant c'est à propos de la répétition des sections de ce graphique. Maintenant, ces deux lignes sur la droite et sont en bas. Cela signifie le caressage du contenu. Alors, où le contenu ou le texte sur ce bouton va tomber ? Si cela va prendre de cela à ce bouton entier dans cette zone d'ombre. Non, il ne va pas le prendre. Prends cet espace. Donc nous allons aller à la literie de contenu des orteils et nous allons les orteils comme ça. Et nous avons besoin de notre contenu ou du texte du bouton ici à l'intérieur du Spartiate. Donc maintenant, vous pouvez voir que ces lignes ont été Non, Ces lignes sont plus petites et elles ont été raccourcies parce que nous avons corrigé l'ajout combats de contenu ici. Ok, donc maintenant vous pouvez voir ce sont des résolutions différentes pour MDP I extra ph d p i xx sdp I et triple X HDP I Okay, donc il va orteil générer tous les graphiques pour toutes les différentes résolutions. Et nous allons donner un seul fichier cet arrière-plan avec l'ombre incluse, et vos développeurs vont baiser vos mains que nous pouvons utiliser ce simple graphique et ah, euh, euh, dans n'importe quel système, n'importe quelle tablette, n'importe quoi. OK, donc il va se développer tout seul. C' est donc le concept majeur qui sous-tend tout cela. Ah, um générateur de 9 tampons. Os optiques est je pense, le rivage re visible, peut-être quelque chose comme ça, mais je ne sais pas grand-chose à ce sujet. Et tu n'as pas besoin de t'en inquiéter. Assurez-vous simplement que vos zones étendues et vos paris sur le contenu sont parfaitement définis. Ok, une fois que tu auras fini avec ça, tu vas cliquer sur cette ville. Lord Zip et il va orteils. Téléchargez le fichier. Laisse-moi extraire ce fichier et ah, ouvre-le. Et ce sont la résolution 45 qui va prendre en charge STP MDP I résolution différente que si vous êtes développé, nous pouvons l'ouvrir. Vous pouvez voir ces lignes sur ce graphique, d' accord ? Et vos quartiers, ils peuvent les utiliser et ils peuvent générer n'importe quelle sorte ou n'importe quelle taille de ce pardon sans déformer son ombre ou ses coins. Ok, donc c'est le secret derrière tout ça. Alors maintenant vous savez comment vous pouvez extraire vos boutons ah. Est-ce que ce genre de graphismes sur ces neuf patchs graphiques d'ici ? Et une autre chose, c'est que c'est la convention de nommage. Vous pouvez voir à la fin du nom de ce fichier il y a point point neuf point PNG ajouté . Donc, chaque dossier que vous allez porter le nom des orteils, vous allez les orteils. Nommez-le et vous allez ajouter la porte à neuf. Donc, il est fondamentalement dire à votre système qui est neuf fichier patch. J' espère donc que vous avez apprécié cette leçon. Vous pouvez et faire ce genre de neuf patchwork avec tous les fardeaux. Je pense que vous avez juste besoin d'en produire un pour tous ces fardeaux et peut-être un pour celui-ci pour ce bouton bleu foncé et vous avez fini, vous n'avez pas besoin de créer orteil comme des centaines de fichiers. Il suffit de créer à ces neuf éléments graphiques de patch, puis ils vont servir tous les différents boutons sur votre appareil. J' espère que vous avez apprécié cette leçon. Et si vous avez des questions concernant neuf règle Pashto ou tout ce que vous pouvez me demander concernant Android, cette conception matérielle, j'espère que vous avez apprécié cette leçon. Passons à autre chose et apprenons quelque chose de plus. 40. Whats New Material Design 2.0: Ok, donc ceux qui errent que pourquoi je n'ai rien dit sur le matériel conçu pour pointer ou la dernière version du design matériel. Si vous regardez les lignes directrices de conception des matériaux, ils les ont complètement remaniés, et ils ont complètement changé tout. Mais la plupart des 90% des spécifications ou spécifications de conception, ils sont les mêmes. Je vais donc vous montrer dans ces deux ou trois leçons que ce qui est nouveau dans la conception des matériaux et comment vous pouvez tirer profit de ces nouvelles lignes directrices en matière de conception des matériaux, les lire ou les suivre. Ok, alors commençons par ce qui est nouveau. Ils ont donc ajouté peu de choses nouvelles. Ce sont trois nouveaux champs de texte. Ils ont un mécène différent. Maintenant, le modèle de champ de texte est différent. Il y a deux personnes qu'ils suivent sur la base de leurs recherches basées sur des preuves, c'est qu' on a cette extension de A B. Je vais vous montrer tous. Ok, alors on a cette densité de couche. Donc, plutôt que d'utiliser des heures de jeu de bureau et, um, couches mobiles ou haute densité, ils ont changé le pied faible densité et haute densité. Donc, si vous travaillez sur un plus grand écran où les utilisateurs peuvent avoir une souris pour cliquer. Ensuite, ils l'appellent Haute densité ou ah, un écran qui est très, très haute densité, comme 600 BB I ou écran très dense, où vous pouvez utiliser des tailles DP plus petites orteil. Vous savez, l'utilisateur peut facilement taper sur ce côté dp parce qu'il est très dense. Ok, alors commençons. Je vais vous montrer quelques choses. abord, je vais vous montrer ces champs de texte que les bébés F étendus que ce truc de mise en page de densité . Ok, donc nous avons le nouveau Léo. Ceci est fondamentalement un vieux patron qui devient très populaire avec le Ce titre se déplace vers le haut et vous pouvez voir ceci est le nouveau champ de texte, qui est mieux, je pense que de la précédente en termes d'expérience utilisateur et en suivant le modèle qu'il s'agit en fait d'un champ de texte. Je vais vous montrer où ils ont. Il s'agit essentiellement de deux types d'aliments. L' un est celui-là. C' est notre domaine client avec l'étiquette. C' est ah, champ avec le contour. Onley est un AVC en bas ? Ok, donc c'est normal et ce sont des activités. Donc, une fois que quelqu'un clique dessus, il va aux pieds. Déplacez l'étiquette vers le haut et l'entrée sera mise en surbrillance comme ceci. Donc je vais vous montrer l'interaction réelle. Ok, donc vous pouvez voir qu'il y a une interaction. Donc, si vous en voulez si vous voulez les utiliser dans votre conception, vous pouvez les utiliser dans votre conception et ils vont interagir comme ça. Donc j'aime vraiment ça, ce nouveau patron et ah, c'est vous savez Ah, Et si vous voulez connaître les spécifications que vous pouvez et aller ci-dessous et il y a quelques modifications que vous pouvez voir ici, vous pouvez faire équipe en fonction de votre application, vous pouvez voir ici. En fait, j'ai dit que ce qui est ce primaire sur la surface et la réponse pour les sculpteurs signifie donc vous pouvez voir qu'ils utilisent juste une couleur vita dans différentes variations. Et pour afficher ces champs de texte, vous pouvez voir ici ils ont cette grouillante. Donc, en fait, dans cette nouvelle version hors conception matérielle. Vous pouvez relier votre application quelle que soit la couleur que vous voulez. Donc, c'est vraiment, je pense, vraiment bon pour les concepteurs, et ils ne les limitent pas et vous pouvez voir ici a un autre exemple là-bas, ils utilisent des polices personnalisées avec association personnalisée. Et ah, si je vais en bas, vous pouvez voir Voici les spécifications du champ de texte 56 cacher à 80. Ce sont presque les mêmes 16 une ligne DP et ensuite nous avons 12 dp 12 dp des deux côtés. C' est leur combat par défaut car je pense que ce genre de choses où il y a du texte à l'intérieur d'un conteneur. Donc, si vous voulez oh, voir plus, vous pouvez continuer et cliquer sur les spécifications et vous pouvez masquer la literie et les dimensions et base du texte. Donc, la ligne de base de texte est que le texte va rester sur cette ligne et leur ligne de base est basée sur quatre lignes de base de texte de base de base de base de données. Alors assurez-vous que si vous ne connaissez pas la ligne de base, vous devriez voir mon cours typographique pour vous êtes designers. Maintenant, je vais aux orteils, reviens. Ok, donc c'est la nouvelle, euh, chose qui fait équipe et ces deux nouveaux mécènes pour les champs de texte. Voyons maintenant ce qu'ils ont cette fabuleuse. Je suis allé là un matériau conçu pour pointer ou d'accord, Donc voici le Fab, qui est la carte flottante action, mais il va orteil ont différents clients. Laisse-moi te montrer. OK, donc voici dans une direction qu'il peut effectuer. Si vous cliquez sur ce bouton d'action juste mais flottant, il va vous montrer plus d'actions par défaut que vous pouvez faire avec cet écran. Vous pouvez voir ici que c'est leur nouveau. Vous pouvez voir n'importe quelle mission derrière elle. Il a de la lumière, de la peur, peur, couleur et de l'émission. Et cette icône est en train de se déplacer et de revenir dans une transition. Donc ce sont peu de choses. En outre, ils montrent les interactions sur ce qu'il est contexte ours. Donc, si vous essayez de basculer entre deux éléments en haut, ils vont changer cela. Ah, je peux par ici. Ok, donc vous pouvez voir que je viens orteil a changé. Donc ce sont peu de comportements. Ils ont ajouté quelques autres choses et ils ont montré que vous n'allez pas en utiliser plus de cinq ici. Donc, si vous utilisez quelque chose comme ça, ce n'est pas un bon modèle à utiliser. D' accord ? Aussi, vous pouvez voir que vous pouvez le faire. Tu peux le faire. Et c'est donc une toute nouvelle interaction. Je pense qu'ils ajoutent quelques choses comme vous pouvez voir ce que Ici. C' est totalement différent Composé, nouveau et envoyé à tous les. En outre, vous pouvez voir que vous ne pouvez pas ajouter trop d'éléments sont très peu d'éléments. Donc, si vous en voulez un, il va être sportif comme traiter quatre ou cinq, peut-être des objets maximum. C' est donc leur nouvelle Grande-Bretagne fabuleuse. Il va aussi le montrer dans ce fab étendu. Ceci est étendu fab et il va apparaître dans cette étiquette et icône plus. Il va donc faire l'expérience de quelque chose comme ça. Donc il va flotter au-dessus de tout à Cardiff. Vous êtes en train de naviguer dans le projet e commerce app R E commerce. Ça va montrer quelque chose comme ça. Vous pouvez également l'étendre ici. Si vous vous souvenez des marges des deux côtés, c'est 16 DP alors ne le faites pas. Alors gardez ça à l'esprit. Ici, nous avons que vous ne pouvez pas utiliser deux lignes. Tu as besoin d'orteil, fais quelque chose comme ça. N' utilisez pas beaucoup de gros texte sur ce genre de bouton d'action flottant de Grande-Bretagne ou de fabs. Ok, donc il s'agit d'un bouton d'action flottant. Ils ont ajouté quelques instructions supplémentaires et une émission. Je les aime vraiment. Ok, maintenant parlons de la densité dont ils parlaient. Qu' est-ce qu'un tuk dense ? Ainsi, vous pouvez voir la densité par défaut est de cette façon prennent en charge les cibles de démarrage et les marges cibles. Il est donc plus facile pour l'utilisateur de taper. OK, mais sur la densité élevée, nous allons utiliser des choses plus petites si cela améliore son expérience. Cela signifie donc qu'il y a des cibles tactiles plus petites à ce sujet. Ces écrans haute densité. Ok, alors quoi ? J' ai de l'industrie. Voici donc un exemple très simple. Vous pouvez voir ceci est à la liste des éléments et vous devez les vérifier afin que leur valeur par défaut minimale est de 48 DP pour n'importe quelle cible tactile ou tout ce que vous avez besoin d'interagir avec. Non, mais sur votre écran haute densité, vous pouvez réduire la taille de 30 orteils. Donc, cela signifie que vous pouvez voir ceci est mon curseur de souris, et je peux facilement taper dessus ou cliquer dessus en utilisant ma bouche. Mais pour un doigt, ça devrait être quelque chose comme ça. De même, c'est le sien. Notre texte signifie 44 56. C' est leur standard et vous pouvez voir ici. Voici les boutons d'action. Les sont en bas, comme fait ou peut-être voir le fichier ou quelque chose comme ça Vous pouvez voir ou entendre le toucher. La cible cible cible est essentiellement 52. C' est la zone définie pour ces deux 36 ici nous avons 24. Donc, c'est comment vous pouvez utiliser et appliquer que peu de choses dont vous avez besoin orteil Ah, large est si quelque chose est une tâche concentrée comme quelque f ou quelque chose. L' application portion off vous demande une entrée. Vous n'allez pas utiliser la haute densité. Appliquer a la densité élevée. Vous allez toujours utiliser la faible densité. OK, donc c'est une chose. Donc, il y a un autre exemple ici, vous pouvez voir ceci est un écran haute densité et ils utilisent des marges très larges. Ok, Donc plus petit cuir brut et les marges sont très vice donc il peut avoir plus d'espace parce que nous avons plus grande taille d'écran Non, sur un écran plus petit, peut-être une tablette ou des tablettes plus petites. Vous pouvez voir qu'ils utilisent des marges étroites plus petites et la hauteur de chaque vrai est un peu plus grande. Donc c'est en fait qu'ils sont accommodants pour l'espace et, ah, la résolution. Maintenant, ces Ceci est sur les spécifications de la cible tactile. Ce sont les mêmes. 36 est la hauteur de la charge minimum, mais c'est une cible de robinet va être 48. De même, une icône est 24 mais un agoniste de pas 48 dp. De même, pour ces icônes de système plus grandes, le 48 est la taille du robinet. C' est la taille minimale. Ok, donc encore une fois, ce sont des hommes. Il existe de nombreux exemples pour tous ces éléments liés à la densité. Hauteur de la ligne. Vous pouvez également changer la hauteur de la ligne pour les densités de typographie comme vous pouvez le voir ici, nous avons ah, plus grand écran ou écran haute densité où nous pouvons raccourcir notre ligne haute afin que vous puissiez voir ou entendre. Ceci est assis à la hauteur de la ligne de 20 ligne de base 20 Soyez un signe et voici vous pouvez voir que nous avons 30 orteils, donc ces deux lignes sont deux séparées l'une de l'autre. Donc ici, nous avons écran basse densité et ici nous avons haute densité vous demandant de voir qu'ils sont basés Sign est le même pour la ligne Pickard. C' est donc tout au sujet de ces trois nouvelles choses qu'ils ont, qu'ils offrent. J' espère que vous avez apprécié cette leçon. Je vais vous expliquer quelques points supplémentaires dans les deux prochaines leçons, alors passons à la leçon suivante. 41. Nouvelles options de conception pour: quelques choses passionnantes que je voudrais discuter ici sur le matériau conçu pour pointer ou nouvelle version, qui est qu'ils supportent quelques autres éléments de conception comme les coins et les bords incurvés et les coins arrondis. Donc, vous pouvez voir ici, nous avons cet exemple sur leur application de brillance de site Web. Si vous n'avez pas regardé Google Material Design Conference, je pense que c'est juste que vous devez savoir. Ok, donc vous pouvez voir ici il y a une surface bordée par ici et ce conteneur ou ici il a un bord sur le côté gauche parce que leur sanctuaire est le Je suis sorti de l'éclat est ce diamant ? Donc ils utilisent cette fille pour montrer une forme de diamant. Ok, donc sur là aussi, vous pouvez voir ce qu'il ajoute au panier Icône sur. Il y a un bord par ici. Ok, donc c'est très différent. Ils soutiennent toutes ces nouvelles choses. Si vous regardez celui-ci, vous pouvez le voir ici dans le Ceci est la même application et il est sur une taille de tablette. Et ici, ils montrent que comment vous pouvez montrer votre ou transformer tout votre matériel conçu en équipe en nouveau niveau entier sur différentes lignes de grille et différents appareils mobiles et tablettes de bureau . Et ah, vous pouvez voir ici qu'ils ont le bouton Spartan ajouter au panier. Vous pouvez voir qu'il est vraiment beau. Les ombres sont également très légères et elles ne ressemblent pas à des ombres dures de conception matérielle 1.0 et aussi l'utilisation de ce type de texte personnalisé de quatre styles. Cela rend la recherche de ce site vraiment cool. Ok, donc vous pouvez voir le texte qu'ils utilisent est Rubik light. C'est leur échelle typographique . 34 24 2014 16 14 14 12 14 96 est leur plus gros titre. Donc c'est vraiment de bons designers Brie et nos développeurs, ils ont tous les deux quelques options pour, vous savez, il a utilisé leur créativité dans plus d'autres façons que d'avoir ah, street edge ou ici. Ensuite, il y a un autre exemple Celui-ci, c'est l'écran Et si vous le regardez, c' est aussi avoir des coins arrondis que vous pouvez voir ou entendre. Oh, ici. Donc c'est vraiment cool. J' aime ça. Nous avons plus d'options pour travailler. Nous avons plus de domaines sont plus que vous pouvez voir ici. C' est leur onglet Tab AB sont vous pouvez voir qu'il est totalement différent de ce que nous avons conçu ici . Donc, nous sommes très libres de, vous savez, concevoir quelque chose comme ça. Donc, il a l'air vraiment cool sur il ne regarde pas totalement design matériel. Il est à la recherche qu'ils ont certains donné certains que vous pouvez dire de l'espace pour travailler avec. Ils ont donc donné d'autres options aux designers pour explorer leur créativité. Donc j'adore ça. Ces nouvelles options que vous pouvez voir ici au bas de nos voitures. Ils ont des coins arrondis. Ils ont l'air vraiment sympa. Vraiment cool. Alors gardez cela à l'esprit Si vous concevez quelque chose, vous êtes maintenant prêt à concevoir quelques choses comme ça. Si vous êtes designers sont vos développeurs Désolé. Si vous êtes des développeurs, dites que nous ne pouvons pas concevoir cela. Cela n'est pas possible dans la conception des matériaux que vous pouvez leur montrer ces exemples sur les lignes directrices de conception des matériaux . Ok, donc c'est tout au sujet de cette nouvelle ouverture dans les options de conception pour les concepteurs et même les développeurs. J' espère que vous avez apprécié cette leçon. Passons à la leçon suivante. 42. Spacer de la grille dans Matériaux 2.0: comme je l'ai mentionné précédemment dans ma leçon que leur méthode d'espacement et leur guide de base et comment vous allez utiliser des matelas de ligne clé dans votre conception mature. C' est essentiellement la base principale de la compréhension de la conception des matériaux et de la façon dont vous pouvez l'utiliser. Maintenant, vous pouvez voir ici tout est aligné sur ADP. Je le traverse rapidement parce que j'en ai déjà discuté. Quatre grade D B Pour le texte, vous pouvez voir les petites cases. Quatre db Cette plus grande 12 boîtes est ADP. Alors, Eddie, sois le rembourrage de la marge supérieure au fond de 12 profondeurs. C' est pour la navigation partum. Ici, vous pouvez voir votre partie de la ligne de navigation avant DP cred. Et si vous regardez ici sur l'abbott et le bouton Action flottante aligné orteil grade ADP . Donc, pour le langage basé sur DP pour le texte que vous pouvez voir ou entendre ici nous avons Kevin et bonjour. Vous pouvez voir qu'ils s'alignent avec cela. Ces petites lignes ou cheveux lignes rouges, ils sont fondamentalement chaque ligne est quatre dp à l'écart ou quatre dips les uns des autres. Donc, ici, nous avons encore quatre db, même si vous utilisez quatre d B ou un D. P. Ils sont des multiples l'un de l'autre donc tout va s'aligner. Si vous avez doublé avec une profondeur, il va également aligner avec quatre DP Donc ici vous pouvez voir sur. Ensuite, nous avons cette liste et 48 dp pour un seul article et vous pouvez voir en haut Ils ont laissé trois lignes, donc cela signifie 12 dp off top rembourrage ou marge. Alors gardez ça à l'esprit. Ils utilisent 12 dp beaucoup de temps libre comme leur marge que vous pouvez voir ici. C' est donc ça qui a du sens. Vous allez connecter tous les éléments les uns avec les autres. Alors c'est la même chose. Le titre pour tout cela va orteil ont 72 dp off marge de la gauche. Donc, c'est tout de même. Vous pouvez aller de l'avant et vous pouvez regarder tout ça. Ok, donc maintenant vous pouvez voir qu'ils ont ça. Ah, il y a la taille de bloc 64 pour cela est pour les autres écrans mais les extrémités et tout ça. Ok, donc vous pouvez vérifier cette méthode d'espacement. Je vous ai montré la base de la méthode d'espacement. C' est la même chose. Mais j'ai pensé que je devrais l'expliquer à nouveau parce qu'ils ont changé leur guide de conception des matériaux . Et c'est regarde, peut-être que vous pourriez être confus que ce qui se passe ici ? Maintenant vous pouvez voir ici nous avons cette cible tactile. J' ai déjà dégoûté, Donc j'espère que vous avez apprécié cette leçon. Si vous avez des questions à me poser, passons à la prochaine leçon. 43. Types et États de boutons: D' accord. Maintenant, dans cette leçon, je vais vous expliquer notre révision plus sur la Grande-Bretagne. Il y a quelques types différents de mais et c'est un texte simple, mais Et ceci est décrit, mais et c'est conteneur, mais Et c'est un autre bouton, qui est bouton bascule. Il s'agit donc de quatre types d'armes différents. Ok, donc il y a une autre chose qui est liée à ce bouton. Ce bouton montre l'accent mawr. C' est plus fort. Il a plus de conteneur lourd. Cela a moins d'importance. Donc vos yeux sont plus attirés par celui-ci que celui-ci. Alors encore une chose. Tout le texte est majuscule. C' est un autre. Je pense que je Vous ne l'avez pas utilisé dans mon design, mais je pense que vous devriez l'utiliser ainsi mais n'avez pas tous les bouchons. Et c'est comme ça. Ok, Donc cet accent est fondamentalement du concept de conception visuelle que les choses qui ont besoin de plus d' attention, ils doivent avoir un visuel plus vif. Attends, donc ils l'utilisent très correctement. Ok, donc vous pouvez voir que ce sont leurs principes de conception. Si vous ne savez pas ce qu'ils sont identifiables trouver clair. Assurez-vous donc que vos boutons sont clairs, ils sont facilement trouvables L'utilisateur peut facilement les voir. Ceci est un quatre danses et significateurs si vous vous souvenez de ma leçon de l'expérience utilisateur conçu pour les débutants identifiables. Et ils peuvent facilement être un séparément des autres éléments que c'est un fardeau. Ok, donc ce sont quelques choses que je voulais vous montrer avant de bouger les pieds, vous savez, quelques leçons de plus, et puis nous avons cette hiérarchie en placement à nouveau. Ils ont montré un grand accent sur les médias. Memphis est peu d'accent. Donc, si vous utilisez une couleur très nette, cela signifie un accent élevé. Ok, donc voici vous pouvez voir ce sont quelques articles ici, et ah, et ah, ce bouton va être le plus avoir l'accent parce qu'il est mis en évidence et aussi élevé et plus grand en taille. C' est donc ce qu'ils montrent ici contenue. Mais et cela est également a une grande importance. Cela a l'accent le plus élevé que celui-ci et ensuite celui-ci. Ok, donc ce truc d'accent, je pense que j'ai oublié de vous parler de celui-ci, et je pense qu'ils l'ont montré dans leur matériel conçu pour pointer ou guider, prêt, sérieusement, et maintenant vous pouvez voir par ici. C' est ainsi que ces boutons sont utilisés là, montrant que vous devriez les utiliser comme ça ou non. Ok, donc n'utilise pas trop de texte pour ce genre de parents comme la table d'Ezard dans ce café. Et aussi, je pense que ce n'est pas capitalisé. Donc, ils vous donnent la prudence que même si ce n'est pas un très grand autre, mais vous ne devriez pas le faire. J' espère que vous avez apprécié ces leçons. Ce sont quelques états différents qui ont été concentrés sein. Ça va aller aux pieds. Faites un peu d'animation. Ceci est désactivé. Je pense que l'utilisation désactivée en utilisant l'opacité à 50%. Ok, donc, euh, c'est tout. Je pense que vous devez connaître ces états, et vous devez savoir quel est l'accent mis sur ces boutons et comment les utiliser. J' espère que vous avez apprécié cette leçon. Si vous avez des questions à me poser, passons à la prochaine leçon. 44. Liste dans le matériel 2.0: Parlons maintenant du matériel conçu pour pointer ou listes. Vous pouvez voir ici est l'équipe de matériel de grue. Et ils ont ces listes, ces images et ces lieux et ce sont des propriétés disponibles. Ok, donc, même, ils ont des spécifications de carburant. Ici, il y a trois types de listes hors ligne, et puis nous avons deux lignes ici. Vous pouvez voir la double ligne, et ensuite nous avons trois lignes. Ok, Donc si vous voulez voir les spécifications de chacun d'eux, vous pouvez cliquer ici et le cahier des deux côtés est 16 pour ceux-ci. Ok, 16 pour cet article de la liste. Cachons les caresses. Maintenant, Dimension est éteinte. 88 pour deux lignes. C' est 72 DP et forcer une ligne. Je crois que c'est 56. Laisse-moi voir. D' accord. Oui. Forcer la ligne. C' est 56. Ok, Donc si vous voulez voir l'une des spécifications, vous pouvez cliquer ici et laissez-moi vous montrer l'exemple de deux lignes. Et ici, nous avons le 64. C' est un autre 1 64 avec deux lignes. Je pense qu'ils utilisent ça. Et Gmail, je suppose. Lire son 2016 des deux côtés. 28. Je pense que c'est une question de cheveux supplémentaires. Par exemple, il y a deux minutes ou quelque chose comme ça. Donc ils utilisent ce bloc. On est là. Ensuite, nous avons 28 des premières lignes de base de 28 DP. Il va rester sur la ligne 28 dp par ici. D' accord. Et pour ce texte, il sera 20 sur DP Blow celui-ci. Donc, fondamentalement, la hauteur de la ligne essaie de passer ici entre ces deux taxes ici. Ok, donc c'est tout ça. Vous pouvez voir la taille de l'image ici. C' est 40 DPS, que j'ai utilisé dans mon cours. Et si vous voulez inclure une icône ici, vous pouvez voir si je la cache. Il y a une icône, petite icône Bluetooth. Il est utilisé par 24 par 24 dp et 32 dp est la distance entre la petite icône et les lignes. Et si tu as plus grand, je suis parti. La distance est de 16. Ainsi, par exemple, peut-être une image matrimoniale pour la personne qui vous a envoyé un e-mail. Ainsi, vous pouvez les utiliser pour former un carré ou un cercle, ou vous pouvez utiliser l'image off 100 par 50 60 Pièce ici. Ok, donc ce sont les nouvelles spécifications qu'ils cherchent créer. Et j'aime vraiment la façon dont ils ont mis en œuvre ce concept de base en elle. Ici, nous avons la marge inférieure supérieure ADP et ADP ou caresser Vous pouvez voir pour les éléments de la liste. Ok, donc je pense que c'est tout. Ok, donc c'est pour l'effondrement. Un élément de liste développé. Donc, si nous avons quelque chose comme ça, ils ont 48 dp. Le plus petit 24 est l'élément dépensé de l'icône, et c'est la même chose pour tout. 72 dp Où le texte va orteil une ligne ou ici sur le côté gauche. Donc 72 dp à partir de la gauche est notre première ligne verticale où le texte va orteil allié. Ok, donc c'est tout au sujet des listes. J' espère donc que vous avez, comme, ce guide de conception des matériaux 2.0, pour les listes. La plupart des spécifications. 90% de la même chose. Je pense que peut-être plus de 90 % si je pense que c'est 95 %. Ok, si vous avez des questions à me poser, passons à la leçon suivante 45. TabBar en bas et Top: Ok, donc je parlais de cette conception matérielle deux points ou lignes directrices, et j'ai vu quelque chose de nouveau, qui est une barre en bas. C' est donc une nouvelle tendance. Fondamentalement, il est basé sur la conception de l'expérience utilisateur, et il est tel que tout ce qui facilite l'action devrait être plus près de l'orteil où vous alliez , appuyez sur l' orteil ou appuyez sur l'écran. Donc, la plupart des utilisateurs, ils vont utiliser le terme. Et ce genre de navigation, il va faciliter l'utilisation de venir plus facilement. L' utilisateur peut taper sur cette barre de recherche aussi cette icône de hamburger et aussi cette action flottante, mais dans un fabuleux et aussi beaucoup. Mais d'accord, c'est un autre nouveau patron. Ce qui est daté est qu'ils ont effectivement mis en œuvre le même en bas. Ok, donc encore une chose, c'est que tu peux aussi faire quelque chose comme ça ici. Il est flexible. Ok, donc ici ils ont des lignes directrices qui ne l'utilisent pas seulement pour une action ou ici essayer d'addict Lee stocker trois actions. Donc en bas tout le monde va fournir trois actions comme la barre de menu et cette barre de ce genre. C' est plus que je peux. Ces deux-là hors d'eux. Ok, donc c'est une nouvelle chose, je pense qu'elle est entrée dans celle-ci. Et vous pouvez voir par ici. C' est ce qui est ce sont quelques clients plus étaient les cheveux centrés Fab Britain. Ensuite, ils ont ceci et fab sur le bouton d'action flottant d'un côté est sur la droite et sont les autres actions sont en bas comme ceci. Donc c'est un nouveau patron. Si vous voulez en savoir plus sur ce que vous pouvez en apprendre davantage et ce que vous pouvez voir, c'est un autre modèle. J' aime vraiment ce fabuleux insecte. Donc, il y a beaucoup de nouvelles choses qui viennent pour les concepteurs dans ce matériau conçu pour pointer et vous pouvez voir quelle est l'interaction et comment ils ressemblent. Alors voyons de cette façon, donc j'aime vraiment ça. Ok, alors reviens. Et puis à nouveau montrer l'introduction afin que vous puissiez voir maintenant cette boîte de réception utilise peu d' actions. Quand quelqu'un appuie sur l'e-mail, ce bouton juste ou ce bouton d'action flottant, il change le bouton de réponse orteil et quelques actions supplémentaires. J' adore ce nouveau. Interaction et comportement. J' adore ça. Ok, donc vous pouvez utiliser ce genre de choses dans votre nouvel APS en utilisant du matériel conçu pour pointer. Et revenons à nos anciens bars qui étaient au sommet. Donc, vous pouvez voir que vous savez déjà que comment ils vont être là, va être cohérent. Ces principes conçus par l'air que vous devez suivre les orteils. Ce sont des types réguliers, Deb. Et puis nous avons ces barres d'action supplémentaires contractuelles qu'ils ont. Comme, si vous ouvrez une photo ou quelque chose comme ça reflétait quelque chose qui va vous montrer croix et différentes actions plus tard. Orteil cet objet là-bas. D' accord. D' accord. Alors voyons ce que nous avons aussi ici. Ce sont peu de navigation. Titre d'Icahn sur le menu de débordement sur la droite. Ce 5ème 1 Je pense que nous avons déjà discuté de cela. Encore une fois, si vous voulez aller aux spécifications, vous allez aller Ne pas beaucoup. Beaucoup, beaucoup à la fin. Et vous allez aux pieds Voir toutes ces spécifications. Ok, donc si vous cliquez dessus, vous pouvez voir ces autres spécifications. Les images sont toujours en train d'apprendre, alors revenons en arrière. Ok, donc nous voilà. Ok, donc si on clique dessus. Vous pouvez voir ce sont à nouveau les spécifications 32 de cette icône 24 yeux icône hauteur eso 24 DPS est l'icône icône icône 24 24 24 Donc vous pouvez voir les écarts entre eux est 24 dp et ah, nous avons 16 dp marge des deux côtés pour ces icônes 16 dp haut et bas literie et 20 dp est la ligne à partir du bas où ils vont s'asseoir et où votre texte va s'asseoir base Donc, si je cache cela, vous pouvez voir ceci est la ligne de base d'été et aussi vous pouvez utiliser ces textes et quelle est la taille des piles ? Vous pouvez aller d'ici et voir quelles sont les spécifications. 20 dp blanc. Ceci est sur la couleur du texte. Si vous vous souvenez avec précision, alors cela est étendu Tobar et je ne suis pas sûr pourquoi ils n'ont pas montré les onglets. Peut-être que les onglets sont sur leur section chemin dans une autre section. J' espère donc que vous avez apprécié ce haut de barre d'air Une nouvelle interaction et un nouveau comportement du bas. Si vous avez des questions à me poser, passons à la leçon suivante 46. Tabs matériels 2.0: D' accord ? Non. Je vais réviser un peu les dabs en utilisant la nouvelle ligne directrice sur la conception des matériaux en deux points. Ok, donc nous avons les onglets. Et si vous cliquez sur le côté gauche, vous pouvez voir qu'il y a de l'usage, pas moi. Placement du comportement, abs fixes, onglets crédibles, leurs états grouillants spécifications et implémentation pour les développeurs. D' accord, donc d'abord tu dois savoir que quel est le comportement ? Donc, si vous cliquez dessus, vous pouvez voir qu'ils se déplacent à gauche et à droite. Donc, le mouvement est également vu dans ces comportements. Et j'aime vraiment tout ça. Ils ont été déplacer cela et vous pouvez voir ici vous pouvez également les déplacer avec balayage comme ça. Donc c'est que je pense que j'ai manqué dans Ah, mes autres leçons. C' est comme ça qu'ils vont se comporter. Donc, j'aime vraiment comment ils ont arrangé tout comme le comportement de ces éléments d' interaction et pas moi. Revenons aux spécifications. Et je pense que cela va prendre un certain temps pour Seigneur, je pense que nous avons déjà discuté de cela lorsque nous l'avons conçu. C' est donc très basique. 48 40 ans, 72 24 Icône taille 20. La plupart de leurs tailles sont les mêmes 12 12 en bas et en haut. Donc, si vous voulez regarder les spécifications, vous pouvez aller ici. Les spécifications sont presque les mêmes que les précédentes. Au lieu de cela, je pense qu'il y a juste une mise à jour. Je n'en suis pas sûr, mais je pense que ce 52 n'était pas 52 avant. Waas peut-être 56 ? Je suppose. Alors. Ils ont changé cela à 52 plutôt que 56 de la gauche. Je n'en suis pas sûr, mais tu peux. Je pense qu'il n'y a aucun moyen de vérifier. Peut-être que tu peux voir ma plus grande leçon que de vérifier. Ils vont bien. Il s'agit donc de tout ça. Ah, d' accord, donc il n'y a pas beaucoup de changement. Tout. Yeux presque semblables. Ce sont les principes de conception évolutive, informative Pierce Pierce signifie qu'ils vont orteils agir comme il apparaît. Ils ont, comme deux ou trois onglets plutôt qu'un seul. Donc, ils vont travailler en combinaison avec d'autres onglets. Informatif. Ils vont montrer des catégories d'information. Fondamentalement, il est utilisé pour différentes catégories qui vont rester au sommet. Scalable signifie que nous pouvons avoir fixe et défiler les deux. Les deux s'éloignent des marches. Ok, donc si vous avez des questions à me poser et passons à la prochaine leçon. 47. Carte matérielle 2.0: maintenant dans ce. Écoutez, nous allons discuter un peu plus sur les cartes utilisant du matériel conçu pour pointer ou nouvelles lignes directrices. Et ils sont presque les mêmes. Mais les quelques choses comme pas moi, ils ont présenté comme je n'ai pas discuté celui-ci qu'il ya une image Avital. Ce numéro, c'est le conteneur entier. C' est ce qu'on appelle le conteneur de cette carte. Ensuite, nous avons le contenu à l'intérieur que dans le contenu que nous avons à chaque fois. Son titre texte secondaire. C' est un média, n'importe quelle image ou peut-être une vidéo. Ensuite, nous avons ce texte de soutien en bas ici que nous avons l'action. Mais alors nous avons quelques actions d'icône de soutien ou d'entendre des icônes facultatives pour les directions. Donc c'est comme ça. Ça va continuer. Ceci est un autre que vous pouvez voir ici Nous avons des médias riches, Le haut intitulé Deuxièmement, titre des textes de soutien et des actions. Donc c'est un art que nous pouvons voir ici. Vous pouvez également utiliser certains des séparateurs. Ok, donc c'est encore la carte, mais elle est divisée en deux choses comme ça, c'est le bloc d'information. Et ici, nous avons les options de disponibilité que vous pouvez sélectionner. Et puis vous pouvez cliquer sur réserve pour réserver ce cafee ou tout ce que vous voulez. Réserve. Ok, alors voyons l'interaction. Oups. OK, alors effondrez-vous et développez. Ces voitures peuvent également s'effondrer et se développer. Ok, donc vous pouvez voir que c'est leur comportement vraiment sympa ? Animation vraiment cool, transitions simples. Voyons plus d'entre eux. Oui. Donc, nous l'avons ici. Contracter et agrandir si petit, garde, juste pour montrer une partie de l'information. Si vous êtes industriel, vous pouvez ouvrir tout le contact comme ça. Alors, euh, allons mettre en avant l'iconographie. Et où sont les spécifications ? Je vais revenir au cahier des charges. Donc, ici, nous avons quelques-unes des spécifications. Cette petite image 80 dp de 3 44 est la taille maximale et pourquoi il est parce qu'ils vivent certains hors des marges des deux côtés. Donc 3 60 dp est la taille réelle et 16 ont mangé et mangé leur vie des deux côtés. Ok, ce sont des boutons d'action. 16 db par ici. Donc fondamentalement, l'air dp est une distance d'ici pour la zone capable et 16 dp est la ligne pour aligner tous ces, um ce texte et toutes les différentes actions à l'intérieur. Ok, donc 16 DP est la marge de tous les côtés. Arrête à droite, à gauche. Et je pense qu'au fond est aussi un 16. Mais la marge réelle pour la zone capable est de huit. Combattre le dp 1 48 est la hauteur de la petite garde. Vous pouvez très cette hauteur. Il n'y a pas un très gros problème. Donc, vous allez vous assurer d'utiliser cette hauteur que je pense que je ne l'ai pas utilisée. J' utilise un peu plus. Je le suis ou peut-être moins. Je ne le suis pas. Je ne me souviens pas maintenant. Quoi qu'il en soit, nous avons ce 94 db pour celui-là, plus la plus grande taille de cette carte est grande. Et ici, nous avons le deuxième texte et les distances entre eux où ils sont assis sur la base de texte 24 30 à 26 puis 24 est l'écart entre ce texte séparé en ligne et texte soutien dext. Ensuite, nous avons à nouveau le 36 bloc 36 db off block line Ici Ensuite, nous avons 32 débats pour ces points qui sont applicables. ADP est la distance entre eux ADP sur le côté gauche pour ce bouton d'action car il est aligné ici avec tout ce texte. Et en fait, il est d'un 16 dp. Donc, action, ce texte va être à 16 dp d'ici. Donc, ce sont tous différents types hors des voitures. Vous pouvez voir que ces cartes sont appelées cartes de contour et ce sont des cartes surélevées. Ok, donc je pense qu'on utilise quelque chose comme ça. Notre garde d'avion dans nos conceptions, nous n'avons pas utilisé d'ombres, donc nous pouvons utiliser quelque chose comme ça sur le titre de ligne et quelque chose de ce genre de présence. Donc je pense qu'un modèle que nous n'utilisons pas dans nos voitures est que j'utilise ah, bouton régulier ici dans la carte. Je ne suis pas sûr si c'est possible ou non dans leurs spécifications actuelles. Je pense que c'est possible que je l'ai vu dans la section des fardeaux. Donc ici, nous avons le bouton bouton. Nous avons utilisé un bouton ici sur le côté droit plutôt que sur le côté gauche. Je pense qu'ils utilisent à gauche, et on l'utilisait à droite. Ok, donc de toute façon, ce sont les spécifications. Assurez-vous que vous utilisiez 16 points sont 16 DPS fondamentalement la marge de DP sur tous les côtés. Ensuite, on utilise, hum, une chose de plus. C' est la carte. Une largeur de carte maximale est de 3 44 C'est ce dont vous avez besoin. Orteil. Prends soin de toi. OK, donc ce sont deux grandes lignes directrices. J' espère que vous avez apprécié cette leçon. Si vous avez des questions sur cette mise en page de carte et tout ce que vous pouvez me demander ou vous pouvez aller profondément dans ces lignes directrices de conception mature. J' espère que vous avez apprécié cette leçon. Si vous avez une question à me poser, passons à la prochaine leçon. 48. Typescale Nouveaux Looks 2.0: Révisons maintenant le nouveau système hors système de type de conception de matériau. n'y a pas d'appel à un système de type, d' échelle et de type, et c'est presque le même. Mais je pense qu'ils ont amélioré leur mise en page. Et là, vous pouvez voir les explications. Ils sont plus précis maintenant. Vous pouvez voir que c'est le cas. phrase. Vous pouvez les utiliser dans la phrase, mais dans le bouton, vous pouvez voir si vous allez à ce bouton. Par ici. Roberto. Moyen 14 taille 14 sp. Toutes les lacunes et 140.75 Est-ce qu'Allegis place ? C' est donc ce qu'ils utilisent. Ok, alors nous avons sur la sous-titrage 12.4 overline. C' est aussi une phrase. Vous pouvez utiliser une longue phrase dans la légende, mais dans les boutons, vous devez garder votre pire ou deux ou trois. Ou peut-être quatre. Max. Je suppose que oui. C' est leur nouvelle échelle. Vous pouvez vérifier. 96 est la plus grande taille. Aussi, si vous voulez aller avec des téléphones personnalisés, vous pouvez aller avec cela. Ils ont montré quelques exemples ici. Laisse-moi montrer. Ce sont certains téléphone personnalisé 60 régulier 60. Ensuite, ils ont éclos trois, ce qui est un script formel Patriot pour ordinaire 48. Et il y a peu d'autres exemples. Comme vous pouvez voir Roberto Condensed régulier 20. Et ceci est sous-titré Verrill autour de l'automne Perward. C' est un autre de Google Force, et Ah, OK, OK, donc c'est comme ça qu'ils sont. Ils ont montré beaucoup d'exemples différents sur la façon dont vous pouvez les utiliser. Comme vous pouvez le voir, vous grand moyen, 14 casquettes, tous les casquettes regardant vraiment gracieux sur cette, euh, application serait ici. Et ah, je pense que c'est tout. Si vous avez des problèmes ou si vous avez besoin de calculer des choses que vous pouvez voir, ils ont également montré certaines des conversions dans leur suivi. Ok, donc pour le suivi de la taille et des pixels de l'esquisse diviser par OK, donc en fait, ils ont montré ici un fichier de croquis. Laissez-moi vous montrer le matériel conçu, le type, l'échelle et le croquis. Vous pouvez télécharger ceci et vous pouvez ouvrir facilement dans adobe axity. Et là, vous verrez toutes les différentes quatre tailles et tout. Alors téléchargeons celui-ci et ouvrez-le pour avoir plus de sens ouvert. Et je vais naviguer vers mon bureau et ouvrir celui-ci. Ok, donc ça a été ouvert 14 disparus. Quoi qu'il en soit, on n'a pas besoin de s'inquiéter pour le fort. Ok, donc ici nous avons toutes les tailles différentes. D' accord ? Et rapport sur 96 lumière. Donc, dès qu'ils sont en-têtes sont de plus en plus grands, vous pouvez dire qu'ils utilisent léger téléphone, une fois qu'ils se dirigent est de taille normale. Il y a en utilisant la rubrique régulière rapportée 34 régulière régulière. Et quand ils sont un peu, vous savez, sur les petites lignes de plus petite échelle, ils utilisent le moyen ou l'aident à prendre pour ok. En outre, vous pouvez voir l'espacement est un peu différent. Il est plus espacé dans le fardeau, il est donc plus facile à lire sur les plus petites tailles. C' est tout ce que je pense qu'ils utilisent. Fondamentalement, sélectionnez-moi. Zoom avant. C' est donc leur échelle de type. J' adore vraiment ça. Onda. C' est plus facile pour moi de l' ouvrir dans Adobe Eckstine. Oh, donc ne vous inquiétez pas. Si quelque chose est dans l'esquisse notre fichier de croquis, vous pouvez l'ouvrir facilement avec adobe X t. J'espère que vous avez apprécié cette nouvelle échelle de type, l'échelle type conçue par le matériau. Si vous avez des questions à me poser, passons à la prochaine leçon.