Masterclass sur Adobe Xd : Concevoir une application mobile et un wireframe de site web

1. Introduction du cours: Adobe X'd est une solution tout en un you x you I pour la conception de sites Web, mobiles, APS et plus encore. Cela signifie que vous pouvez créer des cadres en fil de vie pour concevoir et travailler à travers les parcours utilisateur ,pour créer des simulations crédible à présenter aux clients ou pour élargir votre portefeuille pour inclure , plus d'expérience utilisateur et de carte d'interface utilisateur. En tant que concepteur graphique créatif numérique, notre développeur Web apprendre cet outil peut élargir votre marchand et vous aide à vous adapter à la forte demande, emplois plus lucratifs et vous x Ce verre est une partie de conception graphique, Web design et UX ey design car ils intègrent toutes les disciplines nécessaires ensemble pour créer des projets crédible du monde réel dans cette classe concevront une mise en page simple du site Web de bureau et apprendront à utiliser les outils de prototypage pour créer des interactions entre tous les rapports de conception. Pour créer un wir franc de travail sans faille, qui a également appris l'outil de grille de répétition pour créer des mises en page compliquées, un jeu d'enfant dans le niveau intermédiaire de cette classe va créer une application mobile pensera nos utilisateurs personas pour créer deux parcours utilisateur uniques pour créer une mise en page entièrement conçue et polie. Nous allons apprendre les fonctionnalités d'animation automatique et d'autres fonctionnalités de transition pour créer des menus, effets de glissement et des boutons qui semblent réels et authentiques. Tout ce que vous voyez ici, vous serez en mesure de faire d'ici la fin de ce cours. Alors rejoignez-moi pour des leçons qui augmenteront votre gain de design et vous donneront le dessus dans les prochaines années et au-delà, alors que vous X et votre Y deviennent la pierre angulaire de votre ensemble de compétences en conception . 2. Pour commencer: Bienvenue dans Adobe X'd. Vous serez très à l'aise avec ce programme si vous êtes déjà familier avec Photoshopped ou illustrateur ou même en design. Une fois que vous connaissez un produit Adobe, il est très facile de s'adapter à un autre adobe. fierté dans le même cas est ici, et si vous êtes déjà habitué à illustrateur venir à ce programme, tout est très simplifié. Vous remarquerez qu'il n'y a pas beaucoup d'outils dans votre barre d'outils. Très peu d'options ici à droite, et c'est tout. C' est un système très simple, et ça va être très facile. Toe apprendre cela et prêteurs orteil très rapide après que vous avez déjà appris peut-être un programme plus complexe , comme dans un illustrateur Adobe Photoshopped. Ça va sembler un jeu d'enfant. Alors je le voulais. Peut-il vous donner un petit tour rapide en utilisant quelque chose que j'ai déjà créé pour une marque que nous travaillions sur une classe précédente et que nous diminuons appelée Parson Dynamics, qui est un conglomérat industriel ? Donc j'ai ce que vous voyez Différent tableau d'art. J' ai donc la page d'accueil principale, qui va être disponible ici sur la colonne de gauche, et j'ai pu ajouter de nouveaux tableaux d'art qui seraient toutes les sous-catégories ou les autres pages Web de ce site. Donc, vous avez deux fenêtres principales dans le dhobi X'd vous avez la fenêtre de conception qui étaient en moment, et cela montrera que c'est là que nous avons mis ensemble sont conçus pour mettre en place une typographie , a été exposé nos colonnes et nous allons de l'avant et mettons tout en place graphiquement individuellement. Et puis vous avez ce qu'on appelle la section prototype. Vous passez donc en mode prototype en passant et en passant au prototype. Et c'est ainsi que nous relions tous nos différents tableaux d'art afin que nous puissions créer un cadre en fil réel . Je vais te montrer un exemple. Il y a un bouton de lecture ici, donc je vous montre ce que font toutes ces connexions liées. Donc, cette page d'accueil et je vais vous montrer une sorte de, comme nous faisons un Web, un peu de conception Web ensemble pour sorte d'apprendre le programme va montrer que vous avez un lien tout vers le haut, et c'est très facile. Cela semble compliqué, mais ne soyez pas intimidé. C' est l'un des programmes les plus faciles que j'ai appris ces dernières années. Donc, tous ces différents éléments un lien. Donc, cette option une cela a lié tout le chemin à cette option. Donc, quand l'utilisateur clique sur n'importe quel endroit sur ce bouton, il va aller à cette page. Même chose avec l'option 2. option 2 va s'attarder jusqu'à cette page, et l'option 3 va descendre à cette page et la raison pour laquelle nous sommes capables de relier les choses ensemble comme nous pourrions gagner notre vie, respirer du fil Web frit. On va aller de l'avant et cliquer sur le bouton de lecture. Vous remarquerez que le bouton de lecture était juste ici dans le coin supérieur droit. On va prévisualiser notre prototype. Wow. Comme je l'ai dit avant que tous ces air soient liés ensemble. Alors je vais aller de l'avant et cliquer sur Option 1. James pourrait aller droit à la longueur qu'il est lié au tableau d'art qui est lié à je peux cliquer sur le bouton d'accueil et qui est également lié Points retour à la page d'accueil. Même chose pour l'option 2, et cela pourrait faire pour tamiser différentes transitions. Donc, vous remarquez comment j'ai cliqué sur l'option à elle diapositive joliment à la gauche à droite, et vous pouvez configurer différentes transitions àavoir au lieu de juste apparaître qui a un bon type d'effet lisse animé. Même chose avec l'option 3, et ça pourrait aller de haut en bas. Donc c'est ce qu'on va créer ensemble ce qu'il a créé à partir de zéro. Et nous allons vous montrer comment travailler avec la typographie, comment définir vos actifs, qui sont vraiment importants. Ensuite, il définit vos actifs afin que vous n'ayez pas à continuer à recréer le même actif ou à assembler encore et encore. Et je peux vous montrer comment leur global pour commencer même ouvrir un nouveau document et commencer . On va aller classer. Nous commençons juste un nouveau document. Nous pourrions le faire avec n'importe quelle taille, mais je vais faire une page Web typique de 9 20 par 10 80, et je vais vous montrer plus tard comment nous pouvons adapter cela à un écran plus petit très facilement. Mais nous allons aller de l'avant et faire notre design basé sur un site 9 20 par 10 80. Allons-y et cliquez sur cette taille, et ça va s'ouvrir. Donc, il a créé ce premier tableau d'art pour nous, et nous allons créer de nombreux tableaux d'art pour pouvoir modifier cette bordure d'art décalée pour simplement cliquer sur le nom et vous pouvez le déplacer et ensuite vous pouvez zoomer . J' ai mon tapis de piste sur mon ordinateur portable. Je suis capable de zoomer, annoncé pour être en mesure d'obtenir la taille. Et ce sera très utile parce qu'il y a des conceptions Web ou un ensemble d'applications mobiles aura 20 à 30 parfois même 50 tableaux d'art différents, tous transigeant et reliant de différentes manières. Il est donc très important de se mettre à l'aise avec plusieurs tableaux d'art et avoir un système organisé lorsque nous commençons à créer plusieurs tableaux d'art. Voici notre premier tableau d'art. Cela pourrait être vos pages d'accueil. Nous allons vraiment sentir un peu comment adapter notre marque Parson Dynamics au Web. Donc on va commencer par le sommet. J' aime le design en haut et le genre de travail vers le bas, donc ça commence avec l'élément le plus important, qui va être une sorte de barre de talent. On va aller de l'avant et prendre un outil de forme. On va faire de la peau un peu comme un outil de rectangle. Vous avez également un outil de cercle. Et si vous êtes familier avec l'illustrateur, ce sera un jeu d'enfant. Donc juste une tête créer une barre simple qui va être notre nab et moi avons ici sur la droite, c'est là que toutes sortes de vos propriétés vont aller de l'avant et double clic. Je suis Phil, et je peux changer cette couleur. Je veux donc pouvoir adapter certaines de mes couleurs hexadécimales de ma marque que nous avons développée. Donc je vais revenir dans Illustrator travaillait récemment sur une affiche et je vais prendre quelques-unes de ces couleurs. Donc voici une sorte de retour dans le temps. Voici un peu, un peu de désordre, mais j'ai juste besoin d'adapter certaines de ces couleurs. Voici une sorte de jaune trouvé sur cette affiche que nous aimions pour la marque. Et je vais juste double-cliquer sur des souris qui regardent Illustrator et je vais juste attraper ce code hexadécimal. On va le mettre dans X D. Tu vas remplir et insérer notre code hexadécimal. Ça va être jaune, et je vais juste dessiner une autre boîte. Pour que nous puissions mettre notre pop pourpre ici, prendre notre couleur violette le livret de cette montre et aller le remplir et le faire entrer. Maintenant, nous avons nos deux couleurs. Ce qui est génial, c'est qu'on peut sauver ces couleurs et notre panneau d'actifs, qui sera en bas à gauche. Vous verrez des actifs, on va cliquer sur les actifs et il y aura un petit menu déroulant à droite. On va ajouter ces couleurs à nos actifs. Donc, nous allons juste mettre en évidence une couleur va faire un clic droit et ajouter des éléments de couleur orteil. Donc il a ajouté un code hexadécimal violet et maintenant nous allons faire la même chose avec notre couleur orange jaune , et nous allons ajouter cette couleur aux actifs. Donc maintenant, si je dessine n'importe quelle forme, je peux aller à mon panneau d'actifs ici en bas à gauche, et je serai en mesure de me rappeler toutes les couleurs dont j'ai besoin. Donc, aller tête et configurer vos styles de police et tout ce dont nous avons besoin dans votre panneau d'actifs aide vraiment à rendre le processus plus rapide lorsque nous faisons beaucoup depages différentes,de pages différentes, sorte que vous pouvez voir que nous avons nos ressources de couleurs définies vers le haut. Mais il y a aussi des styles de personnages. Vous pouvez prendre une police de titre particulière. Si vous aimez cette taille particulière et la police de caractères, vous pouvez enregistrer les styles de caractères et le rappeler à tout moment, ce qui est génial si vous voulez configurer tous vos en-têtes et faire votre H un h deux h trois. S' il a déjà fait du CSS. Vous serez très familier avec ces termes et symboles. Vous pouvez dessiner des symboles et des icônes et être en mesure d'enregistrer ces symboles et de les charger sur tous vos tableaux d'art. Et ce qui est génial, c'est leur global. Donc si je change, si je fais un petit symbole d'une maison et que j'ai décidé de changer ce symbole, ça le changera sur tous les tableaux d'art. Et quand vous avez 50 tableaux d'art différents, c'est vraiment sympa d'avoir, une sorte de stylisation globale. Nous n'avons pas besoin de changer chaque symbole encore et encore, donc nous allons le faire pendant que nous finissons ce site Web. Alors allons de l'avant et obtenons ce bras stylisé ici au lieu d'une barre jaune qui va faire une barre violette. Donc dans mes atouts, panélistes peu en bas à gauche vont aller de l'avant et cliquer sur violet pour en faire une barre violette. Et je veux apporter mon logo orteil, l' avoir au centre ou dans la gauche. Donc c'est là que nous allons apporter quelques uns de ses actifs. Donc le logo, un fichier de logo PNG transparent serait un atout. Et donc je suis illustrateur, et nous avons fait un design local pour notre logo Parsons. Et je l'ai déjà dans deux tableaux d'art différents d'Adobe Illustrator. J' ai une version en noir et blanc, mais j'ai, euh, éteint. Donc j'en ai un en genre de gris, puis un et blanc. Donc je vais avoir besoin de ce blanc pour aller au-dessus d'une barre de couleurs. Donc tout ce que j'ai fait c'est juste exporter, et je vais les obtenir en PNG transparent avec le type de ce haut logo. On pourrait faire un PP plus élevé. Moi, c'est étranger. Résolution plus élevée. Cela ne sera pas encore sur le web, mais finalement nous avons dû penser à la taille du fichier et ne pas rendre un PNG trop élevé et la taille du fichier nous puissions nous assurer que nous n'avons pas de temps de chargement super élevés. Mais pour l'instant, dans le concept dans le processus de conception, c'est bon, on va aller de l'avant et apporter cet atout. Alors je vais aller chercher mon détecteur. On va au bureau et on traîne ces gars dedans. Alors voici notre 1er 1 pour aller de l'avant, le rendre beaucoup plus petit, et ensuite apporter notre blanc. On dirait que je dois le faire une à la fois. Allez-y, rends-le plus petit et allez-y. Droit. Cliquez sur et enregistrez-les dans mes ressources. Donc je vais faire un clic droit et faire un symbole. Donc ça va apparaître sur son panneau d'actifs maintenant est logo. Je vais faire un clic droit et faire un symbole. Donc ces air ont maintenant apporté ses symboles et je pouvais faire ce logo noir et je pouvais faire ce blanc local. Je me souviens de ces logos à tout moment, donc nous n'en avons pas vraiment besoin pour le moment. Je pourrais aller de l'avant et faire ressortir ça et j'ai mon logo blanc. Je pourrais faire ressortir le noir si j'avais besoin de le déposer ici pour que ces biens puissent être rappelés à tout moment. Donc maintenant, je vais double-cliquer dessus et obtenir le bon dimensionnement. C' est Nous pouvons zoomer et vraiment avoir une idée des tailles de pixels. Tu vois comment j'ai expédié ça ? Les guides intelligents genre de coup de pied dans, insupportable de voir l'espacement pour voir 8 16 C'est combien de pixels sont sur la marge gauche et sur la marge droite ? C' est 853 donc je peux aller de l'avant et genre de centre sur peut-être faire les deux trois. Et c'est là que je pourrais avoir besoin de redimensionner un peu ma petite image pour m'assurer qu'elle se passe parfaitement. Il y a une sorte de bar haut. On va se concentrer davantage sur la finalisation d'une mise en page. Nous nous sommes limités à trouver deux détails plus tard afin que je puisse utiliser mes touches de clavier de tout le monde un coup juste un pixel à pixel ou deux. Je peux prendre mon clavier, les touches fléchées et le frapper là-haut. Vous remarquerez les différents pixels entre l'espacement ici, et vous êtes capable de faire quelques petits ajustements qui sont censés essayer de le faire glisser un peu. Vous n'êtes pas en mesure d'obtenir la même précision 3. Image de héros: Donc, je fais un zoom arrière et je veux avoir une idée de l'épaisseur de ma barre de navigation supérieure . Donc, si jamais vous voulez faire des changements minuscules au lieu d'essayer de savoir où se trouve un pixel particulier en le faisant glisser, vous allez ici dans le panneau des propriétés et je suis capable de faire ce 100 pixels de haut et d'obtenir un peu plus précis placement. Ok, donc maintenant on va faire en sorte que notre image de héros soit une sorte de bannière principale ou d'araignée qui sera sur notre page d'accueil. J' ai donc une nouvelle image ici que je veux utiliser et descendre aux téléchargements. Et allez-y, rappelez-vous cette image et juste dragon ici, comme n'importe quel autre atout. Bon, donc voici mon image de héros. Je vais aller de l'avant, glisser ça comme une photo complète, et une chose qu'on pourrait le faire a glissé, et on pourrait le redimensionner de cette façon en double-cliquant dessus, étant capable de recadrer et de déterminer la bonne taille. Mais j'ai quelque chose de mieux à faire. Allez-y et supprimez ça et nous allons dessiner une boîte. On dessine là où on veut que ça puisse aller. Maintenant qu'on a une boîte, on va pouvoir faire glisser notre photo et elle va remplir parfaitement la boîte. Tu vas y aller et ramener notre image de héros à nouveau. Il suffit de le glisser se termine, va bien apparaître et donc nous pouvons faire des ajustements en double-cliquant dessus et en le faisant glisser haut, faisant glisser vers le bas, ce qui est déjà au maximum. Mais nous pourrions aller plus loin et zoomer si nous le voulions. On a fini. Cliquez sur le bouton. Je vais essayer de trouver le bon emplacement pour notre photo. Et encore une fois, nous avons limité certaines tailles aussi. Donc, nous voulons ajouter peut-être du texte sur le dessus de l'image, avoir du texte en direct qui sera affiché. Donc je vais aller de l'avant et prendre l'outil de type. On va aller de l'avant et juste faire une boîte, et je vais faire Ah, voyons, que vont nos slogans ? Prenez notre slogan de notre affiche. Ok, refonte de l'industrie. Donc, c'est tout le slogan est Pop dans l'industrie X'd redessiné Go et rendre cette boîte englobante un peu plus grande et un peu décalée. Prenez notre outil flèche en quelque sorte expédié haut. Nous allons double-cliquer et en faire un Phil blanc, et vous avez aussi une option d'ombre ici aussi. Donc, si vous avez l'impression que ce n'est pas vraiment sortir, allez cliquer sur l'option ombre pour ajouter une ombre claire, bien sûr, nous pouvons changer la distance de cette ombre. Et aussi le flou ici être pour Blur, et nous pouvons aussi le rendre plus fort. Nous avons juste double clic sur le genre de boîte de transparence ombre là, et nous pouvons le rendre plus fort afin qu'il conserve 16%. On pourrait en faire 33 %. Vous pouvez également modifier la couleur de l'ombre portée comme n'importe quel autre programme adobe. Donc, disons que nous voulions que ce soit effondré et aligné au centre. Nous pourrions le faire en faisant simplement glisser cette boîte le cadre de sélection, rendant un peu plus grande et en allant jusqu'à l'alignement central dans notre panneau de propriétés juste ici dans notre panneau de propriétés de texte. Et nous pourrions aussi combler l'écart en laissant entre l'espace entre les différentes lignes de type, donc ça va être fait ici dans cette zone. Donc, disons que c'est 1 41 peut être fermé. L' écart. Donc, il se sent juste un peu plus fort et comme ensemble unité, tout comme avec la conception de mise en page. Je fais les mêmes fondamentaux de la conception de mise en page d'impression que je suis avec le Web design sorte de penser à la façon dont ces deux sont très similaires. Donc, comme avec n'importe quel autre objet, je peux mettre en évidence ma photo et ajouter un peu d'ombre portée pour que vous puissiez voir un peu de Ah, belle ombre portée qui a été ajoutée là, je vais aller enlever une petite bordure. On dirait qu'il y a une petite bordure autour de la photo, que j'ai juste cliqué et retiré. Donc maintenant, nous allons faire trois petites boîtes qui se rencontrent et sont capables d'être liées à d'autres sous-pages. Nous allons aussi finir par avoir des éléments de menu apparaîtront en haut. Mais on va faire un design Web très simple juste pour commencer. Je vais te montrer un truc vraiment cool. Donc nous allons aller de l'avant et développer une boîte exactement comme nous le voulons, et nous allons pouvoir utiliser l'outil de grille de répétition pour répliquer ça encore et encore autant que nous le souhaiterions. Donc on va juste créer une boîte. Mais on va pouvoir créer toutes les boîtes après ça très, très facilement. Alors va aller de l'avant et prendre nos outils carrés, faire une forme simple, et je peux ajouter des coins arrondis à ça. Alors combattez le genre de zoom avant. Je prends une sorte de la zone de cercle ici dans le coin et la fais glisser vers le bas pour créer n'importe quel type. Où avez-vous fait une forme de pilule parfaite ? Ou peut juste à une très, très légère courbe, qui je pense que cela était dans quand il avait cette pomme vraiment forte Caracas fait ce genre vraiment populaire de ce beau, lisse, bord arrondi biseau. Mais avec le temps, nous avons adapté un peu plus d'une courbe plus nette où ils sont presque à peine vus . C' est un peu plus ce qui est tendance de nos jours. Donc je pourrais en faire un remplissage ou je pourrais faire un peu d'ombre, avoir une ombre. Je ne veux pas de bordure, donc je dois déclipser la bordure sorte de voir comment a encore un peu d'ombre portée et a juste un peu d'un biseau le coin arrondi. Donc maintenant, nous allons peut-être faire une image en haut et peut-être un texte pour leur faire savoir à quoi cette prochaine page Web sera liée. Alors allons de l'avant et créer une boîte qui sera là où notre photo sera traînée et je veux lui montrer astuce rapide. Donc maintenant, j'ai tous les coins en même temps, et je vais en faire une couleur différente pour que vous puissiez voir ça en action. Alors faisons-le rouge pour que vous puissiez voir comment ils le font tous en même temps. Mais si je veux juste un coin arrondi ? Je vais maintenir enfoncée la touche d'option ou l'ancienne touche quand je clique sur celle que je veux être plus arrondie et je vais cliquer dessus, et je pourrais le faire est des formes indépendantes. Donc, si je veux faire ce maïs autour d'elle et ce coin, je maintiens juste l'option Orochi tout le temps qui pourrait juste éditer individuellement ces. Donc maintenant j'ai un peu plus d'une forme de type intéressante, mais je vais garder tout autour et juste pour le bien de ça, donc je vais aller cliquer sur ce type de commande Go Z commande sorte de retour dans mon histoire à l'endroit où il était blanc. Allons de l'avant et ajoutons notre image. Je vais ajouter un petit espace réservé pour par image et donc je vais en faire une couleur différente pour que je puisse voir ce qui se passe, et je veux faire en sorte que ce coin corresponde à la boîte derrière lui. Donc je vais juste maintenir le boulon ou la touche d'option parce que je veux juste manipuler ce coin en haut à droite et je vais correspondre au coin. On n'a pas besoin d'une frontière. Donc juste une connexion qui maintiennent enfoncée le type de clé correspondant à cet arrière-plan. Est-ce que c'est là que notre photo va résider et être capable de tirer ça vers le bas et allons-y et traîner dans un dragon photo ? Ces gens parlent du milieu de l'industrie et voilà. Je veux changer le recadrage obscur DoubleClick et je serai en mesure de changer le recadrage cette façon. 4. Grilles répétitives: Ajoutons une autre zone de texte. Prenez l'outil de texte, allez-y et tapez. Faisons l'option 1 pour l'instant. Nous pourrons trouver plus tard des détails sur ce que nous voulons dire. Donc on va juste faire un Phil et se rappeler que nous avons déjà sauvé notre couleur. Donc, si nous allons à nos styles de globe, qui est en bas à gauche, nous allons pouvoir nous rappeler sur orange Option ou faire des options violettes. Faisons notre couleur orange jaune et ramenons cela à l'option 1. Ça doit rendre ça un peu plus petit. On va aller à notre panneau de texte et en faire 55. C' est assez grand. Alors faisons en sorte que cela continue de s'ajuster jusqu'à ce que nous puissions trouver la bonne taille. Et une fois que nous nous en sortirons bien, nous pourrons sauver. Il s'agit d'un style global. Eh bien, donc on va à nos styles. Nous pouvons faire un clic droit et ajouter des éléments de style de personnage orteil. Je vais juste ajouter ce style de personnage. Donc, si jamais je veux faire ressortir cela à nouveau, je peux facilement le faire ressortir avec la même taille et la même couleur. Rendons cela un peu plus long et ajoutons un autre petit corps, copie ou copie de paragraphe, hum, à nos articles. Donc nous allons aller de l'avant et sortir l'outil de texte, mais nous allons cliquer et faire glisser et faire une zone de texte de paragraphe. Je vais juste prendre un texte générique que j'ai ici et le copier et coller. Assurez-vous que mes outils de texte se retirent à nouveau. Coller. Nous allons devoir changer ça de manière significative pour être notre copie corporelle. Je vais juste mettre en évidence tout ce que je vais aller à, euh, ma star mondiale de mon panneau d'actifs et cliquer sur mon gris et faisons ce chemin de fer. C' est ce que nous utilisions dans notre affiche pour nos copies corporelles. On va l'utiliser pour une copie de paragraphe. Allons le rendre significativement plus petit, peut-être 14 ar 15 dans ce cas. Et faisons une attente régulière. Sont un moyen dans ce cas Castaignos sorte de se réunir lentement. Maintenant, on va changer l'alignement. Nous pourrions faire un alignement central, ou nous pouvons monter et faire un alignement à gauche et nous devons changer cet écart ou l'écart entre les espacements . Donc je vais aller ici dans cette zone et y aller et essayer 18 voir comment ça marche . Vous pouvez l'élargir un peu plus pour avoir un bon espacement, mais pas trop. Donc, cela fonctionne comme n'importe quelle autre zone de texte. Et le designer ou l'illustrateur pourrait aller de l'avant et faire passer ça ici. Je ne veux pas le faire aussi longtemps. Donc je vais juste avoir deux phrases simples. Juste assez pour expliquer un peu plus loin ce que l'utilisateur doit faire ou ce qui sera ici quand l'utilisateur clique sur ce bouton. Je pense que je vais faire un alignement central ici parce que je n'ai pas beaucoup de textos. Nous allons donc centrer les alignements du centre d'alignement. Joli. Lorsque vous avez des zones de texte plus petites, plus votre zone de texte est grande, plus l'alignement à gauche a tendance à fonctionner un peu mieux. Donc je vais changer ça pour ne pas avoir d'orphelin. Ça s'appelle Orphan. C' est tout seul. Juste un mot. Ça a l'air étrange. On ne veut pas que ça. Nous voulons divulguer l'écart afin que nous n'ayons pas un orphelin, et nous pouvons également changer vos pixels se produit automatiquement lorsque je fais glisser. Faites en sorte que vos guides intelligents donnent un coup de pied dans son avis. Ce genre de ligne bleue de couleur scion qui veut dire que ça va être aligné au centre de cette boîte blanche. Même chose que je pourrais aller de l'avant et faire glisser ça jusqu'à ce que je puisse avoir un alignement central. Je suis bon d'y aller. Laisse-moi aller de l'avant et changer tout sur cette boîte parce qu'une fois que nous commencerons à la répéter ,nous allons créer beaucoup de versions différentes de cette boîte. , Alors faisons cette boîte parfaite. Avant de commencer à répéter, il a révélé l'écart. Vous remarquez comment il est en quelque sorte d'adapter automatiquement la photo lorsque nous en faisons une taille différente . Donc je vais zoomer pour avoir une bonne idée de la mise en page pour qu'on puisse même en faire quatre en bas. Les leçons font trois pour l'instant. Et je pense que je pourrai élargir ça un peu plus blanc. On doit penser aux options mobiles. Donc, lorsque cela s'effondre dans l'option mobile, nous avons un design réactif. Ça va être montré en premier, et il va être empilé pour que vous puissiez avoir le 2e 1 ici dans le 3e 1 ici. C' est pourquoi. J' ai pas d'image pour ça. Il semble un peu redondant sur un bureau, mais quand vous avez une vue mobile, cette image, avec le lien fait une sorte d'aide au lieu d'avoir juste un symbole. Mais oui, on pourrait faire des icônes personnalisées au lieu d'une photo. Nous n'avons pas besoin de photos, mais juste pour cette affaire, nous le faisons. Alors voici le truc cool. Ça s'appelle la grille de répétition. Donc je vais aller de l'avant et regrouper ça en une seule unité. Donc, j'ai juste cliqué droit et je l'ai groupé, et je dois aller de l'avant et cliquer sur cette grille de répétition ici sur la colonne supérieure droite. Maintenant, il va y avoir ce genre de barres que je pourrais agrandir. Donc je vais l'étendre à droite et vous remarquerez qu'il continue à répéter la même boîte encore et encore. Et tu peux continuer et faire 45 si tu veux, mais on va en faire trois. Et ce qui est génial à ce sujet, c'est que je peux aller sur cette colonne et je serai capable de changer l' espace de pixel entre la colonne pour l'obtenir juste afin que nous puissions avoir 90 pixels entre les colonnes et la même chose vaut ici, je peut en fait faire une rose. Je pourrais faire beaucoup, beaucoup de rangées. Donc, c'est si facile de pouvoir faire des concepts d'application mobile quand vous avez peut-être, oui, vous faites une application mobile et vous avez beaucoup de données, peut-être des données utilisateur que vous listez et que vous le faites dans une belle boîte stylisée. Nous pouvons créer des centaines de ces choses très facilement en utilisant cet outil. Donc nous voulons juste avoir une rangée, donc il suffit de cliquer sur une taille juste pire, une route et nous sommes prêts à partir. Donc pour l'instant, ces mouvements sont une unité. Donc, disons que je veux commencer la mise à jour des orteils genre de certains objets ici. Comment puis-je en quelque sorte dissocier les choses ? On va faire un clic droit et travailler sur un nouveau groupe de grille. Donc maintenant, il va être traité comme des éléments individuels à nouveau. Ne sont plus liés ensemble comme ils l'étaient lorsque nous avions l'option de grille de répétition activée. Donc, dans notre, il va être capable de chaume cliquer et de modifier nos options. Donc l'option deux, une option trois Et une chose que je veux faire, je sauvegarde mon style de personnage ici pour mon option Un titre Mais je veux pouvoir dire ma copie de paragraphe. Donc je vais le mettre en évidence. Voyez si je peux aller de l'avant et sélectionnez la case clic droit et vous pour aller à ajouter des styles de caractères aux actifs. Et maintenant j'ai ma copie de paragraphe. Et puis je vais faire de ça mon en-tête. Cela pourrait probablement être H deux en-tête pour avoir probablement une plus grande taille, ce qui sera ici. Il est juste droit Cliquez sur Click off de lui rapidement à nouveau et droit Cliquez et allez voir ajouter des styles de caractères aux actifs. Ça pourrait être notre H. Ce sera notre plus grande taille d'en-tête et puis les deux H jaunes seront en quelque sorte notre prochaine taille vers le bas et ensuite nous aurons un h trois n h quatre Nous avons jamais fait le codage CSS. Tu sauras tout à ce sujet. J' aimerais changer les photos sur toutes ces photos pour qu'on puisse aller de l'avant et sortir notre détecteur. Vous allez trouver la bonne photo pour ces Just Dragon dedans. Si je veux changer votre recadrage, je double-clique et je peux zoomer un peu plus. Mes photos 5. Créer le pied: nous faisons donc une application mobile ou une application Web. simulations sont des simulations de produits numériques pour les clients. Nous voulons le faire d'une manière respectueuse du budget. Nous essayons simplement de faire comprendre ce que nous voulons que le site Web ressemble, comment il circule et comment il répond aux données démographiques cibles et aux personnes que nous avons développées. Nous voulons vraiment nous assurer que le site Web a l'air bien, mais nous voulons le faire en temps opportun. Nous ne voulons pas dépenser beaucoup d'argent dans le concept face parce que nous devons encore développer cela. Et parfois cela signifie embaucher un développeur pour coder ceci et faire en sorte que cela devienne une réalité, moins que nous soyons vraiment doués à cela aussi. Mais il n'est pas toujours attendu pour nous de concevoir et de concevoir, mais aussi de code. C' est un début fou. Nous devons commencer à nous spécialiser, mais de toute façon, donc nous devons faire les choses en temps opportun. Donc je vais essayer de vous montrer quelques trucs du métier pour accélérer ce concept . Donc quand nous sommes revenus ici, je dois aller de l'avant dans un cercle simple, maintenir le décalage pour faire un cercle parfait. On va cliquer sur la grille de répétition. Je vais juste en faire trois. Mais c'est exactement ce qu'on vient de faire ici. Mais je vais te montrer un petit tour. Donc, au lieu de faire glisser chaque photo comme je l'ai fait, vous pourriez accélérer un peu le processus si vous connaissez déjà les photos que vous voulez charger et dans un certain ordre. Donc, je prends trois photos qui ont mis en évidence dans mon finder, et je les traîne dans ce premier cercle, et il se remplira automatiquement avec tous. Donc, cela fonctionne très bien, si vous voulez faire quelques photos de profil génériques, donc vous avez peut-être des headshots ou des coups de personnes et vous avez peut-être 20 petits cercles qu' elle a créé la grille de répétition. Vous pourriez Dragon 20 sorte de générique tous les différents headshots le traîner là-dedans, et ils vont remplir toute une rangée de 20 qui sera vraiment utile lorsque vous faites le développement d'applications mobiles. Aimeriez-vous beaucoup d'utilisateurs ? Donc juste un petit truc du métier. Maintenant, il est temps de faire un pied de page simple. Donc en ce moment on est coincés avec ce genre de taille de 9 20, mais on sait qu'il y a quelque chose qui s'appelle sous le pli. Donc, lorsque vous chargez une page Web, c'est ce qu'ils verront. Mais il y a aussi des moyens de faire défiler vers le bas. Et Seymour Alors comment concevoir plus bas que ça alors que nous sommes déjà à la limite ? On va aller de l'avant et cliquer sur notre nom principal ici pour le tableau d'art. On va descendre ici pour faire défiler, et on va s'assurer qu'il est mis à la verticale. Et donc cela nous permettra de tirer ça vers le bas pour que nous puissions faire des choses en dessous du pli. C' est donc ce que les gens devront faire défiler avec leur bouche pour voir. Des choses moins importantes, vraiment. Mais on va faire le pied de page. Donc ça va être le point où quand ils ont chargé dans leur navigateur, c'est la ligne que ça finit. On va faire un pied de page simple. Allons-y et on peut juste prendre ce bar. Je peux tenir vieux pour option. Allez-y et copiez ça. Maintenant, nous pouvons en faire une couleur unie. On pourrait même faire cette couleur jaune, commander notre panneau de styles et le rendre jaune ? Ça dépend. J' en veux un. Je pense que ça avait probablement l'air un peu mieux que nous pourrions faire un gris clair, mais je pense qu'un violet aurait l'air bien. Alors maintenant que nous avons une sorte de panneau d'actifs s'ouvre, nous cliquons ici pour obtenir notre panneau d'actifs. Nous avons notre logo et noir et blanc. Allons-y, remplis avec notre logo blanc. Amenez-le ici en bas quand nous serons en mesure d'ajouter ou de contacter des informations. Maintenant que nous avons nos styles de personnages vont beaucoup plus vite, allons de l'avant et apportons une copie de paragraphe. Donc on va aller de l'avant et mettre en évidence notre boîte de texte. On va aller de l'avant et monter notre pied ou nos colonnes. On dirait un type en quelque sorte de texte générique. Donc texte ici, texte ici, texte ici, texte ici juste être quelques liens. J' y vais, j'ai mes styles de paragraphe. On va aller de l'avant et cliquer sur le style de paragraphe, mais ce sera sur des arrière-plans sombres. On va devoir définir un style de paragraphe différent ici, donc je vais aller remplir, aller de l'avant et mettre en place ça. Comment j'aime ça pourrait faire différentes colonnes ici. Nous allons obtenir nos touches fléchées avec glisser certains de ces éléments, et nous pouvons probablement le rendre un peu plus grand. Alors faisons ce 18 point et taille. allons changer l'écart ici, donc nous avons un peu plus grand écart. C' est 2 30 Il pousse un peu plus loin à 40 donc ça pourrait être votre genre de texte de lien. Alors faisons cela et faites glisser cette boîte plus bas. Faisons de ça un lien, alors on va monter et en faire un médium. On va le rendre métallisé et on va faire une sensation de jaune s'adapter à nos couleurs et faire du jaune. Et une fois que nous allons faire le lien ici, il va double-cliquer sur ce lien. Un lien vers Blink trois Presque faire un lien pour Okay, donc maintenant nous pouvons faire un clic droit et nous pouvons ajouter que les styles de personnage actifs orteil et maintenant nous avons un autre style de personnage d'arrêt. Double-cliquez sur cela dans ah, liens fond sombre. Ce seront vos liens pour un fond sombre et que nous pourrions faire quelque chose de cool, qui est la grille de répétition, et nous pouvons continuer à répliquer ceux pour faire plusieurs colonnes. C' est beaucoup de liens, mais nous faisons juste un exemple. Peut-être nous laisse-le faire. Est-ce que cela fait pour Ah, faisons trois lignes juste là. Ok, nous pourrions faire du texte d'en-tête ici aussi, aussi, alors allons de l'avant et pour regrouper cet objet, prenons cette option. Les tombes pouvaient maintenir la touche d'option enfoncée et pouvaient obtenir ce petit en-tête ici. Et rendons ça un peu plus petit. Alors faisons ça 25. On pourrait aussi le rendre blanc, ou ça me plaît. Je l'aime si bien jaune. Je fais une sorte de répétition génial à nouveau, nous épargnons un peu de temps. Faisons trois, puis on va pouvoir zoomer et on pourrait obtenir les colonnes et agrandir jusqu'à ce qu'elles soient gentils. Et même si, voyez à quel point nous sommes capables de le faire rapidement. Un illustrateur prendrait beaucoup plus de temps. J' aimerais que ça arrive. Un jour. Ils apporteront cette grille de répétition à l'illustrateur et Photoshopped. Ce serait génial. Ok, donc juste comme ça, on a fait un pied de page rapide. Donc, disons que je veux faire une sorte de photo de superposition graphique cool au-dessus du pied de page . On va le faire ensuite. Alors maintenant, je change d'années, je suis de retour dans Photoshopped. X'd est fantastique, mais ils n'ont pas beaucoup de capacités de retouche photo. C' est pourquoi il est agréable d'avoir un autre programme de retouche photo pour pouvoir éditer des photos pour faire des transparents et des modes de fusion et faire des effets photo cool. Donc on va le faire ici avec cette photo. Je vais aller de l'avant et attraper l'outil rectangle et créer un nouveau calque. Et je vais juste prendre le, euh, cet outil de montre ici et obtenir un double clic et j'ai une copie et coller. Mon petit code hexadécimal que j'ai pour le violet était essentiellement d'obtenir mon échantillon violet et je vais prendre l'outil de seau de peinture, allez-y et remplissez ça et je vais faire glisser ça en dessous. Je vais juste faire un mode de fusion. Je sélectionne ma photo en couleur supérieure et je fais un mode de fusion jusqu'à la luminosité ou celle qui serait la meilleure. Presque sûr que ça va être de la luminosité, et je vais juste faire un effet de plume. Donc, je suis juste en train d'ajouter un masque de couche pour obtenir mon outil Grady int et de faire un grain noir et blanc dans. Donc quand tu feras du noir et blanc sur un masque, tu pourras le mélanger, ok ? Et je vais juste réduire la transparence à ce sujet pour qu'il ne concurrente aucun de mes pieds ou de mes informations, et nous pourrions toujours le recadrer annexe D. Donc je ne suis pas inquiet à ce sujet. J' allais aller aiguiser. Je vais juste aiguiser un peu, avoir une belle nette Kristen Crisp et une conversation d'image. Donc maintenant je suis prêt à dire que c'est un J. Paige et je vais apporter ça dans Adobe X'd et être capable de mélanger ça dans Comment j'aime qu'on va aller dans X 'd et ce que je vais faire, c'est que je vais aller de l'avant et copier et coller mon pied de page conteneur donc je vais tenir. Option pourrait faire glisser une copie sur la tête dite et recadrer Ma photo Comment je voudrais. Je vais apporter ma photo la plus récente, ce dragon et j'ai un double clic parce que je n'aime pas où il l'a recadrée et je vais la faire avancer ou monter. Je vais juste le glisser sur le dessus et l'envoyer vers l'arrière dans le système de superposition. Donc je vais juste le faire en tenant le commandement et le crochet gauche. Mon petit raccourci. Cela fonctionne dans tous les programmes Adobe, et ils sont faibles. Nous avons notre petit pied de page avec nos gens cool plan de fond, et je voudrais peut-être réduire la transparence sur celui-ci. Donc je vais aller de l'avant et faire cette ombre, mais réduisons la transparence. Je suis ici dans le dépistage du numéro d'apparence que de retour afin qu'il ne rivalise pas avec des informations détaillées de lien. D' accord, donc nous devons faire une chose de plus, et il sera en mesure de commencer à relier notre objet. Donc une chose qu'on pourrait faire, c'est juste de remarquer ça. Je vais regrouper à la fois l'arrière-plan, la forme solide et la photo qu'on vient de traîner dessus. J' ai un groupe de ceux ensemble. Donc, ils restent ensemble comme une unité que j'ai pensé à vous savez, et si j'ai étendu ça ici quelque sorte créé un genre de design intéressant. Peut-être que c'est un peu de chevauchement. Donc, vous pouvez voir les ombres ici qui pourraient marcher. Donc on pourrait le faire ou l'avoir comme il l'avait. J' aime ça comme ça. Faisons ça. Donc, nous allons juste une sorte de redimensionner automatiquement la photo à l'intérieur de ce conteneur redimensionner automatiquement est que vous décalé plus haut, ce qui est vraiment cool. 6. Créer notre sous-page: Ok, donc je viens juste de faire quelques petits ajustements et j'ai eu cette section inférieure peut aller sur les trois cases au lieu d'avoir le genre d'interagir comme ça. Alors maintenant je suis prêt à faire une petite icône, une petite icône de la maison. Il doit être en haut, à droite, droite, sorte que peu importe la page sur laquelle je suis, j'ai cette belle petite icône d'accueil où je peux récupérer à la page d'accueil. Donc, si vous connaissez Adobe Illustrator, vous connaissez déjà l'outil de broche et cela fonctionne exactement de la même manière dans Adobe X'd. Donc je vais aller de l'avant et prendre Va faire une petite icône de maison. Alors allons de l'avant et faisons une sorte de boîte simple. Il va décoller de la frontière. Je vais faire de beaux coins arrondis mais pas trop arrondis. Donc juste des coins vraiment subtils et je veux maintenir la touche d'option enfoncée et je veux faire ces virages pointus parce que ce sera là où le toit va aller. J' ai vraiment besoin de ces coins inférieurs doux. Donc je vais prendre l'outil à broches et dessiner un toit simple pour notre maison. Je viens, tu pourrais juste l'ajuster. Et contrairement à l'illustrateur, vous pouvez double-cliquer dessus. Il se transformera en l'outil de courbure juste en mettant en surbrillance. Ils ont juste l'option d'outil à une broche. Donc, vous double-cliquez. Il va tourner autour, et vous avez vos poignées où vous pouvez l'ajuster. Nikkan Double clic et il retourne à une forme pointue. Je peux faire tout ça en faisant une telle chose, alors enlevons la frontière et passons à un Phil. On a une petite icône de la maison. On peut ajuster ça. Vous pouvez également le développer dans Adobe Illustrator, un autre programme vectoriel, et l'intégrer en tant qu'actif. Mais vous pouvez également créer ici. Mais si vous avez Adobe Illustrator disponible, j'aime faire tout mon J'ai un peu meilleur contrôle du stylet, le contrôle outil de broche et le mauvais illustrateur adobe, donc je vais faire beaucoup de mes icônes là-bas et apporter cela comme une cellule de caractères. Mais la grande chose à propos de X TV le garder en direct. Vous serez en mesure d'animer certaines parties d'un symbole de ce que vous êtes intéressé à faire. Donc j'ai eu ce genre de vie simple. Je veux faire une porte, Glenn, créer notre porte. Nous voulons en faire une forme solide. Changons ça pour remplir. Faisons une couleur différente. On allait frapper ça, comme dans Adobe Illustrator. On veut un coup de poing. Donc je vais mettre en évidence Aller de l'avant, regrouper ces deux éléments blancs ensemble. Je vais frapper ça à partir de ça, ce fond. Donc il y a l'outil Pathfinder ici, comme un illustrateur adobe. On va cliquer dessus jusqu'à ce qu'on trouve le bon. Donc exclure le chevauchement, qui est l'icône extrême droite est cliqué sur. C' est comme l'outil Pathfinder. Je l'ai frappé. Maintenant, j'ai mon icône. Donc je vais aller de l'avant et faire de ça la bonne taille pour qu'il fasse un peu de zoom arrière, maintienne le décalage vers le bas et en fasse la bonne taille pour nous. Il semble qu'il garde ces courbes et ces taxes, sorte qu'ils le rendent plus petit, il s'agit d'adapter ces courbes, ce qui n'est pas nécessairement le besoin que je veux. Donc, il pourrait être préférable de faire la taille de l'icône de la taille qu'il va être en zoom avant plutôt que faire plus grand et de le rendre plus petit. Mais c'est peu importe, parce que je peux le désoigner et être capable de faire le même effet. Allons-y et voilà ma petite maison. Je Collins m'assure que la taille de celui-ci. C' est très bien. On va cliquer dessus. Il faut trouver la bonne position. J' aimerais l'aligner. Tu vois cette ligne rose ? La façon dont il est aligné à gauche du coin des toits est aligné avec ça. C' est sympa. Ravi d'être sur une grille comme ça. Vous pouvez juste trouver le bon positionnement. Donc je vais faire ce symbole, donc je vais zoomer, sélectionner. Je vais faire un clic droit et faire un symbole pour que nous sachions pourquoi il est si pratique d'avoir ça comme symbole ici sous peu. Maintenant que notre page d'accueil a été conçue, nous avons encore besoin de faire un menu de navigation. Mais gardons en quelque sorte trois options simples ici juste pour faire notre premier projet ensemble et en faire un design web plus simple. Nous allons donc devoir créer plusieurs tableaux d'art maintenant. Donc nous avons été dans cette fenêtre de conception tout ce temps et nous allons bientôt passer dans prototype, qui nécessite plusieurs tableaux d'art différents pour être en mesure de lier et en fait faire un véritable cadre de fil en direct. Alors créons un nouveau tableau d'art. Donc, c'est créer et les nouvelles options de tableau d'art ici sur ma gauche, il va simplement cliquer dessus et il va ajouter une nouvelle option partout où je clique. Donc il va aller de l'avant et ajouter cette option, qui n'a pas le pied de page. Donc je veux aller de l'avant et le faire glisser vers le bas. Donc, il a le pied de page, donc ce sera notre première option de sous-page. Donc, ce que j'aime faire, c'est que j'aime sélectionner tous mes éléments et copier et coller. Ou dans mon cas, je vais maintenir l'option enfoncée et faire glisser. Allez-y et obtenez ceci disponible. Alors maintenant, je pourrais faire mes sous-menus. Donc, lorsque je clique sur l'option 1, ce sera le site Web où il ira. Ce sera notre page d'accueil pour notre premier lien ici, une option qui va garder la plupart de ces éléments comme la navigation supérieure et le pied de page resteront tous les mêmes. Mais je n'aurai pas besoin de ces options. Quoi ? Tu as besoin de ma photo ? Allez-y et supprimez tout cela. Donc maintenant, nous devons faire une page de destination. Alors pensons à la mise en page pour cela. Donc je vais dessiner une boîte rectangulaire pour être le conteneur d'une image qui va exister ici . Et je voudrais utiliser la même image. Allons-y et allons voir si on ne peut pas traîner ça ici. Allons télécharger City de retour. Il ne peut pas trouver ce même gars différents drag que ici Donc ne peut pas double-cliquer et faire le bon recadrage. Et je vais faire un en-tête ici, donc je ne pense pas que je vais avoir besoin de ces informations, mais continuons à copier et coller du texte générique. Faisons tout ce bloc de copie dans cette boîte. Vous devez mettre en évidence tout cela et en faire mon paragraphe pour mon fond blanc. Et faisons un pour ça. Je pense que les alignements de gauche vont s'arranger le mieux. Alors allons de l'avant et zoomons, faisons un alignement à gauche. Je descends ici et je fais juste un alignement à gauche. Ok, alors maintenant, prenons un texte d'en-tête. Eh bien, allons-y. Prenez notre type d'outil de type quelque chose dans Go générique et mettez-le en surbrillance et faites ressortir nos styles. Faisons un H. Rendons-le jaune Maintenant, je pourrais faire glisser ma boîte de sélection pour que je puisse avoir tout mon texte, donc titre ira juste ici. Donc c'est un assez grand donc presque me demander si je pouvais faire dans h deux ou si nous avons besoin de quelque chose entre ça Alors laissez-moi faire H je veux faire h deux et faire un peu plus grand Faisons un entre les tailles Ce sera bon pour les sous-pages Nous allons faire un 60 cela deviendra hh aussi. Donc je vais faire un clic droit et ajouter ce personnage à mes actifs ça va être H 2 et ça sera hh 3. Vous en avez besoin entre la taille de l'en-tête Faites cet âge aussi. Je vais juste répliquer apporter cette boîte de délimitation ici. Je vais juste répliquer cette copie de paragraphe. Nous avons donc un peu plus à travailler. D' accord. Vous n'avez pas besoin de pauses d'assman, alors on vient d'arriver. Donc il y a une sorte de page secondaire probablement amener ça beaucoup plus haut. Nous n'avons pas de grande zone blanche lorsqu'ils ont consulté la page Web pour la première fois. Parce que souviens-toi, ce pied ne sera pas visible. Ils vont avoir, ils vont être coupés ici. Donc, nous devons y réfléchir quand nous faisons notre conception. Nous voulons nous assurer qu'il est adaptable. Donc, si un titre vraiment long était là, ça aurait toujours l'air bien, parce que vous ne savez pas la taille que les phares seront quand vous êtes en mode concept . Mais elle veut être en mesure de faire un design flexible qui puisse faire les gros titres et les gros titres parce que nous pourrions rendre les choses jolies. Mais peut-on mettre à la fois des phrases courtes et longues dans cette boîte et ça marche toujours parce que je ne sais pas combien de temps cette phrase va durer. Donc, nous voulons pouvoir le faire fonctionner avec plusieurs titres, ses gros titres plus longs, nous allons aller de l'avant et adapter ceci et le rendre un peu plus court d'un intervalle entre les lignes afin que je puisse être prêt à mettre les manchettes plus longues ici si le client en a besoin, donc c'est déjà préparé. Bien. Donc, je pourrais devoir aller de l'avant et cliquer sur ceci et ajouter ce personnage à mon actif, Faites cet âge aussi. Et si j'en ai un ancien qui a cet espacement différent et que je ne veux pas que ce style de personnage soit juste, cliquez et supprimez-le et il a disparu. Ok, donc maintenant on a ça parce qu'on va copier et coller ça pour faire sur d'autres sous-pages. Donc, nous nous assurons que c'est juste, sorte que lorsque nous avons des titres plus longs, nous ne devons pas nous asseoir là et ajuster la tête à chaque fois. Ok, donc nous allons faire notre premier prototype où nous relions une grande longueur et créer notre premier type de cadre métallique interactif. 7. Grille réactive: donc grilles grilles sont incroyablement importantes lorsque nous commençons à développer plusieurs tableaux d'art et nous adaptons notre design encore et encore et plus de 20 fois différentes avant d'aller à cette étape gagnerait vraiment assurez-vous que la page d'accueil et notre première sous-page sont vraiment parfaites dans une ligne à la grille, donc il y a quelques façons de le faire. Il y a deux types de grilles que vous pouvez appeler et X, et je vais vous montrer le raccourci clavier pour obtenir une commande de maintien et faire des citations pour tirer la plus grande grille, et vous allez vouloir sélectionner le tableau d'art. Avant de faire ça, les raccourcis vont sélectionner le tableau d'art et la nouvelle commande, puis ma citation, et ça va vous donner une petite grille typique que vous verrez sur la plupart des autres programmes Adobe. Et c'est vraiment génial pour la mise en page et le blocage. Nous avons une commande entière et faisons les citations à nouveau pour le faire revenir, et c' est donc un très pratique pour le blocage, Mais il y a aussi quelque chose de vraiment génial pour la grille responsive. Donc il y a une grille réactive, et pour appeler ça, c'est la même chose, mais tu vas ajouter un quart de travail. On va faire le changement de commande et le déshabillé, la citation. Il va pouvoir tirer la réponse de la grille et vous remarquerez. Et votre panneau, votre panneau de propriétés. Vous avez une nouvelle option de grille une fois que nous rappelons la grille afin que vous puissiez changer la quantité de colonnes . Donc en ce moment, ce sera votre réponse par défaut 12 colum de grille. Mais vous pouvez également changer la gouttière fouetter la colonne avec et vous pouvez même ajuster les marges si vous passez à la grille de boîte ici sur la droite et vous pouvez toujours revenir à la valeur par défaut ou il peut faire par défaut afin que vous puissiez appliquer le même orteil de grille tous vos autres tableaux d' art, donc on ne va pas le personnaliser de manière significative. Mais nous allons changer la couleur pour ne pas nous empêcher d'essayer de l'adapter à la grille. Donc je vais juste réduire un peu la transparence de mon grand. Deuxièmement, voyez mon design un peu plus, et maintenant nous allons commencer à adapter certains de ces éléments à notre grille. Nous allons commencer avec des éléments spécifiques et le genre de travail mon chemin vers le bas un peu de zoom dans l'école et en quelque sorte aligné mon logo à un endroit où je pense que ce serait un bon placement sur la grille et en utilisant mes guides intelligents qu'ils vont m'aider à points, puis en utilisant, comme, les touches de mon clavier, mes touches haut et bas et gauche et droite pour ajuster. Donc peut-être qu'on pourrait faire une petite icône de la maison et l'emmener à la fin de cette colonne ici . Même chose avec nos boîtes. On peut aller de l'avant et regrouper ces boîtes. Il va le faire glisser, refusant mes touches de clavier pour avoir un très bon contrôle sur combien il glisse ensemble cet élément. Vous voulez pouvoir le faire glisser. Nous pourrions ajuster l'écran si nous voulions aller plus loin pas avoir de telles marges larges sur la gauche et la droite. C' est vraiment à toi de décider. Quel genre de grille que vous aimeriez avoir. Vous pouvez passer à la grille et changer ces options à partir de Magna. Diapositive est terminée et avoir une colonne égale avec gauche sur la droite et la gauche. Bon, maintenant on va s'assurer que les logos en haut du bas sont en ligne. Donc, je vais d'abord sélectionner le haut et sélectionner des objets tout le long, maintenant les envois, les objets foudre pour m'assurer que tous sont centrés. Certains ici dans mon panneau de ligne juste pour faire un centre de ligne. Tous sont en ligne. Je vais zoomer et faire quelques changements ici. Je crois que c'est toujours sur la grille de répétition. Donc, si je voulais les déverrouiller et commencer à les changer individuellement, je peux Où peut changer la colonne avec pour les faire aligner ? D' accord. Et je dois aller de l'avant et faire un clic droit sur cette grille de répétition et sur le groupe. Alors maintenant, ils vont devenir leurs propres éléments. Donc maintenant je vais centrer ces éléments, l'en-tête et les liens inférieurs. Même chose avec ça. Il maintient la touche Maj enfoncée, sélectionnant les deux. Et maintenant je peux les aligner sur la grille. Donc peut-être que je veux que ça soit aligné à la fin de cette colonne, et la même chose va avec cette colonne absente. Bel espacement. Donc si je mets la fin de la file d'attente là-bas, alors peut-être mettre la fin de la fin. Où peut juste avoir besoin de faire un alignement central ici et un alignement central ici. Alors maintenant que tout est vraiment fini comme vous l'aimez, nous pouvons commencer à penser à notre prototypage et commencer orteil lien vers certaines de nos pages. Je veux aller ici pour alimenter le réseau ici très vite. On va cliquer sur mon tableau d'art. Nom sur. Je vais faire mon petit commandement, qui est Come, citation de l' homme pour remonter ma grille. Mais je veux parler de mon pont réactif. Donc je vais faire ah, changement de commande, citation et j'ai le même grain appliqué. Vous pouvez toujours passer à la valeur par défaut. Donc, si vous l'avez modifié sur le 1er 1 et que vous voulez appliquer, disons que vous changez les colonnes lorsque vous voulez l'utiliser, il suffit de cliquer ici et vous pouvez faire la valeur par défaut. Et chaque fois que vous rappelez la grille sur un nouveau tableau d'art, ça fera celle que vous avez modifiée. rappelez la grille sur un nouveau tableau d'art, Donc, si vous voulez faire une grille de 10 colonnes et utiliser cela pour tout par défaut, vous pouvez nous allons aller de l'avant et adapter ceci. Puisque le pied de page inférieur est exactement le même. Je vais juste faire un clic droit et regrouper cet élément et aller de l'avant et me débarrasser de celui-ci. Alors pourquoi réinventer la roue ? Le temps va tenir l'option et la remettre ici. N' importe quoi pour gagner du temps. Je veux m'assurer que je peux aller ici à mes paramètres afin que je puisse voir la position Y est 10. 66 ne va pas cliquer sur ce groupe, et c'est 10 77. Donc ce que je vais faire, c'est copier ça. Pourquoi placer sur cette page d'accueil, et je vais l'adapter à celle que je viens de traîner pour obtenir un placement parfait de l'un à l'autre. Donc je colle juste mon placement y, qui a été un peu poussé. Donc, vous appuyez sur Entrée. Donc maintenant ça va être exactement aligné l'un avec l'autre. Apporte ma photo. On pourrait faire glisser sa photo ici jusqu'à la colonne pour que la même chose avec notre typographie, on pourrait peut-être le faire au début d'une colonne. On pourrait le traîner ici. Nous avons beaucoup d'espace blanc et laissez-moi traîner ça ici, et je voulais aussi mettre une autre petite ligne ici quelque chose. Prends mon outil ici. Je pense qu'on a beaucoup d'espace blanc. Nous devons avoir une sorte d'élément pour diviser tout et juste entrer dans mes actifs, qui en fait une couleur et enlever n'importe quelle bordure sur mon annonce par défaut. Ok, si génial. Je vais aller de l'avant et zoomer et désactiver la grille. Et j'ai aussi réalisé que je voulais faire la deuxième partie supérieure. Alors je vais aller de l'avant, me débarrasser de ces éléments. Allons chercher cette partie supérieure exactement comme nous l'aimons. Nous pouvons ajouter des liens de talent un peu plus tard, mais je fais juste un peu un site Web très simple au début, sans trop de longueurs pour vous montrer comment fonctionne le prototypage de protestation. Nous allons renvoyer le système de superposition que je tiens maintenant. Commande à gauche le tenant. Je pense qu'on a une image de héros. C' est pour ça que ce n'est pas parfait. Donc, allons-y et désactivez sont grille réactive. Je vais maintenir la commande enfoncée, puis déplacer et ensuite le guillemet pour les faire disparaître. Mais vous devrez sélectionner vos deux tableaux d'art si vous en avez les deux. Donc je vais juste faire le changement de commande et la rotation. Maintenant, ils sont tous les deux éteints, et nous sommes prêts à commencer à prototyper et à relier notre toute première semaine. 8. Prototyping: Je vais déplacer mon tableau d'art un peu vers la droite juste pour voir les connexions un peu mieux. Maintenant, j'ai été en mode design tout ce temps, mais passons en mode prototype. Je pense qu'on est prêts. On va commencer à relier certains de ces éléments, et on va cliquer sur mes panneaux d'actifs. Je peux avoir tout cela disponible. Donc ce que je veux faire, c'est comme ça que je vais relier les choses ensemble. Donc, lorsque je fais un aperçu en direct et que je clique ici pour faire un aperçu du bureau, je serai en mesure d'interagir avec le site Web. Donc la première chose que nous voulons lier c'est notre première sous-page, qui pourrait être l'option 1. Donc je vais zoomer ici et vous remarquerez que vous voyez une petite touche fléchée. C' est comme ça qu'on va pouvoir le relier. Nous allons cliquer sur cette touche fléchée dans cette boîte entière quand il est cliqué, où cliquer ici et faire taper, qui est fondamentalement un clip, Un clic et un glissement est lorsque vous faites glisser avec la souris ou avec votre doigt, et On va faire une transition juste. Donc ça va changer de celui-ci au vert suivant. Margaret, tu choisis un tableau d'art que nous allons choisir, le seul que nous avons à disposition, et tu vois comment ça relie tout automatiquement. Et on va à une animation qu'on pourrait faire, dissoudre. On peut le faire glisser vers les rires, lumière vers la droite. Faisons une diapositive à gauche pour que je vienne te montrer à quoi ça ressemble. Vous pouvez changer la durée et la rendre vraiment élégante en faisant une durée plus longue. Alors peut-être essayer un 0.8 et voir si ce n'est pas trop lent ou trop rapide. Et c'est à ce sujet. On pourrait le faire à l'aise. Il y en a deux. Vous pouvez jouer avec un couple de ces nouveaux air dans le dernier mois ou deux que vous pouvez expérimenter avec. Ok, donc on a ça lié. Donc maintenant, si nous allons à l'aperçu en direct ou aller à notre aperçu, c'est l'aperçu d'un site Web que nous faisons défiler vers le bas. C' est lié donc nous cliquons sur ce qui va glisser vers la gauche, et puis notre sous-type de page est disponible. Alors, qu'est-ce qu'on fait maintenant ? On est coincés. Nous avons une boucle fermée. Nous devons en faire une boucle ouverte qui remonte à la page d'accueil. Donc, nous voulons rendre ce petit symbole cliquable à la maison. On va créer un autre lien. Donc on va descendre sur notre page d'accueil. Nous voulons relier ça à la maison. Tu vois cette petite ligne ? Je vais cliquer et tenir. Allez lui et cliquez dessus n'importe où sur ce tableau d'art. Cliquez dessus en arrière. On va faire un robinet, ce qui est un clic. Ça va faire une transition. c' Retourne à notre 1ère etc'est là que c'est sympa de nommer ton tableau d'art, donc tu ne t'embrouilles pas. Donc je nommerais cette maison, et on va faire une diapositive à droite. Donc, au lieu de glisser à gauche, il glissera. Droit. Donc, il semble qu'il soit dynamique en elle se souvient automatiquement de nos paramètres, ce qui est fantastique. Maintenant, nous avons deux liens. Nous avons un lien ici et un lien ici. Allez-y. Vous voyez, tous ses liens vont rapidement double-cliquer dessus et taper ça comme maison et taper ça comme option 1. Juste quand je commencerai à le lier. J' ai des noms plutôt que des nombres aléatoires. Super. Alors allons à l'aperçu et voir nos liens et l'action. Il suffit de cliquer sur l'option 1. Juste comme ça. Il y a eu cette belle transition. Je veux rentrer chez moi. Je vais cliquer et tu pourras rentrer chez toi. Et je pense que ce retard est un peu trop décalé. Ça a l'air maladroit. Donc, si je veux éditer une connexion particulière, c'est bien. Cliquez sur la connexion. Double-cliquez dessus ou juste rapidement à la fois. Ils vont le changer pour peut-être 0,4. Coupez-le en deux. Ok, je vais retourner ici et le couper en deux, aussi. Donc maintenant cela reviendrait aperçu des orteils. On pourrait le tester. Voyons donc comment nous aimons la transition. C' est clic. Ça va glisser. C' est un peu plus rapide. Ils étaient rapides de retour à la maison. On y va. Alors on y va. Nous avons déjà une sorte de cadre de travail en direct, qui est tellement cool que cela prendrait si longtemps à faire il y a seulement quelques années. Et maintenant, regardez à quel point nous avons pu le faire rapidement. Donc la prochaine fois qu'on fera quelques options, on va cliquer sur toutes ces options ensemble, et ensuite on va commencer à faire un autre projet après ça. allons donc faire quelques sous-pages et relier ces pages très rapidement afin que nous puissions mieux comprendre le prototypage et travailler avec plusieurs tableaux d'art. Donc je vais créer quelques nouveaux tableaux d'art. Je vais aller à cette icône et faire quelques nouvelles planches d'art. Donc je vais juste cliquer juste en dessous, puis cliquer à nouveau et je vais juste faire glisser ces juste dessus pour que je puisse être juste en dessous de mes menus de sous-page. Et finalement, quand vous avez 20 à 30 de ces choses, vous devez créer une sorte de flux utilisateur. Donc, vous allez demander à un utilisateur de cliquer sur une option particulière, et cela va dans cette sous-page, et ensuite vous les aurez à parcourir une sorte d'entonnoir pour arriver à n'importe quel objectif final dans lequel ils ont besoin d'être. Donc, cela finira par ressembler à une carte, et vous verrez le flux utilisateur qui est recueilli à partir de vos personas utilisateur. Vous pouvez développer si vous faites un peu de design UX donc nous allons juste copier et coller sont sous-page et être en mesure de faire apparaître certaines de ces photos. Et donc je fais juste un zoom ici et je vais juste maintenir l'option enfoncée et faire glisser. Cela pourrait, espérons-le, s'accrocher au bon endroit. Donc vous avez remarqué que j'étais capable de le faire glisser vers le bas, mais tout en dessous du pli, ce n'est pas visible. Donc je vais aller de l'avant et sélectionner ma planche d'art en haut et descendre pour m'assurer qu'elle est verticale, et je vais juste faire défiler jusqu'au bas. Je vais faire la même chose. Je vais aller de l'avant et maintenez l'option Faites glisser ceci, assurez-vous qu'il s'enclenche deux points. Donc, il a les mêmes dimensions ou les mêmes emplacements sur le tableau d'art, et il semble que je dois aller cliquer sur mon tableau d'art et descendre à la verticale et juste m' assurer que j'ai tout en dessous du pli, qui serait notre pied de page. Voici nos trois options différentes. Nous pouvons toujours faire glisser notre tableau d'art un peu vers le haut pour leur donner le même espacement entre tableaux d' art, ce qui pourrait être utile lorsque vous avez beaucoup de choses. Et alors, allons-y et échangeons nos photos. Alors laissez-moi aller aux téléchargements et échanger quelques-unes de ces photos avec les travaux d'usine. Je pourrais le faire glisser et le faire entrer. Allez-y et double-cliquez pour que je puisse obtenir un meilleur recadrage. Ok, celui-là est recadrée. Celle-là est assez bien recadrée, et maintenant on est prêts à relier ça. Bien sûr, tout le contenu finira par avoir besoin d'être modifié. Alors allons-y et allons-y en longueur dans le mode prototype. Donc, je viens de passer au prototype, et nous allons les relier afin option de cliquer et de faire glisser vers le bas. Ça va lier la deuxième page dentée et c'est mémorisé le réglage Oliver pour qu'on n'ait pas à changer ça, et on va monter en haut au 3ème 1 et le lier vers le bas. Donc, si jamais vous voulez voir toute votre connexion liée, allez de l'avant et sélectionnez le nom principal de l'art. Borden n'a pas pu vous montrer toutes les connexions sur chacun d'eux, et nous devons aussi connecter cette maison. Je reviens à la page d'accueil, alors allons de l'avant et allons à chaque icône. Assurez-vous que nous sélectionnons simplement l'icône et la relier et la relier. Un dernier, nous allons le relier, et maintenant nous avons un cercle ouvert où ils concisent Eichel et retournent à la page d'accueil de chacun. Nous allons sélectionner partout dans nos tableaux et nous pourrions voir toutes les connexions que nous avons. Alors maintenant, on va aller à l'option de prévisualisation et on va vérifier. Laissez-moi le rendre plus petit pour que vous puissiez voir. Alors, cliquez sur l'option 1. Bien sûr, nous pourrions faire défiler maintenant, dessous du pli, en cliquant sur l'option un. Nous avons ça à venir. Nous pouvons retourner à la page d'accueil, cliquer sur Option 2 retour à la page d'accueil et aller à l'Option 3. Et nous pourrions retourner à la page d'accueil pour que vous puissiez le rendre plus élaboré. Mais c'est juste un excellent démarreur conçu pour vous habituer au prototypage. Et nous allons faire un prototypage beaucoup plus complexe et pouvoir faire des animations dans le prochain projet We do, qui sera une application Web, concept et je voulais revenir sur une chose de plus avant de passer à la projet. Et ce sont vos symboles. Nous avons donc créé ce symbole avec un E. Nous ne l'avons pas apporté comme un symbole ou comme une photo. Ceci est un petit objet d'édition en direct à base de plantes, donc je peux vraiment y aller. Ahbd est le symbole. Double-cliquez sur mon symbole, et je serai en mesure de modifier le symbole sur toutes les modifications que j'apporterai au symbole ou global. Donc, si je change ce symbole en, disons jaune, vous remarquerez tous sur chaque page est changé en jaune. Donc, c'est ce qui est merveilleux à propos de l'attribution de symboles est leur global. Donc j'aime le jaune. Ça a l'air vraiment sympa. Je peux entrer avec l'outil de broche et l'éditer plus loin et apporterai toutes les modifications sur tout cela . Donc, vous n'avez pas à vous asseoir là et copier et coller la maison changée sur le tableau d'art suivant . Tout est global. Donc c'est ça. Il y a une petite sorte de web design ? Nous avons trouvé un affichage très, très, très simple. Trois liens simples ne faisaient même pas une barre d'application, mais je vais vous montrer comment faire des animations et des pullouts, menus de hamburger et tout ça dans le prochain projet, projet, qui sera un développement d'application Web quand nous parlons sur l'image de marque et l'incorporer dans une sorte d'expérience utilisateur pour un flux utilisateur qui prend à nouveau un journal utilisateur et les amène à leur destination finale. 9. Partage et redimensionner: Alors, comment puis-je montrer mon design ? Il y a une option ici appelée Share Squatting. Cliquez sur partager et il y a quelques options que nous pouvons toujours aller vers le fichier et l'exportation. Et nous pouvons exporter les tableaux d'art en tant que J. Packer, PNG ou PDF. Et nous pouvons avoir plusieurs pages pdf. Donc, c'est génial si vous êtes encore dans le genre de phase de prototypage et que vous avez besoin d'orteil, avoir un client marque un pdf. C' est parfait pour eux. Mais si vous voulez avoir ce genre d'interaction en direct, cliquable, vous allez passer ici et nous allons publier le prototype et vous pouvez le faire. Il y a deux options différentes, mais nous allons créer un lien public, donc ça va prendre du temps pour créer un U R L qu'on pourra ensuite envoyer à d'autres personnes. Maintenant, nous avons un lien public. On peut aller ici à l'icône Lien. Nous avons notre lien copié vers notre et puis nous pouvons copier et coller cela dans notre navigateur, et il va être capable de charger sont le prototype de travail. Donc maintenant, vous remarquerez que tout fonctionne exactement comme il fait quand nous sommes dans X T. Mais maintenant, nous sommes dans un navigateur, et donc tout le monde peut voir ce que nous voyons dans la section d'aperçu de X'd, et vous pouvez également faire des commentaires. Tu retournes chercher le client ou d'autres personnes avec qui tu travailles, et il y a une autre option qui te montrera. Vous pouvez cliquer de retour sur le partage et aller vers le bas pour brancher les spécifications de conception publiées. Et donc on va le faire et il va pouvoir exporter tous nos différents paramètres pour notre personnage. Les styles sont des symboles et des couleurs, ce qui serait génial de partager avec le développeur qui a besoin de connaître les codes hexadécimaux qui ont besoin, qui a besoin de savoir sur la taille de la typographie et avoir certains des symboles. Donc c'est exporter Maintenant, une fois que l'exportation terminée, fera la même chose, va copier ce lien et le coller dans un navigateur. Ok, voici le lien. Le lien est copié. Allons-y et essayons-le. Donc ça pourrait être un peu différent de la dernière. Il va pouvoir montrer nos liens. Qui pourrait retourner à tous les écrans ? Cela va montrer au développeur comment nous voulons que leur utilisateur clique et circule dans tout. Donc, si c'était un site Web complet, il pourrait y avoir 30 ou 40 tableaux d'art différents, mais ils seront en mesure de voir le flux de l'utilisateur et comment cela est censé être lié. Vous pouvez également cliquer sur les différents, et nous avons toutes les couleurs spécifiques et vous pouvez effectivement cliquer dans une copie le code hexadécimal . Donc, c'est parfait pour un développeur qui veut juste orteil. Préparez toutes vos spécifications. Il montre toute la typographie de la police utilisée et toutes sortes d'interactions, il montrera une sorte de diapositive et d'assouplissement. Ça leur fera savoir tout ce qu'ils ont besoin de savoir. Et ils cliquent aussi ici et font des commentaires aussi. Donc, cela est utile lorsque vous travaillez avec ce développeur ou si vous, vous-même êtes celui qui va développer cela en faisant une réponse réelle à la réalité. Taille obree. C' est un excellent ajout à Adobe X'd. Maintenant, je suis capable de redimensionner mon tableau d'art jusqu'à un petit iPhone, par exemple, et de voir comment nous regardons sur mobile. Ceci est très important pour les développeurs et pour les clients de voir comment les choses s'adaptent aux petites tailles. Alors allons de l'avant et créons un nouveau tableau d'art. Aller cliqué, créer un nouveau tableau d'art et nous allons faire un tableau d'art iPhone X. Faisons-le glisser un peu plus près de sa page d'accueil. On va d'abord adapter la page d'accueil. Allons de l'avant et sélectionnons tous les éléments sur la maison, et nous allons faire quelques choses d'abord avant de copier et de coller là-bas pour que nous puissions sélectionner tous les éléments. Et si nous le réduisons, il commencera automatiquement à tout redimensionner pour nous. Donc, nous voyons comment l'industrie remaniée s'effondre quand je le rends un peu plus petit et tout fonctionne assez bien. Les trois boîtes principales ne s'effondrent pas. Comment nous aimons et c'est OK, redimensionner responsive, que j'ai juste ici sur la droite. C' est cliquer sur les orteils. C' est plutôt bon, mais ce n'est pas parfait. Cela fonctionnera environ 80 % du temps, et ils travaillent toujours sur cette fonctionnalité et l'améliorent à chaque fois. Mais pour l'instant, vous pouvez principalement modifier comment les choses s'effondrent. Donc, si vous passez à votre réponse de redimensionnement après avoir sélectionné ces trois boîtes, vous pouvez déclipser la liaison fix avec. Et donc, lorsque vous les réduisez, le avec sera maintenant réactif lorsque vous le réduisez. Si vous cliquez sur le bleu Bennett Highlights, cela signifie que la largeur sera fixée au fur et à mesure que vous le redimensionnez. La même chose pour le privilège de haute définition. Cliquez avec une hauteur. La largeur et la hauteur s'ajusteront au fur et à mesure qu'ils le font descendre et ce seront des boîtes plus petites . Donc maintenant, il pourrait apporter quelques éléments un par un genre de dedans et voir comment il s'effondre. Nous pourrions tout mettre en évidence et en faire une copie et essayer de le redimensionner à cette très petite taille. Mais le redimensionnement responsive n'est pas parfait. Ça n'aura pas l'air à 100% donc on va devoir modifier les choses de santé. Donc, nous pouvons avoir besoin de regrouper le pied de page ensemble, le regrouper ensemble et de passer au redimensionnement responsive. Et au lieu d'avoir sur auto, nous pouvons avoir besoin de le changer là où peut-être la largeur est fixée. Donc, quand nous le dimensionnons, le fouet va être fixé au lieu de ne pas être réparé. Donc, genre de test sur la façon dont ils réagissent. Donc, quand vous le faites baisser et a le meilleur type de combinaison de l'effondrement et de devenir réactif, donc auto était génial, mais jouer avec manuel et voir comment ils s'effondrent et voir comment vous voulez qu'il s'effondre sur mobile. Ça ne marchera pas parfaitement, mais c'est un type génial pour au moins vous faire commencer. Donc, vous n'avez pas besoin de le redimensionner pour chaque taille manuellement et sorte de faire quelques choses automatiques . Donc, j'ai vraiment aimé comment cette partie supérieure fonctionne. Donc je vais juste copier et coller mon image de héros haut et mon en-tête et maintenant loin et j' aime comment ça s'est effondré. 10. Conception d'applications mobiles - Configuration et Ux/Ui: Donc maintenant, nous allons passer par un ensemble de développements de conception d'application et vous voyez juste côté ici un peu d'une marque que j'ai mis ensemble rapidement, et vous pourriez reconnaître les icônes si vous avez pris des cours précédents ou des leçons avec moi. Nous avons développé ces icônes dans Adobe Illustrator, où je me suis rencontré maintenant. C' est donc la police originale avec laquelle j'ai commencé à travailler, qui est, de Sands Black, et j'ai décidé d'arrondir les coins pour lui donner une apparence plus douce et jeune et une sorte d'ajouter cette couleur différente à indiquer peut-être le centime dans l'application de plongée. Alors, quelle est l'application ? C' est pour les jeunes milléniaux qui veulent avoir une application budgétaire très simple. Donc ça s'appelle Dime, et je voulais avoir une police très simple et arrondie. C' est épais. C' est Bolden. simple parce que toute l'idée de l'APP est votre argent rendu simple, qui est le genre de slogan, Donc tout va être simple en termes de conception. Ça va être un bon flux d'utilisateurs, très facile à utiliser. Ce n'est pas compliqué. Il ne submerge pas non plus beaucoup de publicité, non plus beaucoup de publicité, donc j'ai également développé quelques types de maillages radiants ici pour peut-être utiliser des éléments de fond dans notre conception APP. ne suis pas sûr de l'utiliser, mais j'ai développé, euh, pour avoir ces actifs prêts. Donc quelques choses qu'on va faire, on va se produire et on va prendre quelques couleurs et commencer à mettre en place des atouts. Donc, quand on commence à concevoir, on n'a pas à penser beaucoup à ça. Il est déjà chargé dans X'd. Alors commençons à apporter ces couleurs. Et donc je suis juste en train de sélectionner cette première couleur verte menthe plus légère et d'obtenir une copie de mon code hexadécimal et de le mettre dans X'd. Laisse-moi le faire, Phil. Et maintenant, il pourrait faire un clic droit avant, enlever la bordure du clic droit et ajouter de la couleur aux actifs afin de faire la même chose avec un peu de couleur vert foncé ou le bleu vert. Je suppose que ce serait poppin X'd. Il va créer une boîte, s' assurer qu'il n'y a pas de bordure dans notre clic droit de remplissage et ajouter des actifs colorés, et maintenant mes actifs sont chargés. Je n'ai plus besoin de ces objets, alors ça va m'en débarrasser. Apportons aussi notre personnage de type. Donc je vais juste taper un peu générique. Ce serait une police d'en-tête. Je ne vais pas faire ça avec Sands. Alors, Ese O Sands, d'accord. Et je vais aller de l'avant et ajouter ça à mes styles de personnages. Alors je vais aller de l'avant et choisir la thérapie, non ? Cliquez sur et ajoutez des éléments d'orteil de caractère pour qu'il puisse ajouter différentes tailles. Lorsque nous avons commencé, développé l'application et avoir une idée du type, nous pouvons continuer à ajouter des actifs. Alors maintenant, nous sommes prêts à commencer. Il y a juste une chose que je dois apporter. Alors, on va entrer. L' illustrateur. Je veux apporter certains de ces graphiques. Ce que je vais faire, c'est que je suis illustrateur. Je vais juste mettre en place des tableaux d'art très rapidement pour pouvoir exporter ce sont des P et G et avoir ces actifs disponibles. Je vais aussi saisir mon logo à, et je n'aurai pas de PNG transparent quand je les amènerai en deux adobe. D' accord. Et nous pouvons les amener aussi si nous le voulions. Donc, si je voulais avoir cette icône et aussi ces petites icônes, je pourrais les amener. Quand je serai prêt, on voudra probablement en faire un blanc aussi. Donc je vais retourner et ajouter les inverser. Laisse-moi voir si je ne peux pas faire tout ce blanc et ensuite en faire une de cette couleur et l'autre petit point de la Je serais la couleur verte. Donc maintenant, d'autres seront blancs sur un fond transparent. Laisse-moi juste exporter. Faisons tout ça une sorte de taille. Nous pensons qu'on va finir par l'utiliser chez nous les enregistrer dans nos symboles. Ok, donc je vais juste faire un clic droit, faire un clic droit et faire chacun d'eux. Bon, maintenant j'ai mon symbole. Je vais faire ce blanc. Cela s'appellera Blue, et cela s'appellera Green. Et une fois que nous ferons tout ce genre de travail de fond, quand nous commencerons à concevoir, ça ira très vite. Donc, comme vous pouvez le voir, j'ai créé un nouveau tableau d'art. Pourrait être iPhone 678 Juste un peu d'un peu plus petit, taille plus proéminente là-bas est l'iPhone. X est toujours en quelque sorte en train de sortir. Donc, je pensais que j'ai conçu pour cette taille et puis un peu faire un peu réactif taille re et montrer à quoi il ressemblerait sur iPhone X et d'autres tailles et un Phillips android d'abord commencer avec une sorte de blocage de base. Nous devons commencer à penser maintenant à l'expérience utilisateur et au flux utilisateur. Et donc pendant que je développe cette marque, je pense à l'utilisateur persona et c'est là que nous sommes assis. Déplacez-vous un peu loin de vous, moi, qui est l'interface utilisateur, et nous commençons à entrer dans U X, qui est l'expérience utilisateur. Donc maintenant, nous pensons au flux utilisateur et comment ils se sentent et comment le produit est facile à utiliser quand ils passent par une sorte de l'entonnoir ou le genre d'expérience là-bas voulant sortir de l'application, ce qui serait une application de budgétisation. Alors comment c'est facile, est-ce d'utiliser le ? Pouvons-nous éliminer les problèmes ? Pouvons-nous éliminer les zones de frustration qui peuvent décourager quelqu'un ? Pouvons-nous offrir de grandes informations tout de suite afin qu'ils puissent sentir que l'application leur donne vraiment ce qu'ils veulent, qui est une version très simplifiée d'une application de budgétisation. Donc, quand on pense à l'écoulement du pied de l'utilisateur, on pense à notre bébé. Notre premier, développons quelques personnages rapides, on ne va pas vous plonger trop profondément. X devaient se concentrer un peu plus sur le côté u I dans ce projet particulier. Mais avons deux types différents de pourcentres-utilisateurs. La personne allait être jeune homme doit avoir 25 ans. Il va être bien éduqué. Il veut vraiment une application très simple, facile à utiliser. Son professionnel, il est occupé. Il n'a pas le temps de gâcher. Il veut une simplification d'une application. Nous avons aussi une femme de 28 ans qui est mère de deux enfants. Elle n'a pas beaucoup de temps. Donc, ces deux persona partagent un thème commun, ce qui n'est pas beaucoup de temps. Nous devons donc les capturer rapidement avec des informations pertinentes pour ce qu'ils recherchent. Donc, nous allons aller de l'avant et développer notre sorte de page de connexion à la page de démarrage comme vous voulez appeler, parce que lorsque vous ouvrez l'application, vous avez la moitié du journal et vous devez avoir un compte avoir cette application. Donc, la page de connexion sera notre toute première page d'accueil. Et puis nous allons devoir aux utilisateurs qui seront sur cette page, et c'est là que nous allons avoir deux types de flux d'utilisateurs différents. Donc 1% du mâle va aller dans un sens, et la femme va peut-être aller d'un autre côté. Nous avons deux types différents de flux utilisateur dans ces prototypes particuliers. 11. Conception d'applications mobiles - Homescreen: Donc, j'ai déjà fait quelques atouts que je pensais faire une belle sorte de page de connexion utilisateur coloré . J' ai donc ces deux atouts. Ils sont tous les deux rayonnants. Les maillages des messages. J' ai créé un illustrateur adobe, donc je vais juste redimensionner ça. Et ce que je pourrais faire, c'est créer un conteneur. Si je veux que cela prenne tout l'écran de l'application, je pourrais simplement créer un conteneur de couleur, aller de l'avant et enlever notre frontière, et nous pourrions son dragon dans ce serait beaucoup plus facile à redimensionner. Nous pouvons doubler, cliquer et être en mesure de faire glisser cela à des couleurs particulières que nous pensons être cool. Donc maintenant, nous allons avoir besoin de deux utilisateurs. Alors sortons chercher des cercles. Nous avons deux utilisateurs différents que vous pouvez vous connecter. Peut-être qu'ils sont mari et femme, et donc ils auront l'application, et vous pourriez avoir plusieurs utilisateurs ayant plusieurs budgets en fonction de votre famille. Donc, il peut s'agir d'une application familiale où vous êtes encouragé à avoir le même type de compte, et vous pouvez vous connecter avec différents profils comme Netflix, où vous avez un seul compte. Nous avons différents profils et vous pouvez vous connecter en tant que famille. Et puis il y a aussi une zone commune où vous pouvez voir des finances communes. C' est donc une façon vraiment cool pour les jeunes couples mariés d'avoir une attente simplifiée d'un budget et de travailler en équipe. Alors, restez à différents Loggins. Un pour le mari, un pour la femme ou deux personnes différentes. Et donc on va avoir un jeune homme allait aller aux téléchargements. Donc voici quelques coups de tête que je pourrais trouver qui je pense avec un meilleur ajustement. Une sorte de personne de notre utilisateur pensait à un jeune gars. Il pourrait être celui-là, mais il a l'air d'avoir 30 ans. Alors attrapons ce type. On va le déposer. Je vais maintenir l'option pour garder la même taille. Je vais traîner notre femme ici, jeune. On va double-cliquer et couper le redimensionnement. Ces coups de tête se rapprochent un peu autour de la tête. Donc maintenant, j'ai une mince frontière ici. Laisse-moi voir si je ne peux pas rendre ça un peu plus léger zoom et une sorte de voir, c'est là que tu as vraiment un zoom avant et que tu découvres ce que nous aimons. Donc je pourrais faire une ombre portée ici pour ces Loggins, donc je pourrais juste mettre en évidence les deux. Et lors d'une petite ombre portée, nous aurions notre logo sur l'écran de connexion. C' est assez important, cependant version blanche. C' est quand vous testez différentes choses. Donc je me rends compte, Oh, j'ai peut-être besoin d'en prendre un avec le vert clair pour aller avec ce genre de ça se fond trop. Laisse-moi prendre mon autre version. Donc, j'ai mon autre version ici qui utilise le vert plus léger afin que ça sortira un peu mieux. Je peux aussi ajouter peut-être une ombre portée à cela aussi, et nous allons avoir besoin d'informations de connexion. Bien sûr qu'on a leurs noms. Au lieu d'avoir juste une sorte de gens sans nom flottant ici, prenons notre outil de type. Nous pourrions commencer à définir notre type un peu, donc ce sera devra venir avec un faux noms. Il va juste le nommer Bob. Nous allons juste avoir un nom générique pour Bob M. et voici notre visage serré de sable azoïque, qui est dans nos styles de personnages. Mais on va en avoir un qui est aussi blanc. Alors allons de l'avant et définissons notre type. Il allait attraper cet outil de flèche. Apporte ça. Je me demande presque si nous pouvons rendre ce vert quand vous prenez l'outil pipette de l'échantillon ou peu de couleur verte. Et je veux aussi ajouter ce petit vert vert ici. Prends juste un outil carré et on va prendre la pipette. Je vais remplir ce vert. On pourrait apporter notre couleur de cette façon. Je dois apporter cette troisième couleur verte. Alors faisons de cela un atout de couleur. Alors on y va. Maintenant, nous avons trois nuances vertes avec lesquelles travailler. Retournons à White et puis peut-être juste faire le prénom Green. Et je n'aime pas vraiment le comme de Sands comme des lettres minuscules. Donc ce que je vais faire est d'expérimenter avec peut-être un choix de type secondaire qui est plus mince. Alors peut-être juste aller avec Helvetica juste pour avoir quelque chose de vraiment simple. Allons-y et remplissons son nom de famille. Donc on va faire un Ok audacieux, on a juste juste audacieux. Donc je me demande si Helvetica New Enfer the Tika voyez-vous si j'ai une plus grande quantité de poids ? Oui. Donc Helvetica nouveau j'ai un peu plus différentes options de poids. Donc je vais devenir noir et ensuite on peut aller ultra léger avec le nom de famille encore Helvetica New faire ultra léger. Mais c'est bien trop mince. Alors faisons mince, Voyons comment ça marche. Donc une fois que je suis un peu content de ça, je pourrais tenir, option et glisser et faire la sienne. Et allons de l'avant et ajouter ceci à nos styles de personnages va ajouter les actifs de style de personnage , donc il va ajouter tous ces différents poids. Donc, il a ajouté Bob comme un style de personnage et Smith comme un autre. Donc je vais devoir renommer le. Donc, je vais les renommer très rapidement pour pouvoir définir quel style de personnage est ce qu'il a pu nommer. Tous mes atouts me rendent plus facile de m'en souvenir et de les rappeler. Donc, nous voulons aussi rendre cette apus simple est possible. Certains concevaient que nous gardons cela à l'esprit. Donc, nous voulons leur faire savoir juste quelques autres choses, c' est-à-dire qu'il s'agit d'un écran de connexion, il est donc logique qu'ils cliquent sur votre profil utilisateur. Mais parfois, vous avez juste besoin d'avoir une sorte de guide visuel pour cela. Donc on va expédier ces types ou on peut les expédier. C' est qu'on va jouer un peu avec l'espacement. Nous pourrions briser notre grille pour que je puisse faire le commandement et la citation pour faire monter notre grille . Je dois choisir mon tableau d'art. Première commande inclure ation, et cela nous aidera. Ou je peux basculer dans ma grille réactive en faisant un décalage de commande dans le travail de citation afin que cela puisse nous aider un peu à dimensionner les choses un peu. Et je joue en ce moment avec différentes façons de dire connectez-vous parce que connectez-vous. Ce n'est pas vraiment de mon utilisateur persona. Longtemps dans son vieux terme archaïque, Wesley utilise quelque chose d'un peu plus doux et amical, donc je fais la majuscule en gras. Mais je dis aussi juste ouvert parce que c'est ce que nous voulons faire est d'ouvrir l'application et donc nous ne voulons pas rendre l'application ouverte si grande qu'ils ne réalisent pas qu'ils ont besoin de cliquer sur leur connexion photo. Donc, on va dire que cliquez sur le profil pour charger vos budgets douaniers en vert. Ok, je vais rendre ce Steuer beaucoup plus petit blanc clair et faisons un alignement central. Donc je veux m'assurer qu'il y a beaucoup de place pour respirer et d'espace blanc avec ça, on pourrait même avoir du diamant au fond. C' est là que nous venons d'avoir une expérience avec ce que nous pensons être bien. On pourrait faire un autre bar ici parce que je veux vraiment avoir un peu de contraste avec ce désir. Cliquez sur la bordure. On a juste un remplisseur qui fait une commande à gauche. Une sorte de l'envoyer vers l'arrière et le système de superposition. Je pourrais jouer avec des couleurs différentes. On fait notre avidité, couleur va avoir un bar pour aider à séparer ce grand espace ouvert. Et peut-être qu'on pourrait avoir une petite flèche qui s'oriente vers le bas. Donc on va aller de l'avant et créer un peu simple ou un atout qui va être étroit, donc je vais chercher mon petit outil. Je vais juste dessiner un zéro simple, et je vais faire enlever la frontière ou vraiment vouloir la frontière. Rendons-le un peu plus épais. Et faisons des bords arrondis à nos petites lignes. Alors maintenant, ils sont beaux et arrondis. Faisons en sorte qu'on puisse faire n'importe laquelle de ces couleurs. Ok, donc il y a une petite flèche. Peut-être en faire quatre au lieu de trois. Ou on pourrait l'avoir ici, au blanc. Je vais retravailler cette louange, et ensuite on va faire notre première animation, donc restez à l'écoute. 12. Conception d'applications mobiles - Animer de page d'accueil: Donc, je veux jouer avec le contraste, vraiment avoir quelque chose derrière les images de profil. Donc le spectateur s'intéresse vraiment à ces images de profil, et c'est là que je grandisse. Pop a apporté un peu la boîte grise vers le bas, donc il intersex et attire vraiment l'œil vers le centre de l'écran. qui est exactement ce que je veux que l'utilisateur voit en premier. Donc, si ce texte vraiment petit, ce n'est pas grand et écrasant, c'est très doux. Qui ouvre l'application aujourd'hui ? Il a une flèche qui pointe vers les deux profils utilisateur. J' ai aussi ajouté un lent get que votre corps fait simple. Ce sera probablement une exigence du client. Et il y a probablement aussi des informations sur les droits d'auteur que je vais devoir mettre ici aussi. Donc, je le rends plus petit. Peut-être 10. Oh, c'est mis à jour. Très bien, donc nous avons cette petite information qui sera probablement quelque chose qu'il faut considérer . Ce serait une exigence. Donc je pense que c'est gentil et simple. Je ne pense pas que je voulais être plus complexe que ça. Laisse-moi juste jouer avec l'outil de broche ici. Assurez-vous juste que j'ai la bonne forme. J' aime ça. Tu pourrais rendre ça doux. Je pourrais faire peut-être un de ses doux que non, c'est plutôt soigné. C' est comme une interface simple et agréable. Essayons de ne pas être trop complexe avec cela. Ok, laissons ça tranquille. On a notre première page, et on va faire un peu d'animation. Donc nous allons faire en animation de sorte que lorsque vous survolez ou lorsque vous cliquez sur l'utilisateur, il se présente un peu. Donc vous coupez et avez un peu de cette interaction. Donc, ce n'est pas seulement une page d'une viciée et statique. Donc on va aller de l'avant et en créer un autre, notre conseil juste à côté, et ça pourrait même être au-dessus de ça. Depuis qu'on fait une animation. Lorsque je fais le flux utilisateur, lorsque je fais des animations, j'aimerais empiler. Et quand je dio progression vers le but de fin de four coupé, il aime aller à droite. Donc, ce ne sera qu'une animation. C' est très bien. Et quand l'utilisateur pousse vers l'étape suivante, j'aime aller plus loin vers la droite. C' était une sorte de carte élue, mais vous pouviez le faire. Propres façons spéciales. Un, copiez ceci. Amenez tout ça. Et c'est là que l'animation va se produire. On va s'assurer que c'est une copie exacte, et que tout est dans la même position, donc je vais changer ça très légèrement. Donc c'est comme ça que l'animation va marcher ? Je vais l'avoir. C' est la première partie de l'animation, et c'est le deuxième écran de l'animation. Donc ici, je vais changer ce que je veux changer. Donc je vais faire en sorte que ce soit l'état final de l'animation. Donc je veux qu'il soit un peu plus grand, et je veux qu'il soit notre top. Donc il sera le 1er 1 qui va être sélectionné, donc je pourrais même changer le nom un peu. On verra à quoi ça ressemble. Donc maintenant on va animer, et on va basculer dans le mode prototype pour le faire pour que je puisse aller le retourner en prototype. Ok, donc c'est comme ça que tu fais l'animation quand je suis en prototype et que je vais sélectionner ce que je veux animer. Donc j'ai ça, Vous avez une sorte de profil sélectionné, et je vais aller cliquer sur cette autre petite pièce de profil et je vais avoir ce soit une animation automatique. Donc, la transition se déplace-t-elle d'un clic à l'autre ? Et ce sont des animations où vous cliquez sur animer auto et la destination a déjà été sélectionnée depuis que nous l'avons fait glisser. Nous voulons que ce soit un peu Ah, gardons cette animation la même et voyons à quoi ça ressemble. Ok, donc on va cliquer dessus pour prévisualiser l'aperçu et voir à quoi ressemble notre animation. Alors voici notre animation. D' accord ? Donc, quand je clique sur Bob Smith, il va aller de l'avant et l'amener, une animation à la diapositive suivante. Donc maintenant, ce qu'il faut faire est de cliquer sur Sarah et de le faire revenir à l'écran d'accueil. Donc, disons qu'il cliquerait sur Bob Smith qui va continuer sur son utilisation, ton voyage, et il va se connecter. Mais si nous cliquons dessus et que nous voulons donner aux gens une option de cliquer sur Sarah parce qu'ils ont cliqué sur le mauvais ? Alors donnons-leur cette option ensuite. Maintenant, je suis toujours en mode prototype, mais je vais devoir créer un nouveau tableau d'art. Donc je vais aller au design et créer un nouveau tableau d'art. Droit. Donc ce sera pour son voyage, et elle sera un peu plus grande. Elle l'est. Sarah Smith va aller par ici. Je vais voir comment on n'a pas entendu ça rester dans la même ligne. Vous pouvez faire avancer le profil de Sarah, assurez-vous qu'ils ont un type d'arrangement similaire. Donc je vais revenir en mode prototype vont beaucoup changer d'avant en arrière. Je vais aller de l'avant et me connecter. Ça va être son voyage. Tout va être la même animation automatique et tout est pareil. Donc maintenant, lorsque nous cliquons sur l'aperçu avec un clic sur lui, vous ne pouvez pas encore cliquer en arrière. On n'a pas configuré ça, alors ils cliquent dessus, on peut cliquer dessus. Donc maintenant, nous devons le faire cycler pour que quand on est sur la sienne, ça remonte au sifflement. Cela semble compliqué, mais c'est vraiment juste lier tout dans une boucle. Maintenant, nous avons Allons-y et la déplacer. C' est à ce moment que nous commençons à vraiment avoir besoin de cartographier. Donc ça pourrait être son voyage, et ça pourrait être son voyage. Alors maintenant, ils vont commencer à se faner dans différents voyages d'utilisateurs de personna. Ok, donc maintenant on doit se dissoluer, juste au cas où. Nous voulons retourner de ce genre de voyage et retourner vers elle. Nous devons donner aux gens une chance de s'en sortir tout de suite. Allons donc à la guerre en mode prototype. Et maintenant, nous avons juste besoin de relier ça. Cela pourrait un lien vers l'option suivante. Mais s'ils cliquent sur Bob, allons trouver un lien vers Bob. Donc maintenant ça va juste animer automatiquement Bob. Donc maintenant, nous avons Si je vais de l'avant et zoom arrière et sélectionnez tous les, Je vois comment le voyage est le clic sur Bob. Ils vont dans le voyage des bobs pour qu'ils cliquent sur elle, ils vont à son voyage. Et s'ils cliquent sur Bob, ça reviendra au voyage de Bob. Donc nous avons encore un à faire, et c'est de cliquer s'ils cliquent sur Bob. Mais ils veulent vraiment le faire. Sarah, quand je clique sur le voyage de Sarah. Donc nous créons juste ce genre de boucle gigantesque entre eux pour qu'ils puissent avoir un cercle ouvert et qu'ils ne soient pas coincés dans une impasse. Alors maintenant, on appuie sur le jeu. Disons que je veux une loi qui ouvre l'application aujourd'hui. Ok, Bob ouvre l'application Oh, attends que Sarah ouvre l'application Oh, attends, attends. Bob ouvre l'application. Donc maintenant vous pouvez voir ce genre de cycle ouvert et son. Maintenant, ce que nous devons faire, c'est quand ils cliqueront à nouveau, ça va se charger dans le voyage de Bob. Donc maintenant on va le faire, on peut se concentrer sur Bob, ou tu peux te concentrer sur Sarah. Mais allons de l'avant et concentrez-vous sur Bob d'abord. Donc nous allons continuer à aller dans le design et nous allons créer plusieurs pages différentes . Donc on va cliquer sur sa page d'accueil après qu'il se connecte sera juste ici. On va travailler là-dessus. Ça va être très similaire au voyage de Sarah, donc on va aller de l'avant et faire une nouvelle planche juste à côté, et ce sera son premier pas après qu'il se connecte. Alors maintenant, nous allons créer l'écran d'accueil pour le budget de Bob. Donc, je suis juste allé tête et copié et collé. On va avoir le profil de Bob, peut-être que faire des quarts de travail ici viendraient de l'avant et expédier l'écran. Puisse-nous faire ce genre d'animation ici. On pourrait prendre le nom de Bob, qu'il soit listé. J' essaie juste de garder une sorte de thème de design. On n'a probablement pas besoin de ça. Mais on peut faire quelque chose d'autre. Et peut-être qu'on n'en a pas besoin non plus. Je ne suis pas sûr, mais nous n'aurons pas besoin de Sarah à moins de donner l'option de retourner et de se connecter quelque part qui sera probablement ici. Nous voulons donc rendre cette information beaucoup plus petite. Cliquons sur celui-ci. Donc vous avez remarqué Quand j'essaie de redimensionner ce sou, il le fait globalement. Eh bien, je ne veux pas ça. Je veux dissocier celui-ci particulier pour le rendre plus petit sur cette page seulement. Alors, comment on se dissocie ? Les styles globaux sont des symboles globaux. On va faire un clic droit et un symbole non soigné. Et maintenant ça va être honnête et genre de niveau. Alors maintenant je peux le rendre un peu plus petit, peut-être le pousser sur le côté. Nous pouvons aller de l'avant et zoomer et nous assurer que nous obtenons le bon alignement. Et une autre chose que nous voulons faire est d'aller appeler un parc ou des cartes d'identité. Donc je vais faire une commande pour faire nos grilles réactives qui commandent le changement et la citation . Pouvez-vous l'utiliser comme un guide pour voir comment nous faisons avec les choses alignées ? Ça ferait juste basculer ça quand on veut avoir une idée. La grille. Donc maintenant, nous devons comprendre ce que Bob Smith pourrait voir dans cette pomme. Laisse-moi faire son nom un peu plus grand. Faisons ça 33. Peut-être pas aussi grand. Un atroce Let's do 27. Il obtient la bonne taille pour cette interface. Nous voulons aussi pouvoir retourner à l'écran d'accueil, donc je vais mettre un petit menu hamburger qui va pouvoir glisser et aller vous donner options avancées pour peut-être sortir vers l'autre utilisateur. Allons faire notre petit menu hamburger icône Pullout. Cem va prendre quelques outils en forme et commencer à créer notre petit symbole. Je ne veux pas avoir de frontière qui cliquerait sur ça. J' ai attrapé mes petites poignées ici et en ai fait une forme de pilule. Rendre un peu plus court. Et j'ai une option de maintien et j'ai une autre option de maintien et j'en ai une autre pour qu'on puisse le faire. Un simple est que nous pouvons le rendre stylisé et lui faire différents niveaux. Affaiblir un cercle ici, en gardant un peu arrondi parce que, conformément au thème de notre logo, vous retournez ici. Il a ces coins arrondis et une sorte de suivre le thème quand je développe les icônes aussi. Ok, donc j'ai un groupe ensemble ensemble en une seule unité le regroupant. On va en faire la taille. Je veux l'avoir. En fin de compte, peu de peau, une sorte de décalage de maintien vers le bas. Donc ils ont tous une sorte de mise à l'échelle ensemble et une fois obtenir un placement final sur le groupe décider que je veux avoir un peu plus d'espacement entre tous ces. Ça pourrait être notre petite icône. Allons de l'avant et les regrouper ensemble, trouver la bonne couleur, vous pourriez faire de la chaux, ce qui irait bien avec son nom. Alors maintenant, allons de l'avant et faisons de ça une taille, non ? Parce que, vous savez, une fois que nous l'aurons fait, Global l'aura ingrat. Tu ne veux pas faire ça. Ça va être sur chaque page. Donc, nous allons, hum, grouper ça et je suis juste très pointilleux ici. Je vais faire l'espacement entre chacun d'entre eux. Même ainsi, je vais juste sélectionner chacun de ces éléments et je vais aller à mon panneau d'alignement. Tu vois, si j'ai le bon outil d'alignement pour faire ça, on y va. Donc c'est le centre de distribution horizontal. Il n'a pas un petit nom pop-out, mais je sais dans Illustrator cela fonctionne de la même manière. Donc, vous faites la même chose en distribuant la même quantité de texte entre là, assurez-vous que c'est juste. Je ne sais pas. On dirait que c'est un peu là. C' est 3.2 et c'est 4.2. Donc je ne sais pas pourquoi ça ne le fait pas. Même cette bonté merci pour les guides intelligents. On peut l'obtenir, même si je vais les sélectionner à nouveau. Je pense que j'ai enfin terminé le groupe de clic droit, obtenir la bonne taille et puis je peux ajouter cela comme un symbole et je pourrais faire glisser cela donc c'est horizontal de son nom. Ça pourrait paraître un peu mieux, mais on verra ce qu'il y aura d'autre ici quand on commencera à le bloquer, va le déplacer, retirer mon décalage de commande de la grille, flottation et peut-être l'aligner avec la dernière colonne. Ok, donc je suis content de ça. Alors faisons de ça un symbole. Alors, cliquez et je vais faire un symbole. Et maintenant, je peux me rappeler qu'à tout moment, si nous voulons donner une option sur la page d' accueil, nous pouvons en faire une option sur la page d'accueil. Mais je pense que c'est juste un simple qu'on doit savoir qui se connectait en premier. Essayons donc de leur donner moins d'options. Le mieux 13. Conception d'applications mobiles - Écran utilisateur: avant que je sois trop excité et commencer à faire le hamburger piscine toboggan information. Je veux probablement finir cette page de budget d'abord afin que je puisse la copier et la coller et avoir mon animation et avoir le même écran affiché. Alors faisons ça maintenant. On va utiliser la grille de répétition pour faire une sorte de page très rapide ici. Donc je dois créer des formes ici, un peu son budget. Ça va le rendre un peu maigre, parce qu'on aura ça un peu sur une page pour qu'on n'ait pas à faire défiler. Vous faites un peu de pilule en forme, mais pas beaucoup. Ce qui est cool, c'est que peut maintenir la touche d'option enfoncée et juste faire, Ah, quelques quarts. Je n'ai pas à les arrondir pour qu'on puisse avoir cette forme si on pense que ça a l'air cool. Mais j'aime tout arrondi à cause de notre marque. tendance à avoir ce genre de travail, mais je vais juste le repousser. Donc c'est une fille très, très subtile. Je vais garder ma frontière, mais je vais y arriver. Faisons un gris très, très clair ou un gris foncé. Faisons quelque chose. Rendons-le super mince. Tu l'as déjà fait. Je me demande si je pourrais faire un 0,5. Je peux, oui. Donc j'ai juste une bordure très, très maigre. On pourrait faire une ombre portée, mais je ne sais pas comment ça va avoir l'air. Ça pourrait être trop lourd pour ce genre de design plat simple que nous allons chercher. Faisons ça un gris clair. Pas tout à fait blanc. C' est trop brutal. Donc juste à travers un peu d'une sorte de gris de lui donne une belle apparence. Et donc mettons notre premier numéro cisplatine. Qu' est-ce qui pourrait avoir à faire quelques devinettes ? Ici, vous avez mis 12,000 parce que ça pourrait être son compte bancaire. Peut-être qu'il est Oh, vraiment ? Eh bien, je fais un genre de gars et on devrait probablement mettre, hum, une couleur ici pour un gris foncé. Alors allons-y. Je pense que nous en avons un ici, alors ajoutons celui-là à nos styles globaux. Je clique juste sur notre gris et je l'ajoute à nos actifs de couleur ici, et je pourrais être capable de faire notre type cette couleur. Ce sera un peu son équilibre, et ensuite on tiendra le coup. Option. Ce sera le compte bancaire numéro un. Donc maintenant, nous devons faire le type assez petit où nous pouvons adapter un nom de compte bancaire long. Parce que si nous concevons une application et que quelqu'un a un nom de compte bancaire vraiment long, cela pourrait gâcher notre conception entière quand ils commenceront à le développer. Nous devons donc être flexibles et être en mesure d'avoir des noms longs dans des noms courts et de le faire fonctionner techniquement bien. Nous devons penser au côté développement quand nous faisons ces beaux designs pour que ce soit pratique. Rendons ça encore plus petit. Essayons 16. Il y a un compte en banque. Un. Essayons. Nous pourrions soit audacieux, soit affaiblir audacieux. Prenons un peu de contraste. Nous avons une mince mince Faisons que cela soit audacieux. Eh bien, quel genre d'aime ça ? Peut-être pas tout à fait une école. Essayons un moyen métallique étaient juste expérimenter avec le design. allons avoir une sorte d'élément de conception qui divise que nous pourrions mettre une barre ici pour séparer les éléments où nous pouvons prendre une boîte solide. Enlevez la frontière et nous pourrions l'envoyer à l'envers pour que le type soit devant lui. Ayez un peu de division ici. Tu sais, ça pourrait être une option. Faire les mêmes coins arrondis. Allez-y, faites en sorte que ça corresponde parfaitement. Ramenons cette frontière. Faisons la même moitié, un demi-point, taille et le rendre plus doux ou plus sombre et juste obtenir une option de maintien. Je crée juste la même courbe que celle derrière elle a. Donc ça pourrait apporter un contraste. On peut faire à la place d'un Phil blanc qui pourrait même faire qu'il soit gris foncé, Phil. Et que ce soit vert. Donc ça pourrait être, euh on pourrait avoir une flèche qui indique que ça a augmenté récemment. Alors allons-y et mettons-y une icône en forme de flèche. Et une fois que nous en aurons développé un, nous allons utiliser la grille de répétition pour les créer tous en quelques secondes. Donc on passe beaucoup de temps à faire ce premier bar. Mais tous les autres bars arriveront vraiment, très vite. Laisse-moi aller chercher une sorte d'icône de flèche, ou je peux la dessiner ici dans X D. Alors faisons-le pour qu'on puisse s'entraîner. Depuis l'obtention de l'outil Arpin faisait une simple flèche. Rien de trop excitant. Allez-y, remplissez ça et sortez la frontière. Qui pourrait le faire arrondir ? Nous pourrions faire en sorte que cette forme d'appel corresponde à notre thème. Donc la petite flèche que j'ai créée ici ne l'avait pas rendu vert. J' ai bien cliqué et j'ai fait de lui un symbole. Donc, si jamais besoin de rappeler cette flèche, je peux aller de l'avant et la rappeler. Mais je voulais en quelque sorte penser aux principes fondamentaux de cette page. Donc cette page va être pour le budget. Il est donc bon d'être moins au sujet de vos comptes bancaires sur un peu plus sur votre budget quotidien . Donc, pour ah, budget pour le budget alimentaire pour l'électricité. Donc c'est ce qu'on va créer ici. J' ai donc commencé à créer cette première petite boîte où elle résidait, et ce à quoi tu dois penser, c'est que tu dois penser au processus de développement quand tu fais le processus de conception. Donc, je dois penser que ces $150 pourraient aller jusqu'à $10,000, alors nous devons nous assurer qu'il y a suffisamment d'espace pour que ce montant corresponde à ce domaine. Et la même chose pour ici. On pourrait avoir assez longtemps. L' utilisateur va pouvoir personnaliser le nom du budget. Mais on pourrait toujours limiter ces caractères. Donc, nous pouvons devoir le limiter à tous les personnages de soins condamnés dans ce domaine. Ou nous pourrions rendre la face de type plus petite et en quelque sorte être capable d'avoir un long terme. Donc, nous devons penser à cela est que je sais que beaucoup de gens font ces beaux dessins avec cette belle grande typographie, mais ils ne pensent pas à des noms de forme plus longs qui doivent tenir dans ces petits espaces. Donc, je vais aller de l'avant et sélectionner tout cela est une unité et ce qui est génial dans la réponse de redimensionnement, qui est que je l'ai cliqué ici comme je pourrais rendre cela plus long, et il va automatiquement redimensionner aller de l'avant et le rendre plus longtemps et voyez comment il s'ajuste automatiquement. Donc je vais juste avoir un peu de marge à droite et à gauche pour que je puisse profiter du plus grand nombre possible de biens immobiliers d'écran. Donc, je pourrais contenir autant de caractères pour le nom ici. Certains regroupent ces éléments et les refondent. Ok, donc ça nous donnera un maximum de place pour peut-être deux chiffres de plus ici. Et puis je peux avoir un nom assez long ici. Donc, si je me sens 100% satisfait de cela, nous pouvons commencer à faire la grille de répétition. Laissez-moi avoir un peu plus de marge ici, à droite. D' accord ? J' utilise mon panneau d'alignement ici pour voir si tout est aligné. Comme je l'aime. Ok, donc je vais aller de l'avant et regrouper les quatre ensemble, non ? Cliquez sur et regroupez. Donc maintenant, c'est une unité. Et voici où j'aime utiliser pour répéter la grille. Donc, je pourrais utiliser la grille de répétition et aller de l'avant et en créer autant que je pense qu'ils en auraient sur le budget. Je vais tenir les colonnes et m'effondrer que je veux. Je ne veux pas avoir à serrer l'espacement. Alors peut-être juste ici, faisons-en un de plus. Nous pouvons toujours le supprimer plus tard. Ok, donc maintenant c'est là. Un groupe Donc, si je veux les éditer individuellement, je fais juste un clic droit et je vais détoiler la grille. Et maintenant, je peux revenir en arrière et changer certains de ces deux titres différents et pour que des nombres différents aient un peu plus de réalisme. 14. Conception d'applications mobiles - Écran d'utilisateur - Part2: J' ai donc passé quelques minutes en sorte de penser à la fonctionnalité de chaque barre dans chaque ligne de budget, et je voulais en quelque sorte créer quelques détails. Nous voulons donc que le budget reste, mais nous voulons aussi avoir le budget total ici. Nous voulons avoir une indication pour que quelqu'un puisse changer le budget total. Mais nous voulons aussi avoir une indication où ils peuvent cliquer et montrer qui dépense le budget, la femme du mari. Donc nous pourrions avoir deux petites indications ou icônes différentes que nous allons devoir créer pour chaque barre avant d'aller répéter la grille et de commencer à tout répéter. Vous voulez obtenir cette ligne parfaite. Donc je vais prendre l'outil de broche, et je devrais peut-être aller dans l'illustrateur pour faire une icône plus élaborée à une autre date. Mais allons de l'avant et créons une sorte de flèche qui pourrait indiquer que vous pourriez augmenter ou augmenter le budget. Donc peut-être juste une petite flèche, tout comme nous avons créé avant, faire arrondir le cap, peut-être le rendre un peu plus petit, juste une petite indication où ils peuvent sentir qu'ils peuvent cliquer dessus et le changer. Peut-être que si on faisait un vert citron, ça se distinguera un peu mieux. Cet outil compte-gouttes pourrait peut-être l'échantillonner de cette façon. Ok, donc c'est une sorte d'indication où ils peuvent planer dessus et ils pourraient changer le budget total . Et maintenant, nous avons besoin d'un indicateur supplémentaire pour pouvoir cliquer pour que cela puisse aller dans un autre système de menu qui peut montrer tous les aliments qui ont été dépensés par Bob et par Sarah . Donc maintenant, nous voulons avoir des transactions détaillées ici dans la nourriture. On a juste besoin de faire un peu de place pour les deux. Je dois me changer. Il est des boîtes de délimitation, donc ils ne prennent pas autant de place. Mais laisse-le là où je pourrais avoir des titres plus longs ici. Même chose avec le budget. Nous voulons une ligne qui à gauche ici pour faire des transactions détaillées et aller de l'avant et prendre le symbole. Je n'en ai pas encore fait un symbole. J' ai juste créé l'icône Je voulais le rendre global tout à fait encore. Peut-être juste faire un vert, je suppose que c'est pour les frontières seront. Faites un remplissage. Laisse-moi faire une frontière. Obtenez l'outil compte-gouttes et goûtez ce bleu. On y va. On pourrait faire sortir ça un peu plus. On pourrait ajouter une autre petite boîte à pilules en dessous. Faisons une très petite bordure pour faire une 0,5 à nouveau, et je pourrais ajouter une ombre portée pour l'effet. Mais je ne sais pas si j'aime trop ça. Faisons la forme de la pilule et envoyons cela vers l'arrière dans le système de superposition. Je veux vraiment que ça éclate, alors voyons. Essayez, Alignez. On va zoomer, voir à quoi ça ressemble. Nous pourrions avoir besoin de rendre le type un peu plus grand pour avoir un médium sans lumière et faisons-le huit. Je veux vraiment m'assurer que les gens savent que c'est là qu'ils peuvent aller pour des transactions détaillées. Oui, voyons à quoi ça ressemble. On va faire un clic droit. On va regrouper ça ensemble et on va faire la grille de répétition. On va répéter la grille et on va juste descendre. C' est bon de le répliquer, et on va monter ici et changer les colonnes et on doit en répliquer deux de plus juste là. Je pense que ça a l'air génial. Donc je vais passer quelques minutes et ajuster certains de ces différents ici,pour ici, que ça ne dise pas de nourriture encore et encore. Il a un budget plus réaliste. Donc, je commence à remplir tous les détails pour rendre cela aussi réaliste que possible. Je change donc les catégories, et maintenant j'ai des budgets concrets et réalistes. Donc je vais vouloir trouver un total ici. Alors allons-y et rendons ce logo un peu plus petit. Peut-être mettre ça à droite. Je ne pouvais pas avoir besoin de plus de cours immobilier d'écran. Nous pourrions également cliquer sur notre tableau d'art et faire un défilement vertical et être en mesure d'indiquer que vous n'avez pas à tout garder au-dessus du pli. Nous pourrions avoir une option de défilement plus longue, donc ne vous inquiétez pas trop de l'immobilier, mais moi personnellement, j'aime tenir autant que je peux sur un écran. Vous n'avez pas à faire défiler, alors avons une surface totale. Donc on va aller de l'avant et goûter. Laisse-moi désoigner celui-là. Allez-y et maintenez. Option Je vais juste échantillonner mon nombre total. Je vais rendre ce blanc et,bien sûr, bien sûr, tout audacieux. Donc, cela se distingue vraiment parmi les autres. Faisons un noir condensé pourrait avoir l'air cool. Le laisser sécher c'est essayer un audacieux Nous allons le rendre un peu plus grand en taille. Essayons donc 37. Nous allons zoomer pour que vous puissiez voir à quoi ça ressemble. Rendons-le un peu plus petit, peut-être 32. Ça va être notre total, pour qu'on puisse aller de l'avant et goûter ça. Faites tomber ça et faisons que ça ne soit pas aussi grand. Faisons ça 30. On pourrait essayer la ligne juste pour avoir un contraste avec leurs couleurs. Zoom avant. Ça va être total. Donc on va devoir comprendre qu'on a juste une estimation pour l'instant. Donc, disons juste qu'ils ont dépensé autour de C 405 106 7 Desserrer environ 1400$ ou environ. Prenons juste une petite devinette ici. On pourrait trouver le montant réel, et je vais aller de l'avant et copier l'option plus petit texte tiré vers le bas. Maintenant, nous allons dire qu'ils ont dépensé 14 50 à rester sur leur budget total était de 2200 mois. On va avoir besoin de rendre ça plus grand et plus audacieux. Alors faisons ça un poids moyen. Faisons 12 points et rendons le blanc. Ok, donc il y a notre première page de budget pour lui pour Bob. Et ce qu'on va faire c'est qu'on va faire notre première petite animation. On va rendre ces nombreux systèmes utilisables. Donc, Bob clique dessus, il se connecte. C'est son écran d'accueil. Et maintenant, il veut avoir d'autres options après avoir vu son budget. Nous allons aussi lier des boutons de transaction détaillés. Tu allais au moins en faire deux ? Et cela va cliquer sur un écran différent qui aura les transactions détaillées pour la nourriture . Et aussi, on va en avoir un de plus où on pourra changer le budget. Peut-être que c'est un curseur qui apparaît ou quelque chose comme ça, mais nous allons comprendre ce parcours de l'utilisateur alors que nous continuons à concevoir ce 15. Conception de menu Popout: Oh, donc maintenant on va faire notre petit hamburger animé, beaucoup qui vont sortir juste au cas où Bob veut faire autre chose que de cliquer sur ces boutons. Il veut revenir au système de menu, donc on va créer le besoin de créer un autre cadre pour pouvoir le faire. Il y a donc un moyen facile de le faire et de s'asseoir à devoir en créer un nouveau et copier et coller comme je l'ai fait. Vous pouvez faire un clic droit et copier puis basé Boom, juste comme ça. Et nous devons penser à notre parcours utilisateur. Donc, c'est lui qui passe à travers son parcours utilisateur. Donc on va pouvoir faire ce menu hamburger de ce côté. Donc voici une sorte de truc pour ça, et j'ai peut-être besoin d'un peu plus de place, donc je vais peut-être devoir faire glisser ça vers le sud pour le système de menu. Je vais aller de l'avant et tenir tout ça ensemble. Je vais faire un clic droit et le regrouper. Voici donc l'astuce pour animer automatiquement. Je vais d'abord faire mon petit système de menu pop out et allons de l'avant et faire que sa couleur de rupture nous pourrions le rendre un peu transparent, mais gardons juste une couleur unie pour le moment. Je vais juste trouver un genre générique ici. Il va tenir l'option et l'amener sur le dessus. Ce sera Lien un lien vers Lien trois et nous allons juste avoir trois liens simples. Eh bien, faisons un lien pour pourquoi ne pas remplir un peu ce menu ? Et mettons un peu plus de laisser ou d'espacement entre les personnages, ce qui est juste ici, Ce sera assez d'espacement. Donc, comme un lien vers le lien 3, nous n'avons pas besoin d'avoir le menu hamburger aller jusqu'au bout. On pourrait le faire descendre ici, faire un coup de poing, et peut-être aussi faire tomber notre icône avec nous pour qu'ils puissent la fermer. Ok, donc il y a un petit menu. Donc ce qu'on va faire maintenant c'est que nous allons regrouper tous ces éléments dans le menu, rassembler un groupe et glisser ici et tout ici. On va regrouper tous les écrans d'origine. On va en faire un groupe et on va le glisser hors du tableau d'art et le glisser sur le dessus, juste là où on veut qu'il se superpose. Donc, cela va donner l'apparence que cela sort et l'animation et déplacer cet écran sur, Allons-y et le faire animer. On va monter jusqu'au sommet. C' est ce qui va déclencher la diapositive vers la gauche, et on va cliquer dessus jusqu'ici, et on va faire une transition. Et nous voulons que le contenu glisse vers la gauche. Donc, nous voulons que cela passe à cela, donc cela apparaîtra à gauche. Alors faisons une poussée à gauche. Il nous reste une poussée et nous allons faire un facile d'entrée et de sortie, ce qui va être une belle transition. Et faisons-le très vite. Donc nous allons juste faire 0,1 seconde et nous voulons que ce lien de pointe revienne et que nous puissions réduire le menu que nous venons de faire sortir. Donc on va ramener ça ici, et ils allaient faire la même chose, mais au lieu de pousser à gauche ou quoi ? L' élément pour pousser ce menu vers la droite pour qu'au lieu de gauche on le fasse, non ? Donc il faut soutenir les connexions ici, ce qui va être une diapositive à gauche ici, qui va être une diapositive. Droit. Alors maintenant je vais cliquer ici. Donc bon de voir mon aperçu de ce tableau d'art particulier au lieu d'avoir à revenir aux débuts et cliquer ici, être en mesure de prévisualiser à partir de cette page. Alors voyons à quoi ça ressemble. On va cliquer sur qui glisse bien avec un clic en arrière et qui glisse en arrière. Donc tu as une diapositive, non ? Faites glisser vers la gauche. Donc ça a l'air plutôt sympa. Et puis nous pourrions même prendre cette page ce cadre ici, et nous serons en mesure de relier ces deux pages différentes tout au long de notre conception. Mais nous voulions juste montrer au client comment l'application ressemblerait en termes de système de menu, et nous pourrions rendre cela un peu joli. Nous le ferons ensuite, et nous pourrons continuer avec la conception de notre application. Et je suis allé de l'avant et j'ai téléchargé quelques icônes et je l'ai personnalisé un peu à notre marque et à notre palette de couleurs. Je ne vais pas aller de l'avant et utiliser ces petites icônes de squats. Ces grands scores de crédit de planificateur de budget seront cette icône plus tard aussi. Un peu moins. Envoyer l'icône de message et changer d'utilisateur. J' aimerais avoir quelques petites flèches croisées, mais je peux toujours les remplacer à un autre moment. Je vais juste les rendre un peu plus petits. Maintenant que je les vois. Je ne pense pas avoir besoin de lui aussi grand. Juste avoir une petite icône pour aider l'utilisateur à décomposer cette information et à savoir ce qu'elle est. Alors, nous allons avoir quelques lignes de division. Donc je vais juste faire un petit tour ici. Je vais juste faire des lignes de division une fois que je l'aurai. Comme je l'aime. Je peux toujours maintenir l'option enfoncée et traîné vers le bas une autre option maintenez les espoirs. Et une autre chose, c'est que nous pourrions créer les sommets et le message. Et qu'est-ce qui pourrait réellement faire une grille de répétition sur cela aussi ? Donc, si nous voulions créer une boîte et puis simplement répéter la grille tout le chemin vers le bas et je veux ajouter un peu de contraste, donc je suis juste en train de changer certains de ces vieux Taub être le premier mot pourrait être audacieux. Donc maintenant, nous avons un peu plus d'un système de menu poli. Allons-y et sauvegardons et voyons comment cela fonctionne Lorsque nous jouons, il devrait toujours rester le même, et j'ai également ajouté une ombre portée à cette boîte pour qu'elle ressemble à un chevauchement. Donc vous avez cette barre grise supérieure et vous remarquez juste ici. Cette belle ombre portée aide à apporter une définition au menu déroulant. Revenons ici et voyons à quoi ça ressemble. C' est un jeu de presse, et on va le faire sortir et ensuite le faire sortir magnifique. Donc maintenant, nous avons juste besoin de créer toutes ces pages, et Lincoln ne fera probablement pas tout ça dans cette classe. Mais nous pourrions au moins relier l'un de ces et l'un de chacun peut-être l'un des détails dans transactions et l'un des budgets restants juste en quelque sorte de faire quelques-uns de ceux pour voir comment ce processus fonctionne et comment il pourrait vraiment en faire un un prototype 16. Menu de transaction: Maintenant, nous avons notre menu déroulant. Allons de l'avant et faisons quelques-unes de ces autres pages qui peuvent commencer à les relier. Donc nous avons ce genre de connexion. Mais qu'en est-il des transactions détaillées ? Que se passe-t-il lorsque Bob ou l'utilisateur clique sur des transactions détaillées ? Eh bien, ce que je voudrais que l'application fasse, c'est quand vous cliquez sur qui montre toutes les transactions récentes pour la nourriture. Donc, disons que nous faisons le 1er 1 Et mais ça dit aussi qui a dépensé quoi. Sarah l'a dépensé ? Bob l'a dépensé ? Alors que quiconque vous partagez ce hap, vous serez en mesure de voir qui utilise le budget et comment ? Ce que j'aimerais faire, c'est envoyer ça à toute une page. Je me demande si je ne peux pas faire une petite liste déroulante animée pour montrer Um, donc vous n'avez pas à quitter cette page d'accueil. Vous pouvez faire quelques choses et voir certaines choses sans avoir à passer à une autre page. Donc on va faire quelque chose de semblable à ce qu'on a fait avec ça et faire une petite boîte de pop out animée . Donc on va prendre ça et reproduire. Donc je clique sur le tableau d'art et je vais le copier et le coller sur la droite pour qu'on garde tout intact, mais on va faire une petite boîte déroulante qui montre toutes les transactions que est arrivé avec de la nourriture et peut-être un petit indicateur de flèche où ils peuvent le charger à une nouvelle page s'ils veulent voir l'ensemble de l'histoire. Maintenant, ils ont une petite boîte de tirage. Je veux m'assurer que cette nourriture est au-dessus de cette pauvre boîte. Je suis donc allé de l'avant, créé un groupe à partir de cela, et je peux aller de l'avant et faire le commandement dans l'orteil droit du support. Envoyez-le à travers le système de superposition, mettant sur le dessus, ou vous pouvez descendre ici à vos calques et vous serez en mesure de voir tous vos calques avec ce groupe d'objets particuliers que vous verrez, puis vous pouvez le glisser tout en haut . C' est donc la couche la plus haute que je pouvais faire mon petit raccourci, et je pouvais le voir monter à travers le système de superposition jusqu'au sommet. Oui, ça va s'effondrer. Ok, donc maintenant on doit trouver la couleur qu'on veut faire. Allons parler de notre panneau d'actifs et jouer autour. On pourrait le faire. Ah, menu déroulant sombre et ont des couleurs plus claires. Ou on peut en faire un échantillon. Je n'ai pas de gris clair dans mes actifs. Cliquez sur cette couleur ici. Je vais ajouter ce grade léger à mon cul. Oh, ça a ajouté tout un tas d'entre eux. J' en veux vraiment un. Laisse-moi prendre une boîte quand on le fera. Phil, laisse-moi prendre cette couleur. Sortez la frontière maintenant. J' ai eu cet échantillon et clic droit et faire ajouter de la couleur aux actifs. Maintenant, j'ai une sorte de couleur gris clair pour que nous puissions faire cette couleur sortir, ce qui pourrait sembler la meilleure. Faisons une belle bordure maigre 0,5 à nouveau. Maintenant, faisons un peu d'ombre portée. Je pense que nous allons avoir besoin de cette ombre portée pour vraiment sortir sur les options restantes. Ce sera donc vos informations détaillées. Échantillonnons. Allons-y et je suis le groupe. Je vais juste goûter à cette nourriture. Maintenez l'option enfoncée Nous allons avoir un groupe encore une fois. Bien joué. Option glisse. Ce sera notre premier aliment et nous allons faire la grille de répétition pour ne pas avoir à continuer à faire encore et encore et encore sur le crabe une ligne ici faire une sorte de boîte pour notre première transaction. Maintenant tu fais ça un beau gris clair. Donc, ce sera la transaction un. Disons que c'était le lion de la nourriture. C' est une épicerie où j'habite. Et disons que ça ne pourrait pas s'effondrer. Prenez cette option ici et nous allons effondrer cela afin qu'il ne nous gêne pas. Fais ce gris foncé. Et disons qu'ils ont dépensé 55 27 juste quelques nombres aléatoires. Rallons-le plus petit. Il y a donc un contraste entre ce principal et celui-ci, alors rendons le plus petit. Mais Boulder. Alors faisons 18. Mais attendons un rocher tout le chemin à travers, rendons le même. Il y a une ligne de nourriture, mais nous devons aussi avoir une indication de qui c'est qui a dépensé cet article pour faire défiler ici. Et ce sera Bob qui l'a fait. Donc Bob Smith a fait cette transaction. Mais rendons ça plus petit et plus audacieux. Faites notre attente la plus audacieuse. Nous avons et le rendons encore plus petit, peut-être 12. Faisons une couleur qui va vraiment sortir. Ça va faire de cette couleur. Donc maintenant ça va indiquer que Bob est celui qui a dépensé ça et faisons quelques ou plus et ensuite on va faire leur grille de répétition. Alors voyons. Je me demande si ça aurait l'air bien. gras. C' est juste trop. Trop fort. Ok, donc on va aller de l'avant et cliquer sur tous ces éléments. On va les regrouper ensemble, et on va tricher un peu et faire notre grille de répétition. On va traîner vers le bas, plus , plus, plus, plus. Faisons, on pourrait faire cinq transactions. Et nous allons réduire l'espacement entre lui jusqu'à ce qu'il soit juste ici. Et puis on voudra avoir un peu plus d'options. On va faire ça, et je vais faire une petite boîte ici à la fin, et je ne sais pas encore quelle couleur, mais j'ai besoin que ce soit un contraste élevé. Donc peut-être que le noir et ça va avoir une simple flèche dessus, donc je vais aller de l'avant et faire tomber ça. Obtenez mon outil stylo, juste une petite flèche afin qu'ils puissent cliquer plus pour obtenir tout l'historique des transactions. Fais cette couleur de citron vert. Faisons la chaux de bordure, pas pour la rendre arrondie. Capuchons arrondis Rendons-le plus épais. Pas tout à fait si épais, peut-être trois et peut-être deux. Voilà votre petite indication que vous pourriez obtenir ce Go centré aligné. C' est une petite indication qu'ils pourraient faire plus ou vous pouvez également jouer avec la couleur. Nous pourrions avoir un peu de fumée ou voir toutes les transactions afin que nous puissions avoir un visuel aussi bien qu'un mot. Ça va faire tomber ça. Regardons ça dans le système de superposition. Je tiens juste maintenant le commandement et le crochet droit. Je peux aller à des couches et faire ça pour le rendre plus petit. Ce sont tous ces petits détails que nous devons comprendre. Donc voir tous les détails, et peut-être que cette flèche, au lieu de descendre est à droite. Regardons ça à droite et rendons le plus petit. Faisons en sorte qu'un tallix vous n'ayez pas d'italique. Alors faisons, hum, vivons métalliques et faisons-en un 10. C' est bon pour l'instant, donc ils peuvent voir tous les détails, donc ça lui donne juste une idée. Donc ceux qui sont Bob Smith et c'est peut-être ça. Disons, celui-ci est Sarah Smith, et faisons-lui une couleur différente. Je pourrais avoir besoin d'orteils contrairement à ceux-ci. Donc maintenant que je suis heureux avec cela, laissez-moi sur le groupe de la grille et maintenant je pourrais éditer chaque individu. Faisons cela avec sélectionnez ces deux et faisons une ombre. On y va. Cela fait paraître un peu plus de trois D et en couches. Je ne suis pas sûr à 100% du rouge. Cela aide vraiment visuellement à le faire se démarquer. Je me demande juste si c'est un peu trop différent du schéma de couleurs que nous avons, donc nous pouvons toujours changer ces couleurs assez facilement. Je pense que j'ai besoin de mettre ça en colère pour y accéder pour que tu puisses changer ça en chaux, que tu ne vois pas très bien. Je pourrais le changer en vert, et vous pourriez le dire aux différents utilisateurs. Faisons ça. Je pense que le rouge était un peu trop. Eh bien, trop bouleversant. Mais c'est pour ça que nous testons les choses pour voir si elles fonctionnent. Alors maintenant, faisons ce cool et animé. Donc on va passer en mode prototype. Donc maintenant que nous sommes en mouvement prototype, c'est aller de l'avant et isoler ce bouton parce que ce sera le bouton sur lequel nous allons cliquer pour pouvoir charger cette peur particulière. Alors quoi ? C' est son groupe ensemble, donc on va juste avoir besoin d'un clic droit et d'un groupe pour avoir accès à Justice Button. Alors c'est le bouton. Nous voulons que l'utilisateur appuie sur pour être en mesure de passer sur le côté, pour être d'aller plus et cliquer ici. Et nous allons voir si nous ne pouvons pas faire une animation automatique et ça va être en clic pour que le robinet soit très facile, facile à sortir. Essayons ça et voyons à quoi ça ressemble. Allons cliquer sur nos ne sont pas ennuyés ici afin que nous puissions commencer notre aperçu là-bas. Parfait. On dirait qu'il glisse, n'est-ce pas ? Et maintenant, tout ce que nous avons à faire est de cliquer sur ce bouton en arrière. Alors maintenant, je suis coincé. Je ne peux bouger nulle part. Donc, ce que nous voulons faire, c'est être capable d'isoler ce bouton et de le relier directement à ici . Alors voyons à quoi ça ressemble. Allons-y et cliquez ici et jouons. Alors maintenant, on va cliquer dessus. J' ai mon menu déroulant et je veux cliquer en arrière et je suis bon, Bon à y aller. Donc finalement, nous allons devoir cliquer sur tous les détails, mais probablement pas dans cette classe particulière. Mais vous continueriez à faire la même chose, créer un autre, s'ennuyer et être en mesure de l'envoyer sur son chemin vers cet écran particulier. Laissez-moi juste en revue, revenez à ce que j'ai fait. Je suis allé de l'avant et j'ai fait une animation automatique sur celui-là, et ils n'ont pas facilité d'entrée et de sortie et sur un clic, puis j'ai juste fait la même chose en retour. Alors maintenant, nous allons sauver et voir ce que nous avons jusqu'à présent pour son voyage utilisateur et voir si tout est lié comment nous l'aimons. Alors allons voir ce que nous avons ici, et jusqu'à présent nous avons sifflé voyage. Il commence ici. Il sélectionne son profil. Il va dans son écran d'accueil principal. Vous pouvez cliquer sur les transactions détaillées et il obtient un menu déroulant. Ou il peut aller et sélectionner ce menu haut et obtenir une boîte de tirage, et les prochaines étapes seront de trouver où ils vont nous ne ferons pas. Tous vont juste en faire un. Et puis aussi ce qui se passe quand il clique ici ou tout autre bouton restant qui doivent être sélectionnés et, bien sûr, va probablement remplir le sien, qui pourrait être une copie de Hiss. Mais peut-être qu'elle prend une direction différente et fait quelque chose de différent ici avec ces boutons, et elle a un parcours d'utilisateur différent. Ensuite, il fait juste pour montrer le client à une grande variété de pistes d'utilisateurs différents. 17. Ajuster et relier notre conception: alors obtenez un clic sur le jeu et voyons ce qui se passe. Alors, nous allons cliquer sur celui de Bob. Alors, faites un clic quand on doit y aller. Et disons que nous voulons faire le menu, voir ce qui est Check it out. Ok, c'est de retour rapide et allons découvrir quelles sont les transactions détaillées. Ok, excellent et encore cuisiner. C' est ce que nous avons fait jusqu'à présent et quelques choses que nous pourrions faire. Donc, nous voulons changer. Utilisateurs, peut-être que cela peut être allumé pour que nous puissions revenir à la page d'accueil. Nous pourrions peut-être rendre ce logo cliquable en arrière afin que nous n'ayons pas à aller ici et aller changer d'utilisateur pour revenir à cette page d'accueil. Nous pourrions même avoir l'image de profil Hiss cliquable à l'écran de connexion d'accueil, ou cela pourrait aller dans les paramètres. Donc c'est tout ce qu'on va devoir comprendre à quoi ressemble ce flux d'utilisateurs. Donc, disons que nous voulons que Teoh ait changé d'utilisateurs. Allons de l'avant et sur le Groupe. Je pense que tout cela est toujours regroupé, alors disons que nous voulons avoir ce bouton d'utilisateurs de commutation sympathique. J' ai donc dû les séparer de ce grand groupe et les avoir seul. Et je veux aller de l'avant, que cela soit lié jusqu'à l'écran de sélection, et nous voulons juste faire une transition. On voulait juste être un simple retour en arrière. On pourrait le faire glisser vers le bas ou vers le haut. Faisons un push up et voyons comment ça marche. Allons de l'avant et prévisualisons. Ok, ils sont sur Bob. Allons à sa page. Allons aux transactions détaillées. C' est génial. Allons au menu. Allons changer d'utilisateur et nous revenons à cet écran et ensuite nous pourrions aller à son voyage. Donc, avant de continuer, je veux m'assurer que tout est exactement comme je l'aime. Parce que si on commence une fois qu'on commence à faire plus de tableaux d'art, on copierait, collerait et répliquerait tout ça. Nous voulons vraiment nous assurer que c'est bon maintenant, donc nous n'avons pas à revenir en arrière et à changer. Beaucoup sont vers plus tard. Donc je vais passer les 10 prochaines minutes à peaufiner mes sélections. J' ai déjà fait quelques changements ici. Oncle ne vous avait pas montré où ma liste déroulante et voulait avoir la capacité de montrer des augmentations budget cause un autre partenaire ou mari ou femme ou quiconque est fait équipe sur cette application avec vous qui partage également votre budget. Ils pourraient augmenter le budget pour une catégorie particulière. Donc, je voulais vraiment souligner que comme quelque chose qui a été séparé de toutes ces autres transactions est quelque chose de spécial. Donc, j'ai fait une sorte de contraste plus élevé, fond différent du blanc et sorte d'utilisé une petite flèche. Nous avons fait quelques leçons en arrière et nous avons voulu faire un profil choisi à une sorte de personnalité. Teoh à ça pour qu'ils puissent non. Ok, c'est la personne qui a augmenté le budget et a aussi baissé, ajouté un peu plus. Ombre portée ici pour que vous puissiez le voir plus haut un peu mieux. Et j'ai pu faire un aperçu. Alors quoi, ici pour partager ? Et je suis allé publier un prototype que j'ai pu tester sur mon téléphone, et j'ai réalisé que j'avais besoin de faire des choses un peu plus grandes et de la musique peaufiner quelques colorants. Aussi à ce petit lien est trop petit. Donc, ce que je devais faire est de lier toute cette section blanche ah aux transactions détaillées pour obtenir ce menu déroulant au lieu de ce petit peu. Mais c'était vraiment dur de le presser avec mon doigt. Donc cisaillement aller sur le partage, partager le prototype d'envoi lié à vous-même, Ouvrez-le dans votre téléphone. Comment ça marche ? Comment ça se sent ? Avez-vous besoin de faire des boutons plus grands ? Donc, vous devez revenir en arrière et faire quelques tests en venant ici et en faisant cela, partageant des options et en obtenant ce lien ou même en les exportant simplement en tant que cheville J ici. Et puis vous pourriez juste charger ces photos sur votre téléphone et une sorte de jauge. La taille des boutons est trop grande ou trop petite. J' ai donc pu revenir en arrière et lier cette section entière au lieu de ce petit bouton aux transactions détaillées. Donc maintenant je me sens comme ce genre de symbole d'argent audacieux et le type de lumière de type OC réutilisé pour les chiffres était trop contraste, et il semble un peu encombrant, donc je voulais rationaliser. Donc je le change en quelque sorte pour un Helvetica nouveau 22 à un poids moyen à la place. Et je l'ai rendu un peu plus petit pour avoir de la place pour tenir en plus grand nombre. Je veux donc pouvoir changer toutes ces choses, et c'est un peu accablant. J' ai déjà trois séries de ça. Voyons donc comment nous pouvons changer un peu plus rapidement en utilisant notre panneau d'actifs. Donc j'ai ça exactement comme ça. Donc je vais aller de l'avant et faire un clic droit, et je vais ajouter ce style de personnage. Ok, donc j'ai ajouté le style de personnage. Alors ça va être Appelons cet argent sur la liste. Fond sombre, tout ce que vous voulez. Un titre, ça. Et je vais pouvoir sélectionner tout ça, et je pense que je le suis. Regroupez-le de mon, euh, grand groupe ici de la Rose. Je vais revenir en arrière et cliquer dessus, et c' est comme par magie changer pour que je puisse aller de l'avant et changer tout assez rapidement. Je vais aller de l'avant, changer tout ça et les changer ici et il était prêt à aller de l'avant . J' ai fait un autre changement car je viens d'ajouter une petite boîte, petites boîtes de couleurs différentes pour ajouter un peu de contraste entre les différentes lignes afin qu'elles ne ressemblent pas à une grande, longue liste qu'elles voient plus comme des boîtes. Et les gens peuvent mieux décomposer ces quatre options et semble un peu mieux de cette façon. Donc maintenant que j'ai l'impression que je trouve aussi et tout, je vais finir par faire ça vite, et ensuite on pourra passer à la prochaine diapositive, qui sera ce petit bouton juste ici. Nous voulons rendre ça actif, faire cette diapositive et en faire une de plus, et ensuite nous allons l'envelopper afin de pouvoir tout sélectionner et passer à ce style global ici. Disons que je veux l'éditer. J' ai fait trois Rose différentes m'a pris environ quelques minutes, donc ça ne m'a pas pris beaucoup parce que je viens juste de sélectionner. Tout est passé à mes styles de personnages, mais disons que je veux le changer à nouveau. Tout est passé à mes styles de personnages, Vous devez le sélectionner tous pour le changer à nouveau. Non, tout ce que vous avez à faire est de passer à vos styles de personnages vont à droite. Cliquez sur celui et je vais l'éditer. C' est celui que nous utilisons pour tous ces chiffres. Disons que je veux l'éclaircir, sont sombres en elle. Je pourrais le faire. On va chercher l'outil pipette et goûter une couleur différente où je peux peut-être obtenir le vert . C' est ce qui est si merveilleux. Une fois que vous liez tout cela à Stiles est, vous n'avez pas à vous asseoir là et le sélectionner à nouveau. Ils sont déjà là pour toi. Alors laissez-moi faire un clic droit et éditer cela à nouveau et nous pouvons obtenir le bon numéro ou la bonne teinte. Je pense qu'on l'avait à peu près sur la bonne nuance. Je voulais obtenir ça en direct, alors laissez-moi juste prendre ce petit personnage et sélectionner la ligne. Mais nous pouvons également changer la largeur et la hauteur et la taille. Disons que je veux le rendre un peu plus petit. Cela pourrait le rendre tout juste un peu plus petit, ce qui pourrait fonctionner le mieux pour nous assurer que nous avons de la place pour des nombres plus longs, et aussi je pourrais revenir en arrière et faire un clic droit à nouveau. On verra si je peux le trouver ici. Je pense qu'il a décalé parce que je l'ai édité. Donc maintenant, au lieu de moyen et peut-être essayer la lumière et nous pourrions faire de l'or pourrait le voir passer à travers toute la page médium. J' aime bien BD um et je me demande si je pourrais changer l'écart. On dirait que je peux. Donc, je veux changer l'espacement entre les nombres. ce moment, il y a 66 points. Laisse-moi changer ça. Coupez ça en deux. Cela va resserrer un peu plus l'espacement une fois de plus nous laissant plus de place pour avoir de longs nombres. Quelqu' un, je suppose que certaines personnes ont de gros budgets. On a besoin d'orteils Pensez toujours à ça. J' ai déplacé cela hors du chemin afin que je puisse mettre à jour et sélectionner les numéros. Et j'ai ce groupe fait un gros groupe et je vais juste le faire glisser et trouver la bonne position parce que nous n'avons pas encore dupliqué cette diapositive. Donc, nous pourrions toujours l'éditer une fois que nous commençons à dupliquer. devais commencer le médaillon sur notre regard un peu. C' est donc le bon moment pour faire une pause. Obtenir l'approbation de quelqu'un. Sénat a adopté les gens pour s'assurer que tout est parfait parce qu'à mesure que nous allons de plus en plus loin dans ce domaine, il sera plus difficile de changer les petites choses, même avec des styles globaux. Comme le positionnement de ça, il n'y a pas de style global pour le positionnement. Comme le positionnement de ça, Donc si nous avons ceci répliqué plusieurs fois, une autre diapositive, nous allons devoir principalement le changer. Nous ne pouvons pas vraiment faire une position, personnage, style ou un atout, alors prenons la bonne position. On peut avoir une goutte jusqu'ici. On pourrait le faire tomber au milieu. On peut piéger tout le chemin vers la droite, donc je suis comme où je l'avais avant. Je pense que cela a bien fonctionné lorsque nous nous assurons également que cela est en retard dans le système de superposition. Je peux aller au système de superposition ici, et je pourrais déplacer ce groupe parce qu'en ce moment c'est tout en haut, donc je pourrais le traîner vers le bas pour qu'il soit en dessous de la nourriture. Un. Continuons simplement à faire glisser ou j'aime juste faire mon petit commandement et le support. Mais quand vous avez beaucoup de couches, parfois être capable de voir visuellement toutes vos couches, um fonctionne mieux pour être capable de faire glisser ces rondes Donc maintenant je suis prêt à y aller. Je me sens très content de tout. Faisons nos derniers deux et finissons. 18. Tester votre conception sur votre téléphone sur votre téléphone: J' ai donc mon lien, le ton L. Je l'ai envoyé à moi-même et messager, et j'ai pu l'ouvrir sur mon téléphone pour tester les boutons pour voir s'ils étaient assez gros et juste un peu de tester le prototype. C' est un peu à quoi ça ressemble quand il a chargé votre navigateur sur votre téléphone, et je suis capable d'obtenir tout le sang dans les options. Donc je vais revenir à l'option d'utilisateur de commutation et puis mes nombreux systèmes, nous allons revenir à changer d'utilisateur, et si vous double-cliquez, vous pourrez voir toutes les interactions en direct. Donc, si jamais vous voulez dire à un client un double clic sur un prototype, vous serez en mesure de leur montrer toutes les interactions sur la page de leur vie et de lien plantes 19. Relier tout le tout: a allumé une note prototype, et je voulais le lien tous les liens restants que nous avons disponibles. Donc, je veux être en mesure de lier ce centime bas, revenir à la page d'accueil ou revenir à l'écran des options ou à un autre type d'écran d'options . Donc je ne suis qu'un prototype. Modi allait glisser et ramener ces choses à l'écran de connexion ou n'importe où. Je voudrais faire remarquer que tout est cliquable, donc cela pourrait revenir à celui-là. La même chose avec ici. Tous ces éléments pointent vers la maison juste un point. On ne veut pas que celui-là soit actif. Nous ne voulons pas que quelqu'un clique accidentellement sur celui-ci, mais les gens cliquent intentionnellement sur le logo ci-dessous, donc nous voulons simplement nous assurer qu'ils cliquent. Ça ira quelque part. Ou peut-être pas. Et donc nous assurons tous que nous sélectionnons tout et que tout est lié. Comme on l'aime, ça ressemble à un meilleur, mais si on le décompose un par un, ce n'est pas si écrasant. Donc, nous avons ce lien en arrière. Avons-nous ce lien n'importe où Cela ne semble pas être lié n'importe où, donc c'est notre menu déroulant. Celui-ci est lié. C' est celui que nous relions ici pour le faire glisser. Mais nous avons aussi besoin d'avoir cette autre page comme là-bas aussi. Donc c'est là que nous pourrions. La cartographie est très pratique. Ok, donc on a une poussée vers le haut. Donc il a mémorisé notre dernier live. Mais je pense que pour celui-ci, nous voulons avoir une diapositive. C' est ce qu'on a fait pour celle-là. On pourrait avoir une diapositive, une poussée à gauche. Donc, ce sera aussi une poussée à gauche parce que nous voulons répliquer la même poussée à gauche le menu hamburger coulissant. Alors, poussez à gauche. Donc celui-là est connecté. Maintenant c'est, je pense que nous avons partout de petites connexions et faisons un test de plus. C' est Bob. Sarah, nous n'avons pas encore fait la Syrie, donc nous cliquons ici tous les deux le clic de retour ici. Ça va revenir en arrière. Mais il a fait une sorte de glissement vers le haut, donc je voulais une sorte de transition pour que je puisse revenir en arrière et changer que plus tard, nous allons à Bob, cliquez sur et je peux le faire et cliquer en arrière. Je peux aussi vivre cet écran, mais maintenant celui-ci est connecté. Donc, si je veux retourner au menu, je peux. Donc maintenant, tout est un cycle complet avec ça éteint. Et maintenant on vient de se changer. Utilisateurs connectés. Alors maintenant, quand je fais ce basculement vers l'écran d'accueil et je me suis fait un beau cycle, pourquoi seriez-vous revenir à l'écran d'accueil est de cliquer sur le logo et je suis de retour. Donc nous sommes prêts pour notre prochain tableau d'art. Et cette fois, on va relier l'un d'eux ici, ce qui sera le même message. Nous voulons en quelque sorte aller à cette idée de. Il passe par ici. C' est ce genre de voyage qu'il passe par son utilisateur. Il vient en quelque sorte ici. Il regarde tout ce qu'il veut pour vérifier la nourriture parce qu'il ne le fait pas. Il lui reste beaucoup de choses. Il clique sur les transactions. Il va ici. Il voit que la femme l'a augmenté de 50. Et il se demande pourquoi. Parce qu'il lui reste un gros budget. Donc il veut un genre de messager des orteils. Donc il apparaît ici au menu et il veut envoyer un message pour communiquer à propos de cette augmentation budgétaire particulière afin que nous ne puissions pas créer un nouvel écran ou un nouveau tableau d'art. Donc on va en dupliquer un, il suffit de le dupliquer. On va le copier, où aller ici et le coller. Et il a remarqué qu'il copie aussi les liens prototypes afin que nous n'ayons pas à aimer tous ces à nouveau, au lieu de faire l'option et de faire glisser. Il ne dit pas qu'il copie simplement les graphiques, mais il ne copie pas les prototypes. Donc, ces prototypes d'air sauvé maintenant que j'ai pu cliquer sur la copie du tableau d'art, puis le coller. Donc on va positionner ça et une partie de la mise en page de l'histoire. Donc on va faire ce genre de dans un ordre. Il va donc cliquer ici sur sa page d'accueil principale. Il va d'abord cliquer sur les transactions détaillées, puis il va changer. On va traîner ça sur une partie de son voyage. Où partager le client. Mettez un peu d'espacement entre ici. Ok, alors il va cliquer ici pour envoyer un message, et il y a un bon clic sur le message, et ça va charger cet écran. Donc maintenant, nous devons éditer ceci pour être un bel écran de message. C' est 20. Écran de message: façon. Plongez trop dans le panneau. Nous devons réfléchir à ce que cette page de message va impliquer. Quel est le but de ce système de messagerie ? Eh bien, c'est une application privée qui est partagée une application de budgétisation privée qui est partagée entre des types spécifiques d'utilisateurs. Je pourrais donc me parler de certaines choses budgétaires. Et nous voulons nous assurer que c'est privé et dans l'application, cela ne se contente pas de lier à l'extérieur du téléphone et d'aller à l'application de messagerie. Ça va être son propre système de messagerie de communication unique. Et tous les messages de tous les messages seront supprimés après 24 heures à des fins de sécurité afin que ces moyens d'air vraiment super pour envoyer un message à votre partenaire sur les finances. Et vous n'avez pas à vous inquiéter si vous êtes le téléphone est pris. Il n'y a pas de choses qui soient sensibles. Ce sera une application de messagerie privée. Donc maintenant que nous avons cela à l'esprit, nous retournons dans la fenêtre de conception et commençons, donc je fais glisser ceci vers la droite parce que je ne pense pas que nous ayons besoin de ces détails particuliers . Et donc on va penser à ce qu'on va avoir besoin. Ça ne va pas avoir besoin de ça. Peut-être que j'ai un centime ici au milieu. On ne sera pas cet objet non plus. Mais ce qu'il nous faut, c'est que nous voulons continuer à avoir notre menu haut, avoir un peu de cohérence avec tout ici, ou nous pouvons le faire glisser et avoir plus de place pour la messagerie. Tout dépend de la façon dont nous voulons concevoir cela. Donc, tout le but de cette application est d'être très simple. Alors faisons un design très simple et propre. Allez-y et faites une boîte à message et faisons quelques coins arrondis tout autour. Donc il suffit de cliquer dessus et voyons à quoi il ressemble avec un peu d'ombre. Faisons une autre ombre, donc je vais ajouter un 5 et 5. Donc, l'axe x et y va être plus loin, donne une sensation de distance et une sorte de flou sur cette ombre un peu ayant à 16 ans. Faisons en 11. Avons-nous besoin d'une frontière ? Je ne suis pas sûr que j'allais cliquer hors de la frontière. Essayez de rendre ça propre, et ce que nous pourrions faire c'est une fois que nous aurons fini avec cette bulle, nous pourrons aller de l'avant et copier dans la prochaine bulle. On va avoir une , conversation à bulles,une de lui et une d'elle. Donc ce sera celui qui était auparavant d'elle. Et nous en aurons une où il répondra ici avec la réponse de notre petite histoire , où elle a augmenté le budget. Il demande, pourquoi avez-vous augmenté le budget ? Ce qu'on pourrait faire, c'est peut-être qu'on n'en a plus besoin. Tu sais pourquoi ? Parce qu'on va avoir la bulle. On pourrait avoir une sorte d'image de profil dans les bulles. Donc, ce que nous pourrions faire, c'est que cela pourrait glisser vers le haut et cela nous donnera plus de place pour les messages. Donc je nous ai aidés à avoir une animation de glissement, et peut-être que ça va au milieu et de garder ça au même endroit exact. Eso Nous aurons plus de place pour la partie messagerie. Donc, ce sera un message quand nous venons de dire les options vers le bas. Voyez si nous avons du ram pour une seconde réponse. On va aussi avoir une bulle où on tape, donc ça aura des coins arrondis. Fais ça une pilule. Nous allons avoir besoin de développer des icônes pour les indications textuelles où ils peuvent taper. Ok, donc ce sera un message, et ce sera l'autre. Allons-y et attrapons sa réponse. Allons de l'avant et faisons le commandement et je fais mon support arrière droit pour les amener à l' avant. Ou il y a beaucoup de couches qui se passent. Allez à notre panneau de couches et faites-le suivre. Nous pouvons bien regrouper tous ces éléments afin que nous puissions les regrouper tous dans un dossier différent afin que chaque tableau d'art ait son propre dossier. Donc nous avons tous ces différents pour qu'il puisse entrer dans le message. Et j'ai intitulé ces Maintenant, Donc, avez le menu et le message. Alors maintenant je sais quel tableau d'art est ce qui, comme un double clic pour y aller et il y a toutes mes couches et celui-là notre planche. Ok, donc maintenant on va comprendre à quel point on veut que les petites images de profil soient grandes ? Enlève l'ombre sur ça. Je ne pense pas qu'on en ait besoin, et on doit l'avoir. Allons-y et attrapons-la. Je vais juste tenir l'option enfoncée et la traîner dessus. Faites-la de la même taille. Nous voulons aussi nous rappeler de séparer les grilles de temps en temps. Donc, décalage de commande, guillemets. Juste une sorte d'obtenir une bonne jauge sur notre petite grille réactive. Ici, mec. Maj entre guillemets. Donc ce qu'on va faire, c'est l'avoir en train de répondre. Donc ce qu'on pourrait faire, c'est l'avoir ici. Ce seront ses réponses. C' est de se préparer. Tapez peut-être un peu plus grand. Maintenez le décalage enfoncé. Donc je pourrais faire une belle, mais je ne tiens pas le quart de travail pour être un peu bizarre. Cela ne se met pas à l'échelle dimensionnelle. Donc, si une prise sur le navire, il va mettre à l'échelle les dimensions parfaitement. Juste un petit tour. Maintenant, on fait juste quelques idées de design. Nous avons une image de profil survolent au-dessus, donnez-lui un aspect superposé. Donc maintenant on a besoin d'une typographie pour revenir aux styles et voir si je ne peux pas trouver quand j'aime , faire du blanc clair. Mais faisons que ce soit gris foncé. Ce sera notre message qu'elle a fait Donc obtenez un type en sorte de faux message et tapez le faux message ici et ensuite nous ferons quelques icônes pour nous aider à indiquer que c'est là qu'il doit taper sa réponse. Ok, donc j'ai dactylographié une conversation générique ici et maintenant. Je n'ai pas pu le mettre en place. Comment ? Je pense que ça devrait regarder, donc je vais juste aller ici et faire comme, un alignement à gauche et me laisser remettre ça en quelque sorte. Il aurait probablement un nom à gagner. a attrapé son nom. Sarah. C' est là-haut. Maintenez la touche Option enfoncée et décrivant son nom, le faisant glisser vers le bas afin que je n'ai pas à le taper. Ce sera Sarah, mais on voudra que ça soit dans le gris foncé. Et une fois que nous obtenons ce type correct, nous voulons sauvegarder cela dans notre style Donc nous pouvons rappeler ce type de texte noir sur fond blanc à nouveau. Alors voyons ça jusqu'à 28. Et quand j'ajoute un peu plus d'espacement entre le type un peu plus laisser comme ils l'appellent. Et donc nous aurions aussi un horodatage. Faisons les horodatages. C' était 12. J' ai 11 2020 et l'horodatage n'a pas vraiment besoin d'être aussi grand Juste assez pour être lu et nous allons le rendre moyen. C' est ce qu'elle a dit à cette date. Nous pouvons ajouter quelques fleurs de design ici pour que nous puissions faire cela un peu d'un bout sombre pour ajouter du contraste. Vous en faites un peu, z man, z man, que la ligne en tant que telle correspond à la courbe ici. Mais je vais descendre et maintenir l'option enfoncée juste pour le faire, puis maintenez l'option enfoncée et juste faire celle-là. Donc maintenant, j'ai juste des courbes sur le dessus qui envoient ça quand je suis dans le système de superposition et je vais maintenant vouloir rendre ce blanc. Nous sommes en fait une sorte de gris clair ou sombre. Et maintenant que nous l'avons sur un fond sombre, nous avons la chance d'ajouter de la couleur, ce qui aide toujours. Maintenant, il pourrait changer la taille d'une photo de profil. On doit se rappeler que les gens vont vouloir voir des messages plus longs sans avoir à faire défiler. Donc c'est là que nous devons sacrifier certains de ces éléments en haut pour nous assurer que message peut être lu et être beaucoup plus long. Donc, si notre message doit être vraiment long, parce que ce peut être des conversations privées, ces conversations privées aériennes qui vont être supprimées après 24 heures pour qu'elles puissent être longues. Allons de l'avant et maintenez le quart de travail enfoncé. Rendons son image plus petite, juste en essayant d'être efficace avec notre espace et en pensant à quand cela va être une application vraiment live et que nous avons besoin d'un texte juste pour plus grand. C' est pourquoi ce texte pourrait être 16 ans et peut-être au lieu d'une petite attente, nous le faisons. Un léger serait lu un peu mieux, et nous avons une chance d'adapter plus de café et plus de type avant que vous deviez super, disent-ils. C' est sa petite zone. Un certain Scott copie la sienne. Le groupe ne sont pas copier, mais le groupe l'a expédié plus haut, et ce sera ce qu'il répondra avec. Donc on le fera au milieu et il aura un médecin à point comme s'il tapait encore . Et allons de l'avant et sauvegardons ce style de personnage. Sauvegarder ce style de personnage sur ce sera notre texte de message, fond blanc tombé. Et donc maintenant, je peux cliquer sur cela et changer cela au même type que ci-dessus. Ok, donc on peut avoir une petite indication d'un type, donc j'ai juste mis, genre, une petite ligne ici, peut-être une boîte. 21. Écran de message Partie 2: une fine ligne vers la droite. Je veux en faire une couleur différente parce que nous voulons être sûrs d'indiquer que ce n'est pas une lettre. Ce n'est pas vraiment maladroit L. C'est l'indication qu'il est encore en train de taper. On veut avoir une icône d'envoi, peut-être une flèche vers le haut, pour indiquer ce qu'il doit appuyer pour envoyer ça. Je suis donc qu'est-ce qui va créer un cercle simple et on va en faire une bordure épaisse. Alors prenons notre frontière et rendons un peu plus épais. Peut-être quatre, peut-être trois. Et on pourrait changer la couleur de la bordure. Nous pourrions faire n'importe lequel de ces affaiblis faire. Peut-être que l'une de ces nuances plus sombres juste là une heure pour dessiner une petite icône flèche Riddle flèche mince avec celui-ci. Tu cuisines en bas et on va faire cette guitare verte. Je laisse tomber l'outil de pipette, goûte le vert et on va faire ces bouchons arrondis ou un rond, et puis le chat arrondi va bien arrondi. Nous pouvons toujours changer une épaisseur après avoir tracé la ligne, Dessinez une ligne simple et déplacez cela. Il fait des guides intelligents, alors laissez-moi les sélectionner tous les deux et faire une ligne centrale. Ça n'aide pas non plus. Parfois, c'est pourquoi j'aime faire beaucoup de mon développement d'icônes et d'adobe illustrator, parce que je me sens comme Adobe XY. C' est génial pour faire des choses très basiques, mais si jamais tu veux faire des symboles complexes, il y a des petites choses qui me dérangent. Je ne peux pas sélectionner l'accrochage à la grille comme vous le pouvez dans Adobe Illustrator. Donc je lui ai fait sauter Adobe Illustrator et obtenir un peu de bouton plus précis. Il y a aussi la capacité de faire cette plus grande cause que nous sommes repris et un peu pour que je puisse aller de l'avant et l'échelle plus grande. Tu les fais aligner comme ça ? Ils auraient, vous savez, un peu plus de contrôle. Maintenant, je peux aussi saisir mon outil de broche et éditer ces petits points. On y va maintenant, Aiken, Aiken, regrouper ça et l'envoyer jusqu'au bout. Je pense que j'ai été tellement zoomé qu'il s'accrochait à la grille et ne me permettait pas, euh, le centrer comme je le voulais. Alors changeons. On va faire une bordure sur ça et on va les faire tous les deux la couleur verte. Nous nous assurons qu'ils sont tous les deux ronds de casquettes autour du coin autour des capuchons, puis les rendons plus épais. Faisons en un trois. Voyons comment cela semble zoomé. C' est à peu près juste. Rends-le un peu plus petit. Regroupez ces types ensemble. Je pourrais faire cet assemblage et l'utiliser ailleurs si j'aime comment c'est. Cam peut également tester différentes couleurs afin que nous puissions tester l'avion ou le bleu. C' est bleu voyage, le bleu semble un peu mieux. Je vais rassembler ces deux groupes ensemble et cliquer droit et en faire un symbole allait apparaître sur mes symboles. Et si jamais je l'utilise ailleurs, si je modifie ou change la couleur, cela changera globalement. À moins que je décide de, contrairement à la propriété, le grouper dans le petit ne sera plus un symbole de lien. Ok, donc maintenant avoir cette mince petite bordure autour de ces deux. Ils correspondent graphiquement, et celui-ci n'a pas d'ombre portée. Laissez-moi ajouter une ombre portée à cette boîte blanche. Laissez-moi m'assurer que l'ombre portée a les mêmes paramètres de 559 Ce n'est pas le cas, Steve. Cinq cinq, vous avez la même ombre portée là-dessus. Je pense que cela doit être un peu modifié. Alors laissez-moi faire, comme un rendre plus serré. Permettez-moi de faire deux et deux, puis deux et un peu d'ombre plus serrée. Donc, la partie unique de ce message pommes. Vous avez la possibilité de supprimer des messages après 24 heures, et nous voulons que cela soit une option lorsque vous envoyez un message. Donc, ce que nous voulons faire, c'est aller de l'avant et déplacer ce message vers le haut. Donc je vais juste le regrouper et lui donner une petite option de bascule pour pouvoir supprimer le message. Après 24 heures, allons-y et rendons ce blanc, et on va le rendre un peu plus vieux pour qu'ils puissent vraiment le lire et en faire cette couleur gris clair. Alors faisons notre petit bouton à bascule ou allumer et éteindre qu'il a descendu. On y va. Donc on va créer un symbole qui ressemble beaucoup à ça pour notre bascule. Faisons en sorte qu'il soit de la bonne taille d'abord. Et nous allons recréer ce bouton à bascule. Bien sûr, faites-le nôtre. Donc je vais prendre le Faisons juste un outil de boîte. On va y ajouter une forme de pilule, d' accord ? Et on va avoir, on va faire le remplissage d'une couleur grise. On va faire un coup plus épais dessus. Alors faisons, genre, trois et faisons-le. On peut le rendre plus clair ou plus sombre. Il va être sur un fond sombre, donc il pourrait être plus sombre. On va faire ça notre propre. On ne veut pas copier quoi que ce soit. Alors faisons un cercle. Faisons nos petits boutons. Maintenez le décalage, faites-le. Un petit bouton qui pourrait glisser. Où faire la même chose. On ne peut même pas avoir l'outil pipette. Goûtez quelques-unes de nos couleurs ici. Je vais rendre ça plus léger pour qu'il soit léger, mais pas toute la façon dont les lumières se sont déplacées comme un noir, et on va le faire peut-être une bordure plus épaisse et plus légère comme ça. Faites un beau déclin. Bon, maintenant on pourrait faire un autre cercle à l'intérieur. Ce sera celui qui aura notre petite couleur à elle. Alors attrapons la frontière. Prenons notre Nous pourrions faire le vert. On pourrait faire le bleu comme le bleu. Non, je n'ai pas fait une ligne plus épaisse. Peut-être pas si épais. Ou peut-être diviser la différence. 2.5. On va faire de ce cercle intérieur le même que le cercle gris. Donc je vais juste faire que ce serait un remplissage. Tu lui as attrapé mon compte-gouttes. Goûtez celui-là. Ce gris. Maintenant, nous devons trouver comment faire sans claquer. Sélectionnez quelques de ces cercles et faisons un alignement central. Ok, donc il y a notre petit unique, mais on peut ajouter un peu d'effet d'ombre ici, comme celui-ci le fait. On pourrait décrire la trace de l'outil de broche, alors faisons-le la ferraille. L' outil de broche ajouterait comme une petite ombre ici, faisant simplement l'outil de broche. Tu sais, l'outil de broche de l'illustrateur, tu seras à la maison. Je faisais une forme de testament changer ceci à un remplissage et ces formes défaire en ce moment n'a pas importance. il sera dissimulé. Ils ne vont pas changer ça à un Phil loin de la frontière. On va en faire la couleur de l'ombre. Donc, nous devons savoir si nous voulons y arriver. Lime faire commande. C' est dans ce sens. On va devoir en faire une attaque alors pour que cette attaque puisse le couvrir. Donc je suis juste une option. Je vais en faire une copie, et je vais enlever le remplissage. Donc maintenant on a juste un accident vasculaire cérébral, et je vais mettre ça sur le dessus. Nous serons en mesure de couvrir une petite forme d'ombre, mais aussi de nous assurer que le bouton apparaît à travers. Tu vois comment on a fait ça ? Donc ça a juste couvert ça. Zoom avant et pensons à la couleur ici. Voulons-nous rendre cela aussi bleu ? Oui. Et faisons aussi ce bleu. Mais on va double-cliquer, Phil et le rendre juste un peu plus sombre pour indiquer l'ombre. Et je pourrais décrire mon outil de broche. Si j'ai besoin de modifier quelque chose, retirez un peu l'ombre, faites-la glisser comme ça. Donc, nous avons créé notre petit bouton. Peut être faire ce coup un peu pour la frontière, un peu plus maigre. On y va. Je suis très content de ça. T' as déjà un petit bouton de glissement ? Est-ce qu'un groupe qui ensemble et l'abattre maintenant qu'il va résider ? Ça aurait l'air vraiment bien sur le blanc. On va faire deux versions. Un qui a l'air bien sur le blanc et un qui a l'air bien sur le noir. Je vais aller de l'avant et tirer ça vers le bas. Donc si je le mets ici, je suis allé de l'avant et j'ai mis notre bouton ici, et nous avons grandi ça ensemble. Ils pourraient cliquer dessus, mais il se sent déconnecté du message réel pour lequel vous auriez besoin de faire ce paramètre . Donc je vais tirer ça un peu vers le bas et avoir l'option ici qui pourrait se déplacer autour de certaines choses, changer la couleur en taille. Nous pourrions même faire ce contraste élevé et faire un fond sombre. On l'avait déjà fait ici. Donc, ne réinventons pas la roue et rabattons ça. Est-ce qu'un élève commande se croise à droite pour le faire avancer ? Maintenant, je pourrais en faire une couleur vert citron et vraiment se démarquer bien en bas option genre d'ajuster mes coins pour correspondre à celui ci-dessous. Allons-y et allumons notre grille ici. Cela peut nous aider à guider une partie de cet alignement. Nous parlons toujours de notre autre citation classée à commande. C' est verrouillé notre message. Notre tableau d'art Tout d'abord, une nouvelle citation de commande obtiendrait une grille de plus de minutes. Aidez-nous à résoudre certains problèmes d'alignement. Ok, parlez tout ça. N' oubliez pas, basculez ça de temps en temps. Ce serait bien si les profils correspondent. Ils étaient tous les deux ici à gauche, ce qui est génial à propos de ça et laissaient place à de longs noms. Donc ce sera intelligent. Faisons ça la même taille. Ils ont tous les deux une petite frontière avec lui. Nous allons à la même bordure, donc une et cette couleur sur le 22. Écran de message Part3 - Animer notre bouton Toggle: à droite. Donc je suis en mode prototype. Je vais lier ça et faire un peu d'animation pour activer et désactiver ça. Donc je vais aller de l'avant, traîner dessus parce qu'il voulait se relier à cet état, et on va faire une animation automatique, et on va le faire sur le robinet. Tout ce qu'il a pu faire, traîner ce qu'on va faire, taper dans cette affaire. Donc on conteste ça sur ton bureau, on va le faire. Il est à l'intérieur et à l'extérieur. Cela va lui donner une belle petite transition en douceur. Et nous avons une durée de 0,2 2ème. Essayons donc. Cliquez sur notre tableau d'art et prévisualisez et cliquez sur un bouton. Magnifique. Mais voyez, maintenant nous avons besoin de cliquer, avoir le bouton clic off. Donc maintenant, nous devons le relier à l'autre état et faire la même chose. Alors maintenant, nous allons de l'avant et prévisualisons, et il devrait être un clic de cycle. Et quand vous cliquez sur. Ok, donc ce qu'on doit faire voir tout en cliquant ici, et ce n'est pas la transition en arrière. Regardons l'endroit où il fait donc je pense que ce que j'ai fait c'est qu'Onley a lié ce petit carré. Donc, on va aller de l'avant et faire glisser ça et une sorte de réinitialiser. Mais on va regrouper ça ensemble pour s'assurer que le bloc entier est réalisable. Alors allons de l'avant et sélectionnons tous nos éléments. On y va. Regroupons ça ensemble. Et maintenant, revenons en mode prototype. Revenons sur cette zone entière. Super. Assurez-vous que cela est lié. Tout ça est lié. Donc, le tout est interactif, alors passons à l'aperçu et cela devrait fonctionner parfaitement. Passons tout le processus, d' accord ? On va envoyer un message, envoyer le message, et ensuite on va cliquer dessus, et ça va et vient. Magnifique. Ce qui serait vraiment nécessaire, c'est si nous ne pouvions pas créer un autre tableau d'art et ce serait cliquable. Et puis un nouveau message glisse. Donc tout son message s'allume. Et donc si nous voulions vraiment continuer avec cela, nous pourrions montrer tous les aspects de cette application. Si nous voulions vraiment passer 20 ou 30 heures ensemble à construire toute cette histoire, mais je pense que nous sommes à un moment où nous pouvons relier d'autres choses. Mais on peut aller de l'avant et y mettre fin. Et je peux toujours faire plus de leçons où nous relions continuons jusqu'à ce que nous soyons tous liés et que nous traversions toutes ces choses différentes, comme le planificateur budgétaire dans le pointage de crédit. Mais très vite, faisons juste son histoire et ça va être un jeu d'enfant parce qu'on pourrait juste copier et coller son histoire pour commencer. Et puis on a juste besoin d'échanger des photos. Allons la prendre ici, accord ? supprimer, l' amener à bord. Nous allons revenir en mode design, et nous avons juste besoin de changer certaines choses que l'écran d'accueil va être exactement pour dire juste, et le processus va être exactement le même. On va copier et coller ça pour garder toutes nos longueurs ensemble ici. On doit juste s'assurer qu'on l'échange contre lui et s'assurer que c'est dans la même position sur chaque diapositive. Nous pourrions le faire en allant dans nos positions et en le plaçant dans la même position. Et aussi Sarah Smith qui doit l'être. Vous allez en mode prototype ? Ça va sauver toutes ces connexions. Toutes ces connexions enregistrées par l'air ne semblent pas être sauvées. Donc on pourrait facilement aimer ça. Reliez ça à travers les transactions ou ça va relier à celle-ci ici. Boum. Donc on va continuer avec son histoire, mais je vais m'arrêter ici. Je pense qu'on a fait beaucoup ensemble. Nous avons pu développer plusieurs icônes, faire de l'animation à quelques diapositives. menus entrent vraiment dans la grille de répétition pour nous économiser beaucoup de temps et de prototypage et ont un lien ceci et avoir un aperçu en direct en allant jusqu'à partager votre prototype et partager cela avec d'autres. Donc nous avons eu beaucoup de plaisir à faire ça avec vous, et maintenant c'est l'heure de votre projet étudiant. 23. Projet apprenant: Il est maintenant temps pour votre projet étudiant, et je veux que vous conceviez une application Web très simple ou mobile avec au moins trois transitions ou liens. Essayez de penser à votre parcours utilisateur et de vous faire découvrir son objectif final ou sa destination. Gardez celui-ci simple et ajoutez-le à mesure que vous vous sentez de plus en plus à l'aise avec X D et les nombreuses options d'animation et de transition que vous avez. Vous pouvez aller plus loin en publiant un lien direct de votre prototype et en le publiant dans la section projet ou dans mon groupe Facebook étudiant. Vous pouvez même poster dans la section communautaire de cette classe pour obtenir les commentaires des autres élèves. N' oubliez pas de rester simple au début. Les meilleures mises en page numériques sont simples et visent à rendre l'expérience pour l'utilisateur aussi facile et sans douleur que possible. N' hésitez pas à me contacter à tout moment, avec des questions que vous pourriez avoir en cours de route et heureux de créer 24. Cours bonus - Créer une barre Lesson: Donc maintenant, nous devons faire un effet de curseur cool. Je dois cliquer sur l'aperçu pour vous montrer ce que je viens de créer. On va passer en revue son histoire, mais au lieu de cliquer sur, vous faites des transactions de queue ? On va y aller pour qu'ils puissent changer leur budget, et on va pouvoir cliquer et avoir un effet de glissement qui peut augmenter leur budget. Nous ferions cela sans cesse et listerions tous les budgets. Ils vont t'apprendre à faire ça. Techniques de glissement simples utilisant l'animation automatique. Donc on va aller de l'avant et copier. J' en avais une copie. Notre écran d'accueil. On va faire un nouveau tableau d'art. Allons-y et traînons-le ici. On va passer en mode design et on n'en a pas besoin pour l'instant. On va aller de l'avant et les éliminer. Il nous reste celui-là. On va créer une petite option de curseur. Donc je vais bouger ça jusqu'ici. Juste en quelque sorte de créer notre petit bar. Nous pourrions encore avoir cette époque qui indiquera un moyen de revenir à l'écran d'accueil. Pouvons-nous avoir nos informations, mais nous allons devoir aller ici et faire sombre et faire aussi sombre. Alors maintenant, on va juste prendre ce bouton et on va le faire traverser . Nous faisons notre petite partie de curseur, et maintenant nous avons déjà créé un petit bouton ici dans une leçon précédente. Vas-y et attrape-le. Il est là. On va aller de l'avant et prendre ça sur un curseur, donc je vais faire un groupe de l'ONU. Tout ce dont j'ai besoin, c'est cette portion. J' ai besoin d'avoir un groupe quelques fois. Tu as raison. Cliquez sur. Regroupez ça ensemble et amenez-le. Et je devrais peut-être le rendre un peu plus petit là où je devrais changer la frontière que vous puissiez la voir un peu mieux. Alors faisons ça. Les changements bordent et rendent un peu plus sombre. Parfait. Aller à regrouper mes éléments ensemble et ajouter un peu d'ombre que ici, Nous y allons. A propos de mon option d'ombre. J' ai un groupe qui les a réunis en une seule unité. Maintenant, je vais faire l'indication de l'endroit où c'est des traîneaux. Nous devons faire une couleur différente pour la barre. Donc je viens d'avoir une option de maintien et de la copier, et je vais la rendre bleue. Donc ce sera la partie qui n'a pas encore glissé. J' ai deux tons qui se passent ici. Rends ça un peu plus épais. On pourrait changer beaucoup de choses un peu plus tard, alors faisons la partie animation. Donc on va copier et coller ça dans une nouvelle planche d'art et on va faire l'animation dans la diapositive, donc ça va être expédié. Je prenais mes clés directionnelles et je glissais là où je pense que ce serait un bon endroit pour que ça se termine. Je veux faire une coupe d'un défilement dramatique, donc je veux le faire assez loin et je vais juste traîner ça vers le bas. Donc, c'est sur la bonne partie. Nous voulons changer le montant parce que c'est ce qui arrive quand nous le glissons vers le haut est le montant changements, donc nous allons aussi changer le montant que nous pourrions faire cela à un autre moment. Vous changez toutes les données est notre budget alimentaire. C' est là que ça va commencer. Et c'est là que ça va finir. Alors, allons entrer dans le prototype et relier ces ups, nous allons se réveiller ou appuyer sur votre bouton va relier à celui-ci. Mais nous allons faire une animation automatique, et nous allons l'avoir comme un drag au lieu d'un tap, donc il vous faut cliquer et glisser ou 13 votre téléphone tapotez et faites glisser. Maintenant, on va le garder sur l'assouplissement. On va manger à l'intérieur et à l'extérieur, d'accord ? Et nous voulions aussi revenir en arrière, et nous voulons le faire glisser vers le bas. Donc ça va se souvenir des mêmes paramètres pour qu'on n'ait pas à faire les réglages. Nous voulons également ce lien vers notre page d'accueil pour que nous puissions le lécher de cette façon. Allons-y et testons ça. Je suis allé de l'avant et j'ai la même chose ici juste un peu plus finalisé avec le type, et je vais cliquer sur celui-ci et cliquer sur jouer. Donc maintenant je vais pouvoir cliquer et tenir, et il a remarqué comment le montant change aussi. Donc, ce joli petit curseur. Donc maintenant un moyen facile de répliquer ça si je veux être en mesure d'avoir tous les budgets ici, donc je vais aller de l'avant et revenir en mode design. Regroupez ce groupe. Si je suis 100% satisfait de cela, je me prépare à le répliquer, donc je ferais mieux d'être assez heureux avec ça. Je vais répéter la grille, et je vais descendre. Mettez tous nos postes budgétaires là-dessus, qui sont, à mon avis, sept c. Nous en avons sept. Donc maintenant je vais juste changer mon avec entre pour que je puisse tous les avoir là-bas. Donc maintenant tout ce qu'ils ont à faire son lien tous ces et changer que les montants. Donc, nous allons juste faire ce gaz et je vais avoir ces liés jusqu'à Donc, ceux-ci seront également DEET pages individuelles orteil comme jusqu'à. Donc, ce que vous faites est de copier et coller celui que nous avons créé ici et de le remplacer par du gaz. Alors maintenant, je les ai côte à côte. J' ai juste fait la grille de répétition et l'ai fait et ensuite copié. Donc maintenant, je peux faire l'état avant ici et puis l'état après, vu que les quantités changent goutte de nourriture et de gaz et les curseurs ont changé et je les ai tous les deux sur son aller Cliquer avoir un à la fois sur l'auto, animer et glisser. Et ils sont tous les deux liés à celui-ci. Et je vais te montrer un peu de Ah, j'ai mal à la tête. Vous devrez peut-être passer à travers si vous voulez animer tous ces éléments séparément. Donc, il va cliquer ici et voir à quoi ça ressemble. On va aller de l'avant et traîner de la nourriture. Et il a remarqué que tous les curseurs glissent vers le haut ou neuf et les montants ont changé. C' est donc ce que nous voulons, mais nous voulons pouvoir faire glisser les utilisateurs séparément. Donc, là où tu vas devoir faire, c'est que tu vas devoir en avoir chacun pour chaque curseur. Donc tu vas devoir faire un aliment qui est lié à la nourriture. Donc celui-ci changerait juste de nourriture. Alors allez-y et montrez un exemple. Donc, c'est comme du gaz à l'endroit où il appartient, et nous aurions juste l'option de la nourriture. Ensuite, nous devons copier et coller ceci et ici, nous changerions le gaz pour que la nourriture revienne à cet état et ce serait du gaz ici. Et puis vous en créez un autre et vous avez tout de retour à l'état d'origine et juste changé l'autre. Donc, c'est un peu un mal de tête si vous voulez changer chacun individuellement, mais cela vaut la peine de pouvoir les voir tous bouger individuellement, mais vous devez en avoir un. Voyons voir là. Sept. Donc, vous devez en avoir sept différents avec chacun avec celui-ci seulement cet état changeant. Je veux juste montrer que tu devais faire ce curseur. Vous n'avez pas à les faire tous indépendants, mais seulement si vous le voulez. Mais au moins vous savez comment faire une sorte de cette animation coulissante sur Vous pouvez avoir d'autres choses glisser autour de nous. Eh bien, alors jouez avec ce futur d'animation automatique. Il est très puissant. Alors maintenant, j'ai chacun d'entre eux. J' en ai un pour la nourriture. C' est notre maison principale. Ensuite, nous avons celui-là est la, euh seule la nourriture a changé sur celle-ci. Seul le gaz a changé. Et sur celui-ci, seule l'assurance automobile a changé. Alors maintenant je vais les relier tous dans le prototype pour vous montrer comment ça marche. Je ne vais pas tous les compléter, sauf de la nourriture. Je vais aller de l'avant et lié à la nourriture, et ça va être auto animer et glisser. Je vais le relier à la maison. Ça va tout sauver. Donc ce gaz va maintenant se relier au gaz sur ce 3ème 1 et ensuite le gaz va relier. Et enfin, assurance a son sur l'état, ce qui est ici, et cela remonte. Et il continuerait avec les quatre autres. Alors maintenant, semaine ici pour jouer, Voyons à quoi ça ressemble. Alors maintenant, ils sont chacun déplaçable individuellement. J' ai juste pris beaucoup de travail. Nous allons nous assurer qu'ils relient à chacun des liens. Je pense qu'on les relie tous à la maison, donc c'est bien. Nous avons donc juste besoin de nous assurer que les montants sont cohérents au fur et à mesure que nous allons et nous pouvons vérifier cela. Mais voilà. C' est comme ça que vous faites un petit curseur