Le cours complet Adobe XD UI/UX – Applications et prototypes de conception

1. Introduction: Bonjour, là. Bienvenue dans le cours complet de l'interface utilisateur Adobe XD. Dans ce cours, nous allons apprendre à concevoir belles interfaces pour mobiles et Web, et comment les transformer en prototypes interactifs que nous pouvons partager avec les membres de notre équipe, avec notre collègues et nos clients quand il était Nemo Tommy et je suis votre instructeur pour ce cours. Au cours des 12 dernières années, récompensé par des dizaines de projets mobiles et Web pour le service seul et d'autres clients, récupération a été présentée sur des sites Web tels que Forbes. La création de produits est ma passion et j' adore partager cela avec vous dans ce cours. Dans ce cours, nous allons travailler sur projets réels pour une entreprise de livraison de nourriture appelée « Healthy bites ». La première sera une application mobile où les utilisateurs pourront utiliser cette application pour commander des aliments à livrer. Et le second sera un site Web pour montrer ce que les bouchées saines peuvent offrir aux clients potentiels. Nous allons faire tout cela dans Adobe XD si vous commencez à faire mal. Ce cours est destiné aux débutants par l' intermédiaire d'experts que nous concevons depuis plusieurs années. Mais maintenant, ils veulent apprendre un nouveau logiciel. Nous allons commencer par installer une mer, passant par toutes les fonctionnalités pour mettre fin aux outils auxquels nous avons accès. Ensuite, nous allons passer directement dans les projets et apprendre comment vous utilisez des éléments tels que les composants, les grilles de répétition et les statistiques pour accélérer notre processus de conception. Nous allons même utiliser ce modèle d'Apple pour créer les conceptions d'applications iPhone. Au fur et à mesure que nous apprenons comment procéder, nous allons également explorer l' marque et apprendre comment créer un logo, comment créer un image de marque et apprendre comment créer un logo, comment créer un jeu de couleurs et un dactylographies habituels pour notre projet. Une fois que nous aurons peaufiné nos designs, nous apprendrons à exporter ces designs depuis XC, à les partager avec peut-être des membres de l'équipe, appeler à vos clients et à apprendre comment créer prototypes interactifs que nous pouvons même tester sur nos propres appareils mobiles, qui sont super cool. Que vous souhaitiez fusionner ce prochain stage de design ou le prochain client de design pour votre entreprise. Et ce cours est exactement pour vous. Si vous êtes prêt à commencer, alors sautez directement et je vous verrai dans ce cours. 2. Qu'est-ce que Adobe XD ?: Nous sommes presque prêts à explorer Adobe XD. Mais avant de le faire, nous voulons passer rapidement en revue ce qu' il y aura Stephen pour avoir une idée de ce que nous allons attendre et des conférences futures. Qu'est-ce qu'Adobe XD ? Adobe ICSI est un logiciel de conception basé sur des applications qui vous permet essentiellement de concevoir applications mobiles et Web dans un environnement facile à utiliser conçu spécifiquement pour la conception d'applications mobiles et Web. Bien sûr, vous pouvez désormais utiliser Adobe XD pour d'autres choses telles que conception de jeux ou simplement la conception graphique générale. Mais son objectif principal est pour les applications mobiles et Web. Et c'est exactement ce sur quoi nous allons également travailler dans ce cours. Adobe XD est livré avec une fonctionnalité de prototypage en temps réel vraiment puissante que nous allons explorer. Une fois que nous aurons conçu notre application, nous allons créer un prototype à partir de celle-ci. Essentiellement, votre prototype vous permet d'avoir une idée de ce que cette application mobile ou Web va ressentir ou ressembler à un utilisateur une fois qu'elle sera terminée. Cela inclut donc la connexion tous les écrans que vous avez conçus afin que nous puissions donner une idée à un client ou à un collègue de ce à quoi produit ou cette application une fois qu' ressemblera ce produit ou cette application une fois qu' il aura été développé, cette fonctionnalité vous fera gagner beaucoup de temps lors de la création d'une application mobile, en particulier pour les développeurs, qui vont réellement mettre cette conception en action. Parce qu'avec un prototype, nous pouvons réellement avoir une idée de ce que nous voulions réellement de l'application avant d'écrire une seule ligne de code. Et ce sera XT qui vous permettra de partager facilement vos créations avec vos clients et collègues. Cela inclut partage de plans de travail spécifiques si vous le souhaitez, ou tout un projet, ou même la possibilité de le partager, votre prototype avec d'autres personnes et de créer plusieurs étages pour eux pour voir en quoi consiste l' application. Ensuite, nous explorerons toutes les fonctionnalités de partage et d' exportation tout au long du cours. Adobe XD est maintenant disponible pour une période d'essai gratuite de sept jours, que vous pouvez vous inscrire et utiliser, puis vous pouvez l'obtenir pour 999 dollars américains par mois. Et ce ne sont que des frais d'abonnement à une seule application pour Adobe XD. Mais si vous souhaitez obtenir davantage d'Adobe, si vous souhaitez installer Photoshop ou Premiere ou d'autres outils, vous pouvez également le faire pour un prix un peu plus élevé. Mais cela peut en valoir la peine si vous explorez d'autres conceptions ou tout autre logiciel provient d'Adobe. Et puis la prochaine conférence, nous examinerons les différents prix ainsi que la façon de l'installer sur votre ordinateur. Je vous y verrai donc. 3. Comment installer Adobe XD: Prêt à commencer par installer Adobe Exceed. La première étape consiste à ouvrir votre navigateur. Nous pouvons vous inscrire à Adobe XD via le site Web d'Adobe. Il vous suffit donc de vous diriger vers la barre oblique XD d' Adobe.com et d'appuyer sur Entrée. Une fois le site Web chargé, vous accéderez à cette page pour Adobe XD, où ils expliquent comment il fonctionne et vous donneront quelques vidéos sur la façon dont vous pouvez réaliser la conception d' applications, la conception de sites Web ou la conception d'applications design de marque et de jeu avec Adobe XD, ce qui est assez cool, vous pouvez regarder ces animations pour voir ce qui va se passer. C'est génial. Et si vous venez ici, vous pouvez aller de l'avant et découvrir certaines des fonctionnalités qu'il possède d'ici. Bien sûr, nous n'aborderons pas trop de détails avec les fonctionnalités du site Web, car nous allons en fait passer en revue toutes ces fonctionnalités tout au long du cours. Revenons donc à la page principale ici. Et après avoir fait défiler ici, vous pouvez voir que c'est le prix que j'ai mentionné lors de la conférence précédente. Si vous voulez simplement utiliser Adobe XD lui-même, il est disponible à 999 dollars américains par mois, ce qui, je pense, ça vaut la peine de considérer qu'un US, vous avez une tonne de fonctionnalités. Et vous pouvez utiliser l'application unique. Vous n'avez pas besoin de vous abonner à toutes les applications, Adobe Creative Cloud. Mais si vous souhaitez utiliser toutes les applications et Creative Cloud, y compris Photoshop, Illustrator, etc. Vous pouvez aller de l'avant et vous abonner à cette option ici, qui commence à 5299 par mois. Bien sûr, comme je l'ai mentionné, l'Adobe XD est livré avec un essai de sept jours. C'est donc là que nous allons utiliser pour ce cours ici. Si vous n'avez pas Adobe XD et que vous ne faites que le tester. Ou bien vous voulez suivre ce cours et l'apprendre avant de l'acheter, c' est ce que je vous recommande de continuer et de cliquer simplement sur les essais gratuits. Ce que nous allons faire. Une fois cela fait, il vous poserait quelques questions pour les particuliers, les étudiants et les enseignants, que vous pourrez peut-être utiliser pour obtenir un rabais éducatif. Il nécessite une pièce d'identité valide, donc vous devrez peut-être lui envoyer une pièce d'identité pour montrer que vous êtes étudiant. Vous pouvez également vous inscrire en tant qu'entreprise. Mais nous allons aller de l'avant et simplement utiliser pour des individus. Et cliquez sur Continuer. Qui vous a demandé de choisir à nouveau un forfait, vous pouvez choisir uniquement Adobe XD ou toutes les applications Creative Cloud. Pour l'instant, nous ne sommes qu'un peu choisir XD pour ce cours. Lorsque je clique sur Continuer, il vous demandera si vous souhaitez une option mensuelle ou une année, l'option de facturation. Nous allons continuer au cours du mois. Et bien sûr, nous allons commencer par utiliser cet essai de sept jours. Donc, il ne va pas vraiment aller de l'avant et se charger. Est-ce que Carter est quelque chose en ce moment ? Nous allons cliquer sur Non, grâce à cette offre supplémentaire qu'il vous offre. La prochaine étape consiste à vous demander une adresse e-mail. Je vais donc entrer mon adresse e-mail ici. Nous allons simplement créer un compte. Si vous possédez déjà un compte Adobe, demanderez votre mot de passe. Sinon, il vous demandera de vous inscrire ici et d'ajouter un mot de passe. Allez-y et prenez ce temps pour configurer votre compte. Si vous ne possédez pas déjà de compte Adobe, une fois que vous accédez à la page de paiement, il va de l'avant et vous demandera saisir des méthodes de paiement. Laissez-moi donc aller de l'avant et cliquez sur m'abonner. À partir de là, vous pourrez voir quand vous commencerez à recharger. J'ai donc l'essai gratuit disponible jusqu'au 16 décembre. Vous avez donc accès gratuitement à Adobe XD jusqu'à la date d'essai et à la date que vous voyez ici. ici là, vous pouvez utiliser gratuitement le produit. Et ensuite, ce sera le cas, commencerons à vous facturer en fonction de votre abonnement. Allez-y et cliquez sur Commencer. Désormais, pour pouvoir installer Adobe XD, vous devez installer Creative Cloud, ce qui vous permet d'installer. Il s'agira de produits et de les tenir à jour sur votre machine. Allez-y et permettez à Creative Cloud de s'ouvrir pour l'installer ici. Une fois que Creative Cloud s'ouvrira, il ressemblera à ceci. Et vous pourrez voir à partir d'ici que XD est installé. Bien sûr, comme je l'ai déjà installé, il va aller de l'avant et le mettre à jour. Comme je ne l'ai pas mis à jour, il le met à jour au lieu de l'installer. Mais pour vous, c'est dire installer si c' première fois que vous installez XD sur votre machine. Donnez-y un peu de temps et une fois qu'il sera entièrement terminé et mis à jour, nous allons l' ouvrir et l'explorer lors des prochaines conférences. 4. Gérer votre compte Adobe: Avant de nous lancer dans Adobe XD et d'explorer de quoi il s'agit et de l'utiliser. Je voulais juste faire rapidement une courte vidéo pour expliquer qu'à tout moment tout au long du procès ou avant la fin de votre procès, si vous décidez qu'il ne sera pas excusé pour vous, ou si vous voulez simplement l'apprendre. Vous pouvez toujours gérer votre plan via le site Web du compte Adobe. Ainsi, à tout moment, vous pouvez accéder au compte dot adobe.com dans votre navigateur. Et à partir de là, vous pourrez voir votre plan. Donc, si vous avez choisi l'essai gratuit d' Adobe XD, vous pouvez en fait aller de l'avant et voir combien de jours il vous reste indiqué que la méthode de facturation commence vous facturer et combien vous serez facturé, à quel moment. Donc avant cette date, si vous décidez de mettre fin à votre facturation ou si vous souhaitez annuler ou peut-être mettre à niveau pour avoir accès à d'autres usines, vous pouvez cliquer sur Gérer le plan ici. Et une fois que vous avez cliqué sur Gérer le plan, vous pouvez modifier votre plan ou annuler votre plan à partir d'ici. Et je viens de faire cette vidéo rapide juste pour m'assurer que vous n'êtes pas pris au piège dans les cycles de facturation. Parce que je détestais quand cela arrive avec des essais gratuits, quand la fin m'est arrivée, et je suis sûr que c'est arrivé à certains d'entre vous. Je fais donc cette vidéo pour vous faire savoir qu' à tout moment de votre essai de sept jours, vous pouvez annuler sans conséquences. Mais j'espère que vous trouverez Adobe XD suffisamment utile là-bas Vous continuez à l'utiliser. Maintenant, si vous êtes prêt à vous lancer, nous allons explorer Adobe XD lors de la prochaine conférence. 5. Le navigateur de fichiers: Donc, si Creative Cloud est ouvert, c'est génial. Si ce n'est pas le cas, assurez-vous d' aller de l'avant et de l'ouvrir, vous pouvez aller de l'avant et simplement rechercher Creative Cloud à partir de vos projecteurs. Et vous allez aller de l'avant et ouvrir ça. Je l'ai déjà ouvert maintenant, vous devriez pouvoir trouver XD sous vos applications installées. Si vous n'êtes pas sur cette page, vous pouvez y accéder simplement en cliquant sur Toutes les applications sur le côté gauche ici. Ensuite, continuez et cliquez sur Ouvrir. Et je vais simplement ouvrir votre Adobe XD. Une fois que XY est ouvert, vous n'avez pas besoin d'ouvrir Creative Cloud pour pouvoir fermer cette fenêtre et simplement ouvrir XD. C'est donc la première page que vous voyez dans XD, c'est votre navigateur de fichiers et où vous pourrez accéder à tous vos fichiers. Que travaillons-nous du haut à gauche ici vers le bas à droite, afin que nous puissions parcourir ce que ce navigateur de fichiers a à offrir. haut à gauche, vous verrez donc une nouvelle option de fichier. À partir de là, vous pourrez créer de nouveaux fichiers dans lesquels vous pourrez concevoir vos applications mobiles et Web ou tout ce que vous concevez. Vous pouvez aller de l'avant et ouvrir des fichiers à partir d'ici. Donc, si vous possédez déjà, qu'il s'agisse d'un fichier Photoshop, ce fichier d'esquisse ou d'un autre fichier XD. Vous pouvez aller de l'avant et les ouvrir à partir d'ici. Une fois que vous aurez cliqué dessus, il vous demandera de localiser ce fichier et de l' ouvrir à partir de là. C'est notre page d'accueil, où nous sommes ici. Depuis la page d'accueil, vous pourrez accéder au démarrage d'un nouveau document, mais de manière plus rapide. Donc, si vous savez déjà quel appareil vous allez concevoir. Voyons donc voir. Je vais concevoir une taille d' écran iPhone 12 Pro Max. Je peux aller de l'avant et cliquer dessus. Et ce que cela va faire, c'est ouvrir le fichier et générer ces formats précis ou le dimensionnement des plans de travail pour moi, ce que nous ferons lors de la prochaine conférence. Attendons donc ça. Mais c'est génial parce que cette façon était de toutes les tailles ici. Vous n'avez pas vraiment besoin de le consulter en ligne. Cela rend notre processus de conception beaucoup plus rapide. De même, si vous concevez un projet Web, il s'agit généralement de la taille que nous avons conçue pour 1920 x 1080 pixels. Vous pouvez maintenant utiliser ces deux autres options moins courantes mais également disponibles. Vous pouvez créer un document pour les histoires Instagram. Publications Instagram, Twitter, Facebook, même couvertures vidéo YouTube. Vous avez donc également accès à ceux-ci. Si vous travaillez pour un type de conception de marque, ou si vous pouvez créer un design personnalisé en saisissant la largeur et la hauteur de vos plans de travail. Et nous allons continuer et générer cela pour vous. Ici, ce sera x t vous donnera un lien vers certains de leurs articles où vous pourrez explorer certaines des fonctionnalités disponibles. Mais bien sûr, nous allons passer en revue ces fonctionnalités et beaucoup plus de profondeur tout au long du parcours. déplaçant ici, sur le côté gauche, vous verrez vos fichiers. ce moment, parce que je n' ai aucun fichier créé, je ne verrai rien ici. Mais une fois que je commencerai à travailler sur de nouveaux fichiers, il apparaîtra ici. Et je vais pouvoir créer de nouveaux dossiers à partir d'ici pour organiser mes fichiers ou les voir sous forme de listes ou de grilles. Et si d'autres personnes ont partagé des projets avec moi avec mon compte Creative Cloud, je peux les voir ici. Si j'ai publié des designs, je peux gérer les liens ici pour les projets que j'ai créés, publiés ou partagés. Et si j'ai des fichiers supprimés, ça ira et apparaîtra ici. Ce qui est génial parce que si vous supprimez accidentellement un fichier sur lequel vous travaillez, vous pouvez y accéder sans vous inquiéter ici, un peu comme une poubelle sur votre ordinateur. Donc, sans plus tarder, revenons à l' écran d'accueil et apprenons comment créer de nouveaux fichiers ensemble lors de la prochaine conférence. 6. La mise en page: Maintenant que nous connaissons bien notre navigateur de fichiers ici dans Adobe XD, pourquoi ne pas aller de l'avant et apprendre comment créer nouveaux fichiers et passer rapidement en revue la mise en page du logiciel. Comme indiqué dans la conférence précédente, le moyen le plus simple de créer un nouveau fichier consiste à cliquer ici sur nouveau fichier. Maintenant, si vous travaillez avec un appareil spécifique, comme mentionné précédemment, vous pouvez cliquer sur l' une ou l'autre de ces options. Si vous cliquez simplement sur Nouveau fichier, c'est ce que nous allons faire maintenant, XD va ouvrir une fenêtre pour vous, comme celle-ci ici. Désormais, par défaut, il utilise la taille Web de 1920 pixels pour les plans de travail. Donc, si je rentre rapidement chez moi juste pour vous montrer les autres options, si je veux aller de l'avant et travailler sur un projet mobile, alors je clique sur cette option iPhone 12 Pro Max ici. Ensuite, il va générer un nouveau fichier. Et le plan de travail ici sera en fait un iPhone 12 Pro Max Size au lieu du site Web. C'est tout ce que cela signifie, toutes les différences entre ces options dans le navigateur de fichiers. Maintenant, je vais fermer ce dossier ici que j' ai et continuer avec ce dossier que nous avons ici. Encore une fois, vous pouvez créer ce fichier en cliquant simplement sur nouveau fichier dans votre navigateur de fichiers XD. Tout d'abord, c' est le nom de notre fichier. Par défaut, Adobe génère un fichier sans titre, suivi d'un tiret et de la date et de l'heure auxquelles le fichier a été créé. Pour modifier ce nom de fichier, il suffit de double-cliquer ici. Nous allons juste appeler cela notre premier dossier. Juste pour le plaisir de la leçon. Nous allons ensuite cliquer sur Enregistrer. Et maintenant, comme vous pouvez le constater, il a été remplacé par le premier fichier, qui est maintenant le nouveau nom de notre fichier. Cette petite icône de nuage indique simplement que nous sommes connectés au Web et que ce projet est automatiquement enregistré dans Creative Cloud, où vos fichiers sont stockés par défaut. Cool. Donc, en travaillant par le haut, à partir d'ici, nous pouvons revenir à notre navigateur de fichiers ou à la maison. C'est le mode de prototypage que j'ai brièvement mentionné où vous pouvez créer des prototypes et vous connecter à vos plans de travail. À partir de là, vous pouvez partager vos projets facilement en créant des liens où n'importe qui peut y accéder ou que seules certaines personnes exploreront tout cela tout au long du cours, nous allons revenir à la Onglet Création et continuez sur le côté droit ici , en passant par le côté droit, vous verrez une petite icône Partager où vous pouvez ajouter l'adresse e-mail de quelqu'un que vous étiez travailler sur cette largeur de fichier et cela les invitera au projet où ils pourront collaborer avec vous. En utilisant l'aperçu de l'appareil, nous pouvons réellement aller de l'avant et voir nos conceptions sur un appareil réel. Et quand nous arriverons à la section prototypage, nous allons certainement explorer cela et c'est super cool. Ou ici, vous avez la possibilité prévisualiser simplement votre prototype le bureau que vous avez au lieu de l' ouvrir sur un appareil réel. Et sur le côté droit, nous avons le niveau de zoom ici, afin que nous puissions choisir différents niveaux de zoom. Ou je peux simplement faire défiler vers l'avant et vers l'arrière à l'aide votre trackpad ou de la molette de défilement de votre souris. Cool. Maintenant, sur le côté gauche nous avons un petit panneau d' outils où nous pouvons cliquer sur certaines formes et les dessiner dans notre plan de travail. Maintenant, pour le bien de cette leçon, ne vous inquiétez pas de suivre exactement ce que je fais ici. Je vous montre très brièvement ce que XD a à offrir. Lorsque nous l'examinons en détail, vous avez une idée de ce avec quoi nous travaillons. À partir du panneau Outils, nous pouvons créer des ellipses, des polygones ou des triangles, des lignes. Nous pouvons utiliser un outil stylo pour créer des formes personnalisées. Nous pouvons utiliser un texte pour écrire des textes dans notre plan de travail. Nous pouvons utiliser ce petit bouton pour créer un nouveau tableau artistique. Donc, si vous allez juste du bon côté ici, je peux créer un tableau d'art mon goût avec la taille que je veux. Ou si je veux une taille spécifique pour une taille d'appareil spécifique, je peux utiliser le petit panneau droite ici pour choisir une taille. Et ici, nous avons un petit Zoom. Donc, cela vous permettra simplement de zoomer, peu similaire à l'option de zoom ici, mais vous donne simplement cette loupe où vous pouvez zoomer sur une certaine partie. Et nous allons explorer certaines des fonctions de zoom ultérieurement et plus en détail. Maintenant, en utilisant ces trois petits boutons ici, vous pouvez changer ce panneau que nous avons. Vous pouvez passer du panneau Calques qui présente en fait tous vos tableaux d'art ainsi que objets à l'intérieur de ces plans dans ce petit panneau ici. Donc, si je revenais simplement à cette petite icône, je peux voir toutes mes formes en cliquant sur ce tableau d'art ou simplement tous mes tableaux artistiques dans le panneau de calque. Maintenant que nous travaillons sur des projets, vous verrez à quel point ce panneau de couches peut être utile pour trier et organiser votre projet. Ensuite, à partir de là, nous avons des bibliothèques. Ainsi, chaque fois que nous réutilisons certaines couleurs ou certains styles de caractères sont des composants, nous pouvons ajouter cela à notre bibliothèque et nous pouvons même partager cette bibliothèque ou la publier afin que nous puissions le faire utilisez-le dans d'autres équipes ou d'autres projets. Tout simplement super cool, nous allons explorer ça dans un peu. Enfin, nous avons un plug-in ici où vous pouvez réellement découvrir des plugins. Et si je clique sur cette petite icône de plug-in ici, nous allons ouvrir les plugins. page. Les plugins nous permettent généralement d'automatiser notre processus de conception ou de nous aider à vraiment améliorer notre productivité de conception exploreront certains plug-ins au fur et à mesure que nous suivons le cours. Alors, gardez un œil sur cela. Allons de l'avant et fermons ça juste ici. travaillons maintenant sur le côté droit, là où nous avons notre panneau de propriétés. Ce panneau sera modifié en fonction de ce que vous avez sélectionné dans votre Canvas. Et si je n'ai pas mentionné cela auparavant ou cette partie médiane ici où vous avez tous vos plans de travail et vos objets sous vos formes et que tout est appelé toile et votre projet, cette toile est vraiment infinie, vous pouvez donc ajouter autant d' objets que vous le souhaitez, et elle ira de l'avant et s'agrandira. C'est un peu comme un petit univers pour vos créations. Si vous voulez y penser de cette façon. Je ne sais pas pourquoi, mais c'est juste une analogie que j'aime utiliser. Maintenant, si je sélectionne un plan de travail en cliquant sur son nom ici, vous pouvez voir que nous obtenons certaines options, y compris les options de transformation. Je peux donc modifier la largeur de cette image ici en entrant simplement un nouveau pixel de largeur. Je peux changer la hauteur. Je peux choisir de remplir la couleur de ce tableau d'art. Je peux même créer des grilles sur mes tableaux artistiques. Il s'agit donc du panneau Propriétés lorsque vous avez une sélection maladroite. Mais si vous avez sélectionné un objet, vous verrez que cela va bientôt changer. Et nous vous offrirons plus d'options pour travailler avec d'autres configurations de votre objet. Nous allons maintenant explorer toutes ces options en détail tout en apprenant comment créer des formes et autres. Et bien sûr, si vous sélectionnez le texte, vous obtenez différents ensembles d' options telles que votre police, votre taille de police, etc. Vous remarquerez maintenant que certaines choses sont partagées parmi plupart des objets, textes ou tableaux d'art. Certains d'entre eux peuvent inclure des effets ou des apparences ainsi que la transformation. Ils sont généralement partagés entre de nombreux objets, mais il existe différents éléments tels textes qui n'apparaissent que lorsque vous avez sélectionné un texte dans votre canevas. Et si vous n'avez rien sélectionné, cela ira de l'avant et ne montrera pratiquement rien. Une autre chose intéressante, lorsque vous avez sélectionné quelque chose, vous pouvez aller de l'avant et ajuster son alignement dans le plan de travail. Et nous explorerons cela lorsque nous apprendrons l' alignement et la distribution dans XD. Cool. n'est donc qu'un petit aperçu de ce que nous traitons en termes de présentation ici. J'espère que maintenant vous êtes un peu familier, mais encore une fois, nous allons examiner chaque partie en détail. Alors ne vous inquiétez pas si vous n'avez pas compris grand-chose jusqu'à présent, cela changera bientôt lorsque nous commencerons concevoir et à vous familiariser avec XD. Maintenant, dans la section suivante, nous allons approfondir la plupart des panels dont nous avons parlé dans cette conférence. Je vous y verrai. 7. Les options de menu: Sans entrer dans les détails, je voulais également parcourir les options de menu d'Adobe XD tout en haut. Je suis sur une machine Mac évidemment, mais si vous avez Windows, ce menu ici, ce sera probablement différent pour vous. Il y aura un menu de hamburgers quelque part ici. Je vais donc mettre une capture d'écran ici pour que vous puissiez voir d'où vous pouvez accéder au même menu. Donc, si vous tombez sur un Windows, soyez conscient de ce petit changement. Mais les options de menu doivent toujours être similaires. Vous serez donc toujours en mesure de tomber de la même manière, que vous utilisiez Excel sur Windows ou Mac , en allant de gauche à droite de notre menu. Tout d'abord, nous avons un dossier. À partir de là, nous pouvons créer de nouveaux fichiers, ouvrir des fichiers, ouvrir à partir de votre ordinateur. Si vous avez un fichier sur votre machine à ouvrir, vous pouvez accéder à des projets récents. Si vous avez plusieurs projets, vous pouvez rapidement basculer entre eux ici. Mais comme nous n'avons qu' un seul projet ouvert, il ne vous montrera que ce projet. Vous pouvez obtenir des kits d'interface utilisateur à partir de ce menu ici, qui seront présentés dans la section suivante de ce cours. Nous pouvons gérer nos bibliothèques, dont nous avons parlé très brièvement lors de la conférence précédente. Il peut aller de l'avant et enregistrer ce fichier Adobe XD ici. Si vous souhaitez l' enregistrer quelque part, des projets spécifiques sont par défaut enregistrés dans Creative Cloud, qui apparaîtra sous vos fichiers. À partir d'un fichier, vous pouvez également accéder à l'historique de vos documents. Maintenant, vous avez également accès à cet historique de documents en cliquant sur cette petite flèche ici. Il va de l'avant et vous montrera les différentes versions de votre projet telles que vous y travaillez au fil du temps. Vous pouvez donc cliquer sur différentes versions à temps pour voir ce qui a changé. Maintenant, bien sûr, parce que je n'ai pas vraiment changé. C'est la même chose en ce moment entre les deux. Mais à mesure que vous subissez d'autres changements dans votre projet, vous verrez que l'historique des documents s'additionnera, ce qui est très utile si vous vous verrez que l'historique des documents s'additionnera, ce qui est très utile si vous avez commis une erreur et que vous souhaitez revenir à un certain point dans heure. Sous les options d'édition, nous avons annulé, refaites votre copier-coller habituel. Mais nous avons aussi quelque chose appelé Paste apparence, ce qui est cool. Nous allons aller de l'avant et nous permettre essentiellement de copier uniquement l'apparence d'un objet, mais pas l'objet lui-même. Nous allons passer par là en explorant nos outils de forme. Et nous avons la suppression habituelle, tout sélectionner, tout désélectionner, et ainsi de suite. Sur notre option objet, nous avons Grouper, Dissocier. Donc, si vous travaillez avec plusieurs objets, nous pouvons les regrouper et les dissocier. Et cela apparaîtra également dans le panneau des calques. Vous pouvez verrouiller ou monter des objets à partir de vos tableaux d'art, de votre Canvas. Vous pouvez ajouter des couleurs à votre panneau de ressources. Dans les styles de personnages, vous pouvez créer des composants à partir de là, ce qui nous permettra de créer des objets réutilisables tout au long de notre projet. Et nous allons explorer les composants car c'est l'une des choses les plus utiles de XD. Si vous travaillez avec un composant et que nous voulions le réinitialiser sur la scène principale. Nous pouvons le faire à partir d'ici. Nous pouvons marquer les choses à exporter. Ainsi, pour travailler sur plusieurs choses, nous pouvons sélectionner ceux que nous voulons exporter et les préparer à l'exportation ici, nous pouvons créer des masques ou des grilles répétées. À partir d'ici. Nous allons passer en revue les deux options dans ce cours. Nous avons des options de chemin que nous allons parcourir. Nous avons un texte. Donc, si vous voulez rendre votre texte en gras, italique, vous pouvez le faire à partir d'ici. Nous pouvons arranger les choses. Dans notre panneau Calques également, nous pouvons le faire, mais si vous voulez un raccourci, vous pouvez également venir ici pour mettre les choses au premier plan ou faire avancer les choses. À l'envers. Nous pouvons transformer les choses en les retournant horizontalement, verticalement. Ici, nous pouvons aligner les choses vers la gauche, le centre, droite, le haut, le milieu, le bas, auxquels nous avons également accès. Là-haut. Nous pouvons distribuer les choses horizontalement et verticalement. Cela permettra donc d' espacer uniformément les choses. Et nous allons passer par là car nous apprenons la distribution et l'alignement ne sont pas sous notre plugin. Comme expliqué. Les plugins nous permettent d'automatiser notre travail de conception et de rendre les choses beaucoup plus rapides pour nous. Nous allons donc certainement utiliser quelques plugins dans nos conceptions. Et une fois que vous aurez installé des plugins qui iront et apparaîtront ici pour que vous puissiez facilement y accéder à tout moment. À notre avis, nous avons nos fonctions de zoom avant et de zoom arrière. Nous pouvons utiliser nos options de commande ou de contrôle et de numéro ici pour zoomer à certains niveaux, effectuer un zoom complet dans une conférence séparée. Nous pouvons entrer dans l'axe plein écran. Nos couches de bibliothèques sont des plugins qui sont essentiellement les mêmes que ce que font ces boutons ici. Nous pouvons créer une mise en page ou des grilles carrées, que nous allons également explorer. Et sous une option Windows, nous avons la minimisation habituelle, Zoom, ainsi de suite et ainsi de suite. Nous pouvons maintenant prévisualiser notre projet en appuyant sur Command Enter sur un Mac ou sur Control Enter. Et il va aller de l'avant et l'ouvrir. Mais c'est essentiellement la même chose que de cliquer sur cette icône actuelle ou sur l'icône d' aperçu du bureau ici. Et sous Aide si, à un moment donné, nous voulons rechercher une tâche donnée. Imaginons donc que nous voulons accéder à nos outils Zoom que nous pouvons rapidement taper Zoom et accéder facilement à l' option souhaitée. Et cela nous permet de trouver exactement ce que nous recherchons beaucoup plus rapidement. Ainsi, à tout moment, vous pouvez utiliser cette fonctionnalité d'aide tout au long du cours, car elle est juste un peu brève sur ce que l'option de menu et a à offrir. Et la prochaine conférence, je vais partager avec vous quelques raccourcis auxquels vous pouvez accéder et qui sont utiles. Vous n'avez pas besoin de mémoriser ces raccourcis. En fait, je pense que ce n'est probablement pas la meilleure façon de les apprendre. Le meilleur moyen est de jeter un bref coup d'œil à ce document. Et au fil du temps, alors que nous avons travaillé sur le projet, je vais les utiliser et je vous rappellerai de les utiliser également. De cette façon , nous pouvons utiliser ces raccourcis clavier pour rendre notre processus de conception beaucoup plus efficace. 8. Créer des formes: D'accord, nous sommes prêts à explorer certains des outils que nous avons dans XD. Et d' abord, les formes sont les formes. Et bien sûr, les formes sont vraiment importantes car elles composent beaucoup de nos objets dans nos conceptions. Que nous travaillions avec des boutons, des images de profil ou des icônes de menu, tout se compose réellement de formes InDesign. Maintenant, bien sûr, cela peut être aussi simple qu'un rectangle ou aussi complexe qu'un dessin unique d' une icône à l'aide de l'outil stylo, les possibilités sont infinies. Avant d' explorer certaines formes, nous allons simplement nous débarrasser de ce fichier et en créer un nouveau accédant à notre page d'accueil et en cliquant sur Nouveau fichier. Vous remarquerez peut-être que XD ne fermera pas vos fichiers d'origine. Donc, si vous êtes déjà dans un fichier, il restera ouvert et créera simplement une autre fenêtre, moins sur le Mac. Donc, si vous le souhaitez, vous pouvez aller de l'avant et simplement fermer ce fichier. Et ne vous inquiétez pas, il est enregistré dans le Cloud, de sorte que vous avez toujours accès à n' importe quel moment depuis l'écran d'accueil. Il y a donc votre nouveau dossier. Allons de l'avant et renommons celui-ci en explorant les outils XD. Je vais juste aller de l'avant et le titre parce que c'est littéralement ce que nous faisons avec ce dossier. Vous pouvez le nommer vraiment comme vous le souhaitez. n'y a pas vraiment de mal ou de mal ici. C'est juste que j'aime garder mes fichiers organisés pour que je sache exactement de quoi il s'agit. Tout d'abord, nos formes sont accessibles via le panneau d'outils ou tout à gauche de la fenêtre. Nous avons donc accès à un rectangle, à une ellipse, à des lignes de polygones, et nous pouvons créer des formes personnalisées avec les crochets intérieurs de l'outil Stylo. Le raccourci vers la création de ces formes s'affiche. Donc, si vous êtes déjà sur votre tableau artistique et que vous souhaitez créer rapidement, disons un rectangle. Vous pouvez simplement appuyer sur la touche R de votre clavier. Et ce petit curseur apparaîtra là où vous pourrez dessiner votre rectangle. Donc, si je commence à cliquer et à faire glisser, vous voyez que je crée une forme ou rectangle en fonction de mes préférences. Lorsque vous créez n'importe quelle forme. Si vous maintenez la touche Maj enfoncée pendant que vous créez cette forme, XD va de l'avant et verrouillera les proportions de la largeur et de la hauteur. Ainsi, vous pouvez créer un carré parfait ou parfait ou un cercle parfait si vous travaillez avec un cercle. Alors, allons de l'avant et créons un carré. Il suffit de lâcher prise ici. Comme vous pouvez le constater, j'ai créé une forme. Je peux appuyer sur Echap sur mon clavier pour sortir de l'outil de forme une fois qu'ils ont appuyé deux fois dessus. Ou une autre option est que je peux simplement appuyer sur V, qui va sélectionner ce petit outil Sélectionner pour que nous ne puissions plus créer des rectangles. Sinon, si vous restez en mode rectangle, vous pouvez créer plusieurs rectangles si vous le souhaitez. Et chaque fois que vous voulez quitter cet outil, vous pouvez cliquer sur cette petite icône ou V sur votre clavier. Et maintenant, je n'ai plus de cet outil de rectangle. Et chaque fois que je glisse, je ne fais que sélectionner des objets dans mon tableau d'art. Je vais juste aller de l'avant et sélectionner ceux-ci et cliquer sur Supprimer pour m'en débarrasser car nous avons juste besoin du carré pour l'instant. Maintenant que je l'ai mentionné, le panneau des propriétés va changer en fonction de ce que vous avez sélectionné. instant, notre forme est simplement composée de cette petite bordure ici. Mais si nous voulons ajouter, disons, une couleur à l'intérieur, nous pouvons simplement cliquer dessus ici. Maintenant, si vous avez le panneau des calques ouvert ici, ce que je suggère de l' ouvrir par défaut. Vous pouvez voir dans mon plan de travail web 1920, j'ai un calque rectangle. Maintenant, si je suis dehors ici et que j'ai sélectionné dans le panneau Calques, cela ira de l'avant et fera la même chose et nous allons simplement le sélectionner pour moi. Et du bon côté, j' ai certaines options. Je peux répéter ce carré si je veux en avoir plusieurs exemplaires sur mon plan de travail, qui est super cool, cela sera très pratique car nous travaillons avec nos créations. Il peut s'échapper de là. Et il suffit de sélectionner à nouveau l'option. Si vous voulez aller de l'avant et simplement dissocier et revenir à mon rectangle. Comme je l' ai déjà dit, je peux changer ma largeur et ma hauteur ici. Donc, si je veux changer ma largeur ici, je peux la changer à 400. Et maintenant, j'ai un rectangle plutôt qu'un carré. Mais si vous voulez verrouiller la proportion de façon à ce que lorsque vous modifiez votre largeur et votre hauteur, elles restent inchangées. Vous pouvez cliquer ici sur cette petite icône d'aspect de verrouillage. Et une fois que vous le faites, si je change ma largeur à 400, maintenant ma largeur et ma hauteur changeront pour 100, ce qui est super cool. C'est un peu X et Y qui indiquent où se trouve cette petite forme dans mon tableau d'art. Ce petit point ici et chaque coin supérieur gauche est essentiellement ce que représentent ces deux points. Ce petit point ici, mon plan de travail est x 0 et y 0. Donc essentiellement 88 signifie que cette petite forme ou cette partie de la forme est de 88 pixels horizontalement et 93 pixels verticalement. Donc, si je bouge ça, vous remarquerez que les petits X et Y changent. Et si je le mets dans le coin, ce qui est génial est que lorsque les choses se rapprochent des coins ou des bords, XD ira de l'avant et le mettra automatiquement en place. Et maintenant, comme vous pouvez le voir, 0000, et bien sûr, je peux imaginer que cela change en tapant simplement le numéro. Maintenant, de n'importe quel point, je peux aller de l'avant et faire pivoter mon carré. Et je peux appuyer sur Command Z pour annuler cela ou Control Z sous Windows. Il est en train de descendre dans le panneau des propriétés. Je peux aller de l'avant et changer le remplissage comme nous l'avons discuté. Donc, en cliquant sur cette petite icône d'échec, je peux choisir une nouvelle couleur, comme un peu de bleu ici. Et je peux changer la teinte pour choisir exactement ce que je veux sans vouloir plus clair ou plus sombre. Nous avons donc maintenant un taux de remplissage ainsi qu'une frontière. La bordure ici a une taille d'un pixel. Donc, si je change cela pour induire en erreur et 20, vous pouvez maintenant voir la frontière beaucoup plus clairement. Nous pouvons également changer la couleur de la bordure. Donc, si vous pouvez faire une sorte de bordure grise ici. Et je peux juste aller de l'avant et conclure ça. Je peux créer des arêtes arrondies pour ma bordure. Donc, si vous regardez en ce moment, si je fais un zoom avant plus, parce que c'est un peu difficile à voir à ce niveau de zoom. Si vous cliquez sur cette petite jointure ronde, elle se fera juste autour des bords de notre bordure. Ou vous pouvez faire cette option ici qui créera simplement une jointure biseautée. Ou vous pouvez simplement faire une jointure fondue, essentiellement sans arrondi. Allons de l'avant et effectuons un zoom arrière. J'utilise mon défilement sur mon trackpad pour effectuer un zoom avant et arrière. Vous pouvez mettre des effets sur vos formes, mais faire de l'ombre intérieure. Il y a donc cette petite ombre intérieure en ce moment est un peu difficile à voir parce qu' elle est probablement cachée par ma frontière ici. Mais si je fais un excès de 20 et un Y de 20, et peut-être que je change ce rayon de flou à 20 aussi. Vous pouvez maintenant le voir ici. Et si je clique dessus, vous verrez les transparences diminuer. Je peux donc aller de l'avant et le rendre plus opaque ou plus visible. Ainsi, au fur et à mesure qu'ils l'assombrissent, vous pouvez voir que l'ombre devient plus forte, ou si vous vous rapprochez du bas, elle sera plus claire. Vous pouvez même modifier la couleur de votre ombre si vous ne voulez pas qu'elle soit noire. Mais généralement pour les ombres, nous utilisons la couleur noire. Si vous souhaitez une ombre extérieure ou une ombre portée, vous pouvez effectuer cette option ici. Et la même chose. Vous pouvez aller de l'avant et le contrôler. Et comme vous pouvez le voir maintenant à l'extérieur de ma forme, j'ai une petite ombre, ce qui est plutôt cool. Je peux choisir les x et y de celui-ci. Donc, si je veux qu'il soit un peu plus loin et plus flou, donc c'est un peu plus flou. Je peux également faire cette option. Encore une fois, vous avez le contrôle total obésité des barres obliques de vos ombres en cliquant simplement sur cette petite icône ici. Et à tout moment, vous pouvez simplement cliquer sur la petite case à cocher pour supprimer vos ombres. Explorera le flou d'arrière-plan plus loin, ainsi que marqué pour l'exportation. Mais c'est essentiellement de cette façon que vous créez des formes. Si vous souhaitez explorer avec d'autres formes telles que des cercles, créez différents cercles ou triangles différents et explorez vos formes. C'est donc essentiellement la façon dont vous créez des formes dans Adobe. La plupart de ces propriétés sont à peu près identiques lorsqu'il s'agit de formes différentes. Vous pouvez donc créer des ellipses et jouer avec le remplissage de la bordure, ombres et partir de là. Une chose que je tiens à noter, c'est que si je quitte la forme du chemin, cliquez sur ce petit carré ici. Ici, c'est essentiellement l'opacité de cette forme carrée dans mon plan de travail. Donc, si je fais L4, ça, comme vous pouvez le voir, il ira de l'avant et se nourrira. Et si je mets d'autres objets en dessous. Donc, si je mets cette petite ellipse dans le coin ce moment parce qu'elle est au-dessus de mon rectangle, je la prends complètement. Si je vais de l'avant et que je le déplace sous mon rectangle. Maintenant, mon rectangle est au-dessus de la forme de l'ellipse ici. Donc, si je change l'opacité en fonction de sa transparence, elle va aller de l'avant et soit masquer complètement cette ellipse parce qu' elle est au-dessus, soit en affichera un peu en fonction quel point vous voulez voir votre forme. Et les conférences suivantes nous allons également explorer nos outils de ligne et de stylo. Mais avant de faire cela, je vais vous faire un peu d'exercice. Et c'est pour donner à ce petit cercle un remplissage orange, ainsi qu'une bordure noire, juste pour que vous puissiez vous entraîner un peu en matière de personnalisation de vos formes en XD. Et je vous verrai lors de la prochaine conférence. 9. Solution d'exercice des formes: Très bien, j'espère que vous avez eu l'occasion de jeter un coup d'œil aux outils de forme et de les explorer un peu. Maintenant, je vous ai fait un petit exercice pour créer un cercle et lui donner un remplissage orange, ainsi que Puerto That est noir. Nous allons donc le faire ensemble et cette conférence, puis passer revue quelques autres choses que je veux explorer avec vous avec des formes. Donc, tout d'abord, c'est d'aller de l'avant et supprimer ce cercle que j'ai déjà créé. Comme je l'ai déjà mentionné, il existe des raccourcis pour créer des formes. Donc, celle pour les ellipses, qui est celle que vous utilisez pour créer un cercle est E. Donc, à tout moment, si vous étiez dans votre plan de travail, vous pouvez aller de l'avant et simplement appuyer sur la touche E de votre clavier, hum, ce qui vous placera dans le même mode que le mode ellipse ici. Si ce n'est pas le cas, vous pouvez toujours appuyer sur Escape. Je vais de l'avant et je clique sur l'outil ellipse. Maintenant, je n'ai pas mentionné exactement la taille du cercle ni l' épaisseur de la bordure. Je vous ai donc laissé ça à vous. Mais pour le bien de cette leçon, nous allons simplement aller de l'avant et en faire un cercle 400 pixels sur 400 pixels. Maintenant, une chose que je tiens à noter est que si vous voulez créer un cercle ou une forme de taille spécifique, vous pouvez aller de l'avant et simplement cliquer sur votre canevas, puis commencer à dessiner votre Ellipse ici. Maintenant, pour l'instant, je ne sais pas quelle est la taille de mon ellipse, mais ce que je peux faire, c'est que je peux aller de l'avant et tout d'abord, tenir des quarts de travail pour dire que c'est un cercle parfait. Sinon, je vais faire une forme ovale. Et puis sur le côté droit ici et le panneau de propriétés de transformation, alors que je fais glisser ma forme, vous pouvez voir la taille, la taille des pixels ici. Donc, si à un moment donné je lâche prise, la forme sera créée à cette taille. Maintenant, ce qui s'est passé ici, mais vous pouvez parfois arriver, c'est que j'ai lâché Shift avant de créer mon cercle. Donc, si quelque chose comme ça vous arrive, vous pouvez simplement aller de l' avant et supprimer ou simplement appuyer sur la commande Z pour annuler cela, puis le faire une fois de plus, vous assurant de maintenir la touche Maj tout le pendant que vous faites glisser votre forme. Et donc, si j'aime juste ici, c'est le parfait 400 x 400 pixels. Mais encore une fois, vous pouvez toujours ajuster la forme ou la taille de votre objet à partir d'ici, la largeur et la hauteur. Puisque nous avons déjà le cercle parfait pour un cercle de 100 pixels par 100 pixels, nous pouvons le laisser tel quel. Allons de l'avant et sélectionnez notre outil de sélection ici. Cliquez sur le cercle que nous avons déjà sélectionné. Et ensuite, en allant à la partie de remplissage ici, allons-y et donnez-lui un remplissage d'orange. Donc, sur le curseur ici, vous pouvez simplement aller de l'avant et choisir une sorte de teinte orange, quelque chose comme ça fonctionne. Et en faisant glisser ce petit sélecteur de couleur ou sélecteur Q sur la couleur que vous voulez, il y a une bonne couleur orange. Et ensuite, pour la bordure, allons-y et donnons une taille de 20 pixels, semblable à ce que nous avons avec ce carré ici. Et puis pour la couleur de la bordure, nous pouvons simplement cliquer dessus. Et pour le noir, nous pouvons simplement aller de l'avant et faire glisser ce petit sélecteur de couleurs jusqu'en bas à droite, que nous allons aller de l' avant et nous donner une couleur de bordure noire. Cool. Nous avons donc maintenant un cercle ou un cercle orange avec une bordure noire autour de lui. Deux petites choses que je veux mentionner dans cette vidéo. L'un d'eux est la caractéristique cool du collage d'apparences. Donc, si vous vous souvenez de ce que nous avons passé par les options de menu pour XD, nous avons parlé de la façon dont nous pouvons copier et coller des apparences entre différents objets. Disons donc que je veux appliquer cette apparence de cercles oranges sur ce carré. J'ai deux options. Je peux aller de l'avant et cliquer sur le carré , puis effectuer les mêmes ajustements ici. Maintenant, une chose intéressante est que je peux cliquer sur ce petit outil pipette ici, aller de l'avant et cliquer sur cette orange pour me donner exactement cette couleur. Ce petit outil pipette vous permet donc de donner à votre remplissage ou à la couleur de votre bordure la même couleur que votre curseur. Donc, quel que soit l'endroit où votre curseur regarde. Donc, si c'est sur cette petite bordure noire ici , nous allons changer le remplissage en noir en fonction de l' endroit où vous cliquez. Je vais utiliser la commande Z pour annuler cela deux fois et revenir à mon carré bleu. Maintenant, je vais vous montrer un moyen plus simple de donner à votre carré la même apparence que votre ovale. Et tout simplement, vous pouvez le faire en cliquant sur le carré, en appuyant sur la commande C, qui est identique à Copier ou Control C sous Windows, cliquez sur carré, mais au lieu de coller réellement, ce qui va coller un autre ovale. Au lieu de le faire, je vais simplement utiliser la commande Z pour annuler cela. Nous allons aller de l'avant et cliquer sur votre carré et appuyer sur Option Commande V, où elle peut également le faire en allant dans Modifier, Coller l'apparence dans votre menu. Donc, essentiellement, ce qui est fait, c'est qu'il est allé de l'avant et donné à ma place la même apparence que le cercle. Maintenant, si je donnais à ce cercle une ombre un blog ou quoi que ce soit d'autre, au-delà de cela, les effets seront également copiés sur la forme. C'est donc très utile et cela nous permet de gagner beaucoup de temps si vous souhaitez utiliser le même style entre différentes formes ou objets. C'est donc une petite astuce pour donner à vos objets les mêmes apparences. Et d'autres choses intéressantes que je veux partager avec vous à propos des rectangles. Vous pouvez réellement aller de l'avant et arrondir les coins de votre rectangle. Donc, qu'il s'agisse d'un carré ou d'un rectangle, vous pouvez aller de l'avant et aller dans n'importe quel coin. Comme vous pouvez le voir, ce petit coin ici, assurez-vous de ne pas cliquer sur le cercle extérieur car nous allons continuer et vous laisser redimensionner votre forme lorsque vous utilisez la commande Z pour annuler cela. Mais je parle de ce cercle intérieur ici. Ce cercle intérieur, si vous allez de l'avant et maintenez-le enfoncé et faites glisser, vous permettra d'arrondir réellement les bordures ou les coins de votre forme. Donc, plus je traîne à l'intérieur, plus elle se transformera en ellipse et deviendra complètement arrondie. Surtout parce que c'est un carré. Ou si je fais juste des coins légèrement arrondis, je peux faire quelque chose comme ça, que nous pouvons utiliser pour les boutons, les formes, les icônes d' application, etc. Maintenant, vous pouvez toujours modifier ce rayon d'angle, mais en allant à droite ici et en bas sous apparence, vous verrez cette petite option de rayon d' angle. Vous pouvez aller de l'avant et modifier ce numéro ici. En ce moment, nous avons un rayon de 75 coins. Mais si vous le réglez, disons 25. Et je vois que votre carré aura un coin légèrement moins arrondi. Et si vous le souhaitez, le rayon d'angle spécifique est de quatre coins différents. Nous pouvons aller de l'avant et cliquer sur cette petite icône ici. Ensuite, cela nous donnera la possibilité de modifier notre rayon d'angle sur des coins spécifiques. Et cela se présente dans le format en haut à gauche, haut à droite, en bas à droite et en bas à gauche. Donc, si vous remplacez le haut à gauche par 75. Nous avons maintenant un coin supérieur gauche plus arrondi que les autres côtés. Et maintenant, si je vais de l'avant et que je tweète cela, cela va changer à nouveau toutes les frontières, ou tous les coins. Le rayon est encore une fois. Mais si je défais ça et que je tiens Alt pendant que je fais ça. Maintenant, vous pouvez voir en maintenant Alt, je peux simplement modifier ce rayon d'angle par lui-même sans affecter les autres. Et je peux faire la même chose à d'autres coins. Plutôt sucré. C'est une petite astuce pour donner vos formes autour de la bordure. Je vais utiliser la commande Z plusieurs fois pour revenir à un 25 parfait de pour revenir à un tous les côtés ou de tous les coins pour le rayon. Et laissez-le tel quel. Dans les conférences suivantes, nous allons revenir explorer nos outils de ligne et de stylo pour créer des formes plus personnalisées. 10. Tracer des lignes: Bon, jusqu'à présent, nous avons créé un carré, nous avons créé un cercle. Il est maintenant temps d' explorer notre outil de ligne. Les lignes sont donc très utiles si vous voulez aller de l'avant et créer des éléments tels que les icônes ou les séparateurs de menu hamburger, ou vraiment tout ce qui n'est pas nécessaire pour un objet comme celui-ci avec un remplissage, mais vous voulez simplement aligner vos conceptions. Je peux donc y aller de l'avant et cliquer dessus. Nous allons donc cliquer sur ce petit outil de ligne ici sur notre panneau d'outils. Ensuite, allez de l'avant et tracez une ligne en cliquant simplement sur notre plan de travail et le faisant glisser jusqu'à l'endroit où nous voulons que notre ligne se termine. Pendant que vous maintenez votre curseur enfoncé. Si vous continuez et maintenez la touche Maj enfoncée pendant que vous tracez votre ligne, vous pouvez aller de l'avant et créer des lignes droites. Donc, si vous voulez une ligne parfaitement droite comme celle-ci, vous pouvez aller de l'avant et laisser aller ici. Ou si vous voulez une ligne inclinée à un angle de 45 degrés, vous pouvez faire pivoter votre curseur pour obtenir ces angles parfaits à 45 degrés. Vous pouvez donc faire une ligne droite vers le bas ou verticale comme celle-ci ou un peu incliné désiré un angle de 45 degrés ou simplement un angle de 0 degré ou simplement une ligne droite comme celle-ci. Et comme aller ici, assurez-vous que pendant que vous dessinez vos formes, si vous utilisez ce Maj pour abandonner ce quart de travail après avoir lâché votre curseur. Assurez-vous donc de ne pas le faire avant. Sinon, tout cet angle peut être gâché si vous lâchez simplement Maj avant de lâcher votre souris et de créer la forme. Je vais juste aller de l'avant et supprimer celui-là. Nous pouvons maintenant cliquer sur Escape pour sortir de cet outil de ligne, en cliquant sur notre ligne ici. De là, vous pouvez voir la largeur de notre ligne, 368. Donc, quand nous allons de l'avant et que nous changeons ça en 400, c'est génial. Nous avons donc maintenant une ligne de 400 pixels et qui n'a pas de hauteur. Si vous donnez une hauteur de doublure, comme vous pouvez le constater, rien ne se produira car une ligne est essentiellement simplement alignée. Il n'y a pas de hauteur à une ligne, c'est juste une largeur. Donc, si vous voulez que vos lignes soient plus épaisses, vous pouvez simplement aller de l'avant. Et vous voyez que nous avons la frontière ici, c'est ce qui montre ici. Nous pouvons aller de l'avant et simplement ajouter de la taille à notre bordure. Donc, si vous faites cinq pixels, vous voyez maintenant que j'ai une ligne un peu plus épaisse. Vous pouvez faire 10 pixels, donc c'est encore plus épais. Maintenant, si vous voulez donner un petit tiret à notre ligne, tous les cinq pixels, nous pouvons aller de l'avant et la modifier comme ça. Ou disons 50 pixels. Nous pouvons créer des lignes pointillées comme celle-ci. Si vous souhaitez des écarts spécifiques entre nos tirets, nous pouvons entrer un nombre spécifique. Et maintenant, nos tirets auront cet écart entre eux. N'hésitez donc pas à jouer avec ces chiffres pour voir quel genre de formes vous obtenez. Nous pouvons donc créer, par exemple, un tiret de 50 pixels avec un écart de 100 pixels, ou un tiret parfait, de 50 pixels avec un écart de trait de 50, etc. Nous pouvons donc les remettre à 0 chaque fois que nous voulons rétablir une ligne droite. Maintenant, avec une ligne similaire à ce que nous avions avec notre option de bordure pour r square, nous pouvons aller de l' avant et lui donner embouts spécifiques afin que nous puissions faire un tour et donc nous avons une ligne aussi arrondie. maintenant sur les bords. Maintenant, je veux vous montrer quelques astuces, astuces et astuces soignées pendant que vous créez des formes. Maintenant, cela s'applique à n'importe quelle forme, pas seulement aux lignes, mais si, à un moment quelconque, vous voulez laisser dire que cette ligne est plus courte ou plus longue, bien sûr, vous pouvez aller de l'avant et saisir chaque extrémité et raccourcir chaque extrémité ou plus long. Maintenant, parce que maintenant j'ajuste ma note ici pour cette ligne. Il ira de l'avant et sera dans des styles de forme libre, donc ce n'est plus droit, mais encore une fois, maintenant Maj, je peux le rendre droit. Donc, si vous voulez une ligne plus courte, nous devons aller de l'avant et saisir chaque nœud et raccourcir la ligne. Mais si je l'annule réellement, maintenant pendant que je tiens un nœud, si je continue et que je maintiens Alt, je peux aller de l'avant et faire glisser un nœud et faire changer les deux côtés. Et encore une fois, si vous voulez maintenir Maj et Alt ensemble maintenant, nous modifions la ligne droite du trou sans manquer son angle droit. Par exemple, ce petit cercle ici. Si je maintiens Alt, je peux aller de l'avant et modifier tous les côtés. Encore une fois, en maintenant la touche Maj enfoncée, elle va de l'avant et limitera cette proportion de largeur et de hauteur. Je vais juste lâcher prise et le laisser tel quel. Et oui, c'est donc créer des lignes dans XD. Nous allons maintenant revenir dans la prochaine conférence et apprendre comment utiliser l'outil plume pour créer des lignes et des formes plus complexes pour des cas spécifiques où nous dessinons certaines icônes ou vous le souhaitez. tracer un objet et ainsi de suite. Je vous verrai donc lors de la prochaine conférence. 11. Utiliser Outil Plume: Alors, quel est ce petit stylo ici ? Nous continuons d'en parler. Il a l'air plutôt chic. Et parfois, il n'est même pas utilisé autant que nous le pensons. Mais il est toujours bon d'avoir une idée de ce à quoi nous avons accès dans notre panneau d'outils. Au cas où, il y a rares cas où nous avons besoin d'utiliser certains outils. Alors pourquoi ne pas aller de l'avant et attraper un outil de stylo en cliquant simplement sur cette petite icône de stylo. Ou vous pouvez toujours appuyer sur P sur votre clavier et cela vous donnera le même type de curseur. Maintenant, je suis zoomé ici. Je vais donc aller de ce côté de mon tableau d'art ici. Et je vais simplement créer une petite forme personnalisée ici en cliquant et en créant des nœuds. Donc, lorsqu'il s'agit de l'outil stylo, considérez-le comme créant une forme avec plusieurs lignes. J'ai donc créé le premier nœud en cliquant ici. Si je clique à nouveau, il va créer un deuxième nœud. Et si je clique à nouveau ailleurs, ça va créer ce troisième nœud et ainsi de suite. L'une des choses intéressantes est que lorsque vous dessinez une forme dans l'outil stylo, elle vous donnera ce petit guide, comme cette ligne bleue ici pour vous dire que vous êtes en ligne droite. Vaughn et créez quelque chose qui se trouve dans la ligne de couture ou même position y qu'à une autre note que j'ai ici. Ensuite, je peux aller de l'avant et voir où cette ligne bleue s'enclenche. Et c'est mon indicateur que c'est au même niveau que cette petite note ici, ce qui est cool. Et même chose quand il s'agit de l'autre nœud. Je peux donc aller de l'avant et continuer à cliquer. Ensuite, je peux simplement créer quelques autres nœuds aléatoires. Maintenant, une chose que je voudrais mentionner est qu'à moins de fermer votre note ici pour votre forme, l'outil stylo, nous continuerons à continuer sans vous laisser arrêter. pointez que vous pouvez appuyer sur Escape pour sortir de cet outil. Et maintenant, tu n'as que ça. Et si j'appuie encore une fois sur Escape, j'ai juste ce chemin qui n'est pas fermé. Ou je peux toujours double-cliquer dessus , puis continuer à dessiner. Ou il peut simplement modifier tous les nœuds existants. Je peux donc modifier ce nœud ou modifier celui-ci ici, ou celui-ci. Ou si je veux continuer à dessiner, je peux simplement revenir en arrière et cliquer sur l'outil stylo et compléter cette forme. Maintenant, pendant que je suis ici, je peux aller de l'avant et cliquer sur ce nœud ici. Et maintenant, je suis de nouveau dans le freinage de mon outil Pen, allez-y et fermez ma forme en cliquant ici. Et maintenant, comme vous pouvez le voir automatiquement, ça nous fait plaisir en dehors de cet outil de stylo, je ne sais pas si j'ai créé une sorte d'icône en forme de diamant ici. Mais je suppose que nous pouvons y retourner et faire glisser cette petite note cette petite note ici pour que cela ressemble un peu plus à un diamant. C'est donc essentiellement ce que l'outil Plume nous permet de créer ces formes personnalisées. Et une fois que vous avez une forme fermée, cela signifie une forme dans laquelle tous vos nœuds sont connectés. Vous pouvez le remplir comme d'habitude. Vous pouvez donc aller de l'avant et donner cette petite forme. Je ne sais pas. Voyons le remplissage bleu et peut-être même en retirons cette bordure. Comme toutes les autres formes. Et maintenant, avec cette forme, une chose à noter est qu'il peut toujours revenir en arrière et l'éditer. Par conséquent, si vous double-cliquez pour entrer dans cette forme, vous pouvez toujours modifier ces nœuds. Ou vous pouvez même faire des choses comme aller au milieu de 22 nœuds et ajouter encore plus de nœuds. Je joue vraiment avec ça et je crée des formes, des formes personnalisées que vous aimez. Je vais juste les annuler en cliquant sur Command Z. Je veux vous montrer une autre chose intéressante quand il s'agit de l'outil stylo. présent, nous avons créé une forme en utilisant uniquement des lignes droites. Mais si vous souhaitez créer une forme plus sophistiquée utilisant des lignes courbes, nous pouvons toujours double-cliquer sur notre forme ici pour convertir ces nœuds en notes courbes. Et je vais vous montrer ce que cela signifie. Par conséquent, si vous survolez l'un de ces nœuds ici, vous pouvez double-cliquer dessus pour en faire un nœud incurvé. Donc maintenant, si je fais glisser ce petit point ici, comme vous pouvez le voir, il rejoint les deux autres nœuds à l'aide d'une ligne courbe. Et je peux ajuster cette ligne courbe en utilisant ces petits points ici. Je peux donc faire une petite courbe latérale ou verticale comme celle-ci. Il suffit de le garder dans la rue en maintenant Shift. Et comme mentionné précédemment, pendant que vous maintenez la touche Maj enfoncée, elle va de l'avant et s' accrochera à des angles spécifiques. Je peux rendre ma courbe plus, plus arrondie ou elle peut la rendre plus subtile comme celle-ci. Les arguments le laissent comme ça. Et vous pouvez le faire avec n'importe quel nœud. Par conséquent, en double-cliquant, vous allez convertir ces nœuds en chemins courbes. Vous pouvez donc créer des formes très personnalisées. Maintenant, à tout moment, si vous voulez aller de l'avant et annuler cela et transformer vos notes en ligne droite. Vous pouvez simplement annuler cela en double-cliquant sur chacun des nœuds courbés. Et nous vous ramènerons à ce chemin en forme de rue ou à ce chemin en forme de rue ou un enclos bordé de rue que vous aviez. Je ne pense donc pas avoir mentionné cela, mais un chemin est essentiellement ce que nous avons créé ici à l'aide de l'outil stylo. Donc, sur le côté gauche ici, par défaut, il s' agit du chemin 1, qui est par défaut le nom qui est donné à notre chemin ici. Vous pouvez toujours sortir d' un chemin en cliquant simplement sur Echap ou appuyant sur V pour revenir à votre outil de sélection. Et c'est l' outil plume qu'il vous faut dans XD, où ils peuvent créer dans la prochaine conférence et regarder où ils peuvent créer dans la prochaine conférence et regarder les outils booléens et comment combiner ou utiliser plusieurs formes ensemble pour créer et combiner des formes. 12. Options booléennes: Comme indiqué dans la conférence précédente, il y a encore deux formes. Nous pouvons faire cette chose vraiment cool, que nous avons brièvement parcourue dans le menu, qui s'appelle chemin ici dans l'objet. Donc, si vous cliquez sur l'objet dans notre menu et que vous descendez au chemin, vous pouvez en fait ajouter, soustraire, intersecter, exclure, chevaucher, convertir le tracé et le contour. Ce qui, pour l'instant, vous n'avez probablement aucune idée de ce qu'ils font, ce qui est tout à fait très bien. C'est tout l' intérêt de cette conférence c'est que nous allons passer par là. Nous allons passer brièvement en revue chacun d'eux pour que vous ayez une idée de ce qu'ils font. Tout d'abord, je vais aller de l'avant et rassembler mes formes ici. Qu'il y a un peu de chevauchement ici. C'est uniquement dans le but de cette leçon, afin que vous puissiez apprendre ce que font ces outils booléens. Donc, si je fais simplement glisser et cliquer sur les deux formes. Et maintenant, je peux voir qu'ils sont tous les deux sélectionnés parce qu'ils sont tous les deux mis en surbrillance dans mon panneau Calques. Et ici, je peux voir qu'ils ont tous les deux ce contour ou à l'intérieur duquel ils sont tous les deux sélectionnés. Vous pouvez également sélectionner des objets en accédant au panneau Calques, en cliquant sur un objet. Ensuite, tout en maintenant la touche Maj enfoncée, vous pouvez cliquer sur un autre objet. Et maintenant, les deux sont également sélectionnés, donc l'un ou l'autre des mots. Alors allez-y et sélectionnez votre forme carrée et ovale ici, puis descendez dans Chemin d' objet et faites Ajouter, ce qui peut également être fait en maintenant la commande Alt enfoncée. Tu es cool. Maintenant, ce qui est fait, c'est qu'il a créé une union de moutons à partir de ces deux formes qui font moitié. Cela signifie donc qu'il est parti de l' avant et joignez ces deux formes pour créer cette forme que je peux maintenant utiliser comme lac. Aujourd'hui, ces formes sont toujours contenues dans ces groupes syndicaux. Donc, si je double-clique sur la forme elle-même, je peux toujours accéder à mon calque d'ellipse et de rectangle ici. Et je peux toujours les déplacer. Donc, si je le déplace et que je le place ici dans le coin , puis que je sors en cliquant dessus ou en appuyant sur Echap, vous pouvez voir les formes maintenant modifiées. Et c'est toujours un mouton. Bien que je puisse toujours accéder à ces couches individuelles, qui sont super cool. Cela nous permet de créer des formes uniques qui doivent être créées à partir d'une combinaison de formes multiples ou de multiples ellipses, carrés, triangles, etc. Cool. Maintenant, je vais à Command Z pour annuler cela plusieurs fois. Et maintenant, nous avons nos formes en deux couches différentes comme avant. Maintenant, si nous faisons l'autre chemin qui s'appelle Soustraire, cela fera exactement le contraire. Cela va aller de l'avant et en fait soustraire et supprimer toute partie partagée entre ces formes. Donc parce que le cercle et le carré avaient cette petite zone de demi-cercle comme espace partagé entre eux. Il est parti de l'avant et supprimez cela des formes combinées où il obtient des formes soustraites. Même chose avec la soustraction. Vous pouvez toujours y aller et modifier votre forme pour créer différents types de soustractions. Bien sûr, si je retire complètement ce cercle du carré, il n'y aura pas de soustraction car il n'y a aucun endroit où ces deux formes se combinent. Ainsi, pour que les options booléennes fonctionnent, vos formes doivent se chevaucher, sinon il n'y a rien à ajouter ou à soustraire. Je vais donc l'annuler plusieurs fois, revenir à mes formes, puis nous allons essayer l'intersection. Ce que fait Intersect, c' est qu'il va aller de l'avant et trouver la région partagée entre ces deux formes. Donc, si je reviens en arrière, comme vous pouvez le constater, cette petite zone est celle que les deux formes se chevauchent. Nous allons donc aller de l'avant et nous allons simplement appuyer sur Command Shift Z ici pour refaire cela. Ainsi, comme vous pouvez le constater, elle va combiner ces deux-là et trouver la zone où ces formes croisent et créera une forme unique comme celle-ci , que je peux toujours modifier. Défaisons cela et revenons à l'objet. Explorer, exclure le chevauchement, ce qui fera le contraire de l'intersection. Il va chercher la zone partagée et la supprimer de la nouvelle forme. Chemin finalement converti. Nous allons aller de l'avant et convertir ces deux formes en un chemin, c'est ce que nous avions avec ce genre de diamant ici. Maintenant, si je double-clique sur mon cercle, je peux modifier chaque nœud. Et je peux créer des formes vraiment uniques à partir de mes moutons préexistants auxquels il avait accès auparavant. N'oubliez pas que pour accéder à ces nœuds, vous devez double-cliquer sur votre forme. Et ensuite, allez de l'avant et peaufinez cette forme. Si vous n'êtes pas à l'intérieur du chemin et que rien ne changera. Vous devez donc vous assurer à l'intérieur du chemin lui-même. Et ce que vous faites, c'est qu' une fois que vous êtes à l'intérieur du chemin, vous pouvez modifier chaque nœud. Commandons un tas de fois et revenons à nos formes. Maintenant, je vais commander Z jusqu'à ce que je vois mon ellipse et mon rectangle au lieu des tracés. Enfin, le dernier point mais non le moindre est le contour du tracé de tracé d'objet. Ou vous pouvez y parvenir en appuyant sur Shift Command O. Et ce que cela va faire, c'est nous avons maintenant les bordures et les formes. Ou si vous revenez en arrière, comme vous pouvez le voir dans le panneau Calques, nous avons une ellipse. Nous avons ce carré, et il est intact avec sa bordure en appuyant sur Alt Command O au lieu de décaler. Donc, si vous appuyez sur Alt Command 0, vous voyez maintenant que j'ai créé un contour. Ce que ça fait, c'est que ça sépare ma frontière des moutons. L'ellipse est donc une forme distincte. Et la bordure ici est le trait, ou la bordure ici est également une forme distincte, ou un calque séparé, je dois dire. Donc maintenant, je peux en quelque sorte les déplacer et ils seront séparés les uns des autres, puis ils sont vraiment liés. Et si j'en supprime un, vous voyez que le contour est toujours là. Et si je supprime le trait ici, la forme est toujours, ou je suppose que l'ellipse ici sans son trait est là. Par conséquent, si, à un moment quelconque, vous souhaitez séparer la bordure de la forme, vous pouvez le faire en accédant à Objet, Contour du tracé. Une fois que vous avez sélectionné vos formes. Encore une fois, je vais faire Command Z plusieurs fois. Ils reprennent la parole de mes brebis. Et ensuite, il va juste aller de l'avant et séparer cela de cela. Donc, comme peu d'exercice avant de passer à partir de groupes booléens, je veux que vous alliez créer une forme similaire à celle-ci. Je suppose que c'est une forme d' haltère. Et bien sûr, utilisez vos options de chemin sous l'objet pour y parvenir en combinant plusieurs formes pour obtenir cette conception similaire. Une petite chose très soignée que je veux vous dire. Si vous souhaitez dupliquer des formes, vous pouvez toujours appuyer sur Commande D. Ensuite, nous allons créer une autre forme, une autre copie de cette forme pour vous. Un petit conseil. Si vous essayez de dupliquer ce petit ovale et de le placer ici. Donc oui, je vais laisser ça comme un petit exercice pour vous et ensuite nous le ferons ensemble lors de la prochaine conférence. 13. Solution d'exercice des options booléennes: Très bien, alors comment créer cette forme à l'aide de nos outils booléens ? En fait, ce n'est pas si difficile. Vous avez simplement besoin de trois formes , puis vous allez les joindre ensemble ou les ajouter ensemble à l'aide de l'outil booléen. J'ai donc deux ellipses ici et un rectangle pour la partie centrale ici. Je vais donc aller de l'avant et supprimer celui-ci et le refaire. Alors commençons par créer nos ellipses. Je vais donc appuyer sur E, créer une ellipse. Je suis un peu comme ça. Largeur et hauteur. Il n'est pas nécessaire que ce soit exactement comme ça. fais juste pour le bien de la solution d'exercice ici. Ensuite, vous pouvez utiliser la commande D pour dupliquer cette ellipse. Et ensuite, aller de l'avant et le déplacer de ce côté, ici. Et créons un rectangle en appuyant sur R. Et créons un rectangle pour relier ces deux ellipses ensemble. Cool, fuyez de là en utilisant sa clé d'échappement. Nous allons maintenant sélectionner toutes les formes ensemble. Assurez-vous que les trois sont sélectionnés. Juste ici. Allez dans le chemin de l'objet et vous l'avez deviné, ajoutez. Vous pouvez également utiliser l'option de commande. Vous l'avez fait. Maintenant, nous avons une forme ou une union bon marché qui combine les trois formes. Et je peux même aller de l' avant et changer le remplissage pour lui donner ce que j'aime Phil et faire un peu d'accord ici. Vous pouvez même aller de l'avant et retirer la bordure si vous ne le souhaitez pas. Cool. C'est ainsi que nous utilisons le groupe booléen pour créer une forme d' haltère semblable celle-ci. Nous avons besoin de savoir de quoi il s'agit. En ce moment, je ne fais que concevoir cette forme en dehors de mon tableau d'art. Ainsi, tout ce que vous avez conçu en dehors de votre plan passera sous cette partie des couches. Je peux y retourner et voir tout ici, toutes mes planches artistiques. Ou cliquez sur cette plaque pour voir tout ce qui est en dehors de moi. Plans de travail. Cool. Maintenant que nous connaissons une certaine connaissance des formes et de la création de formes, les avons jointes et utilisons le panneau des propriétés pour les modifier. Lorsque nous reviendrons dans la prochaine conférence et travaillons avec du texte. 14. Ajouter du texte: Il est enfin temps d'explorer notre outil de texte dans XD. L'outil de texte nous permet donc essentiellement, comme son nom l'indique, d' ajouter du texte à notre conception. Donc, à tout moment, je peux appuyer sur la touche T mon clavier ou simplement accéder à cette option de texte ici. Ensuite, allez de l'avant et cliquez n'importe où sur mon plan de travail pour ajouter du texte. Vous pouvez aller de l'avant et commencer à taper. Donc, je vais juste lire c'est un exemple de texte de point. Et à tout moment, vous pouvez simplement cliquer sur Echap pour obtenir une zone de texte ou simplement cliquer ailleurs en dehors de votre zone de texte. Allons de l'avant et revenons simplement à notre outil Select. Et maintenant, comme vous pouvez le voir, je vais juste faire défiler. Nous avons ce texte ici. Et toutes les propriétés sont répertoriées dans ce panneau de propriétés ici. Il s'agit donc d'un texte avec la nouvelle police helvetica. Il est actuellement de 20 pixels en termes de taille de police et son poids de police est normal. Et bien sûr, nous pouvons changer ou faire défiler la police en faisant défiler les polices que nous avons ici. Ce sont les polices que j' ai installées sur ma machine. Il peut donc être différent du vôtre. Si, à un moment donné, vous souhaitez installer de nouvelles polices, vous pouvez simplement installer de nouvelles polices et elles doivent être chargées sur votre XD sans problème. Et au début de notre projet, nous explorerons du texte personnalisé et installerons également de nouvelles polices. Pour l'instant, je vais juste la changer pour cette autre police, Avenir Next ou comment vous n'avez pas à le faire. Je vous montre simplement les propriétés textuelles auxquelles vous avez accès. Je peux donc changer ces 20 pixels à 50. Et je vais aller de l'avant et agrandir mes textes. Comme vous pouvez le voir. Je peux changer sa façon de faire. Ils peuvent le rendre italique, ultraléger. Vous le rendez audacieux, lourd, ainsi de suite. Désormais, ces options seront différentes fonction de la police que vous avez installée et des poids de police que vous avez installés pour cette police sur votre ordinateur. Toutes les polices peuvent donc ne pas avoir autant d'options. Certains d'entre eux ont peut-être le ballon régulier, et certains d'entre eux pourraient avoir le médium. Cela peut donc être différent en fonction police que vous avez installée et de celle que vous utilisez. À partir de là, nous pouvons ajuster l'espacement des lettres. Donc, si je mets 10 pixels, cela augmentera l'espacement entre chacune des lettres. Et il y en a donc de très visibles. Mais si je fais 50 ans, vous pouvez commencer à voir que le texte commence à s' étaler davantage, c'est à s' étaler davantage l'espacement entre chaque lettre. Je peux revenir en arrière, régler ça à 0. Maintenant, c'est pour la hauteur de votre ligne, car instant, nous n' avons qu'une seule ligne. Vous ne verrez pas vraiment que cela fasse la différence. De même, c'est pour mon espacement de paragraphes, mais parce qu'il ne s'agit que d'un texte brut, qui signifie qu'il s'agit simplement d'un texte qui se trouve sur une seule ligne. Nous ne verrons pas vraiment ces options. Beaucoup d'autres choses sympas auxquelles vous avez accès. Vous pouvez aller de l'avant et rendre votre texte entièrement en majuscules et en minuscules. Vous pouvez créer une case de titre. Ainsi, chaque lettre ou chaque mot première lettre devient majuscule. Vous pouvez exposer ou indice vos textes sous-jacents, et même y ajouter une frappe. Voici donc quelques fonctionnalités intéressantes auxquelles vous avez accès quand il s'agit de texte. Tout le reste est à peu près identique aux formes. Nous avons donc notre apparence ou notre transparence. Nous pouvons changer le remplissage ou la couleur des textes réels ici et lui donner un joli bleu. Nous pouvons encore y ajouter une bordure. Nous pouvons même y aller de l'avant et ajouter des ombres. Maintenant, une chose que je tiens à noter est que lorsque vous avez un point x comme celui-ci, si vous voulez le modifier, vous pouvez simplement double-cliquer dessus et il vous permettra simplement de modifier votre texte. Maintenant, si je continue à taper et encore, comme vous pouvez le voir, les textes continueront à continuer sans espacement. Le texte va donc continuer et encore car il s'agit d'un point x. Au point x , il n'y a pas vraiment d'espacement. Techniquement, vous pouvez appuyer sur Entrée. Je suis à certains moments pour créer plusieurs lignes, mais il n'y a pas de meilleure pratique car au fur et à mesure que vos textes s'adaptent, ils ne seront pas très uniformes. Donc. Je vais vous montrer exactement comment vous pouvez également créer des textes de type paragraphe. Une des fonctionnalités intéressantes que si vous voulez agrandir votre texte sans modifier la taille de la police ici, vous pouvez faire agrandir votre texte sans modifier la taille de la police ici, glisser cette petite note ici et la faire glisser vers le bas ou vers le haut pour une taille de police plus petite ou inférieure pour une police plus grande. Et comme vous pouvez le voir sur la bonne taille, ce nombre change. Je vais juste ramener ça à 50 pixels. Et allez-y et supprimez simplement cette partie supplémentaire et appuyez sur Supprimer et échapper de là. Il s'agit maintenant d'un exemple de balise ponctuelle. Maintenant, erreur lors de la création d'une enveloppe de texte ou d'un texte de paragraphe, vous pouvez simplement appuyer sur la touche T votre clavier et, au lieu de cliquer sur cette ligne, il suffit d'aller de l'avant et de faire glisser, comme vous le feriez glisser avec un la forme où vous souhaitez que votre paragraphe se trouve ou que votre enveloppe de texte se trouve. Donc, si je vais ici maintenant, j'ai une zone de texte que je peux simplement aller de l'avant et commencer à taper. Et au fur et à mesure que je tape, vous pouvez voir que cela va aller de l'avant et entrer dans une nouvelle ligne basée sur cette forme ou cadre que j'ai créé pour mon texte. C'est donc comme ça que vous créez ce texte de paragraphe. Et maintenant, si je saute de là, je peux aller de l'avant et augmenter cela en termes de largeur. Je peux donc avoir une zone de texte plus longue. Je peux faire la même chose ici en augmentant la hauteur. Donc, si à un moment donné mes textes vont en quelque sorte à la hauteur, ils peuvent être cachés, donc je devrai aller de l'avant et m' assurer que ma hauteur correspond ce texte afin qu' aucun Texas ne soit caché ou ne reste. hors de cette zone de texte. Assurez-vous donc que lorsque vous ajoutez du texte dans vos projets, d'autres choses intéressantes auxquelles vous avez accès, les textes qui vont passer. Nous avons donc maintenant une hauteur de ligne que nous pouvons modifier. Par conséquent, si vous définissez cette valeur sur 200, vous verrez que la ligne ou l'espacement entre chaque ligne a augmenté à 200 pixels. Je pense que par défaut, c'était 68. Alors allez-y et maintenez-le à 68 ans. Vous avez de nouveaux paragraphes, vous pouvez modifier l' espacement ici. Donc, si vous faites 50 pixels, oups, 50 pixels. Et je vais passer à un nouveau paragraphe. Comme vous pouvez le voir avec chaque nouveau paragraphe, cela me donnera un espacement de 50 pixels entre eux. Maintenant, parce que nous avons une taille fixe, je vais devoir ajuster ma zone de texte en fonction de la taille du texte. Mais si je fais de la hauteur automatique ici, qui va de l'avant et ajuste hauteur de mes zones de texte en fonction de la durée du texte entier, le texte à l'intérieur de cette zone de texte est. Comme vous pouvez le voir, la hauteur est verrouillée car elle est maintenant en hauteur automatique. À tout moment, je peux revenir à une hauteur fixe et ensuite lui donner ma propre hauteur. Je suis sûr que je veux lui donner une hauteur spécifique. À tout moment, je peux aller de l'avant et aussi faire de la largeur automatique. Ce serait donc la même chose, mais en termes de largeur. Vous pouvez donc choisir une largeur automatique ou une hauteur automatique. Donc, si vous souhaitez modifier dynamiquement la largeur de la zone de texte ou la hauteur. Vous pouvez choisir cela en conséquence. Ou encore, vous pouvez choisir une taille fixe si vous savez spécifiquement que votre zone de texte a besoin de cette largeur et de cette hauteur. C'est ainsi que nous ajoutons du texte à nos projets. 15. Regroupement de couches: Alors que nous commençons à ajouter de plus en plus de choses à l'intérieur de notre tableau d'art, cliquez ici pour que nous puissions voir sur notre panneau Calques, choses commenceront à devenir assez occupées ici et assez mouvementées si vous Je ne veux pas, faites-les regrouper. C'est pourquoi, dans notre panneau Calques, nous pouvons regrouper des éléments qui ne sont pas pertinents. que plus tard, certains objets appartiennent à un groupe et que nous puissions apporter des modifications facilement et savoir exactement ce qui appartient à Y. Donc, dans ce cas, il n'est peut-être pas logique de regrouper tout ensemble parce que nous avons vraiment expérimenté les outils d' un mouton et les outils de texte. Nous n'avons pas vraiment de relation entre ces choses. Mais créons simplement un autre tableau d' art en appuyant sur un plan de travail ici. Je viens de créer un autre plan de travail et je vais cliquer sur Escape pour sortir de cet outil. Pour une raison quelconque, il a créé ce tableau d'art ici. Je vais supprimer celui-là. Donc oui, au lieu de mon plan de travail, je vais juste créer des rectangles. Maintenant. Je vais faire un rectangle C comme ça. Ensuite, je vais appuyer sur la touche T mon clavier et écrire un titre. Et peut-être, et allez-y et dupliquez celui-ci en utilisant la commande D. Et je vais appuyer sur V et revenir dans mon outil de sélection et peut-être changer cela en description. Et peut-être que je veux les inclure dans mon genre de carré ici et je vais créer un autre rectangle ici. Nous pouvons donc utiliser ce type de mise en page pour peut-être mettre des images à l'intérieur et les utiliser comme une sorte de cartes. Et notre conception était essentiellement une organisation de certaines choses telles que la description, un titre et un tas d'images, disons. Donc maintenant, ces choses sont un peu pertinentes ou liées ensemble. Ce que nous pouvons faire, c'est que nous pouvons aller de l'avant et les sélectionner tous. Et nous pouvons nous assurer que dans notre panneau de calque gauche ici, nous avons tout sélectionné. Encore une fois, vous pouvez également sélectionner des éléments à partir d'ici. Nous pouvons cliquer sur l'objet le plus haut ici, puis aussi descendre jusqu' à l'objet inférieur. Et tout en maintenant la touche Maj enfoncée, si je clique, elle va sélectionner tout ce qui se trouve entre mon premier et mon dernier calque ici, n'est-ce pas ? La plupart des couches supérieures et inférieures. Et ensuite, si je clique sur Commande G ou Control G sous Windows, cela va aller de l'avant et placer ces objets à l'intérieur d'un groupe. Bien sûr, vous pouvez également le faire en accédant à Objet et en cliquant sur Grouper. Donc maintenant ces objets appartiennent réellement à ce groupe, un ici, je peux le voir dans ma liste. Et maintenant, si je déplace ça ici, tout ça va ensemble parce qu'il fait partie d'un groupe. Maintenant, ce n'est pas parce que les choses font partie d'un groupe que je ne peux pas les modifier individuellement. Donc, si je veux toujours modifier mon titre ici, voyons que je peux toujours double-cliquer sur le groupe, puis sélectionner le titre ici. Une autre astuce est que si nous sommes à l'intérieur de notre groupe ici, si je veux sélectionner rapidement quelque chose à l'intérieur, au lieu de double-cliquer pour entrer dans le groupe, je peux simplement aller de l'avant et tenir Commandez, puis cliquez sur ce que je veux. Cela fait la même chose. Et nous pouvons aller de l'avant et, par exemple, optimiser ce titre à une autre chose que nous faisons, l'en-tête, ne sait pas. C'est ainsi que vous créez réellement des groupes dans XD. Maintenant, bien sûr, mon groupe ici a un nom de groupe un en ce moment. Mais si je vais de l'avant et que je clique sur ce groupe 1 ou que je double-clique dessus, je peux en fait aller la tête et lui donner un nom. Je peux donc le nommer dans le panier. Nous savons maintenant ce que possède exactement ce groupe. Et à tout moment, si vous souhaitez voir le contenu plutôt qu'un groupe, vous pouvez simplement cliquer sur cette petite icône de dossier ou cliquer à nouveau dessus pour masquer les calques contenus dans ce groupe. Des choses chimiques. Nous utilisons cette option de hauteur ici. Je peux aller de l'avant et juste le cacher complètement de mon plan de travail. Cela est donc utile si vous travaillez avec quelque chose où deux couches, voyons, vous êtes au-dessus de l'autre ou que vous êtes sur des groupes différents sont au-dessus de l'autre et que vous voulez simplement vous concentrer sur l'un l'autre. Ensuite, vous pouvez continuer et cliquer à nouveau dessus pour les afficher. Vous pouvez verrouiller cette couche en place. Donc maintenant, si je reviens à mon design, je ne peux pas vraiment y apporter de changement. Et si je vais ici, vous voyez qu'il y a une petite icône de verrouillage et je peux cliquer dessus, puis la déverrouiller à nouveau, ou je peux faire la même chose à partir d'ici. Et vous pouvez également marquer des objets à exporter. Disons donc que je veux exporter tout ce groupe. Je peux aller de l'avant et l'exporter à partir d'ici, ou le commercialiser pour les exportations, de sorte qu' une fois que nous serons prêts à exporter, il sera inclus dans notre exportation par lots. Et vous pouvez également voir que cette petite icône de coche s'affichera ici lorsque nous l'aurons marqué pour l'exportation. Mais bien sûr, nous allons explorer l'exportation lors de futures conférences. C'est donc essentiellement comme ça que vous regroupez les choses dans vos conceptions. Et à tout moment, si vous allez de l'avant et touchez Maj Command G, ils iront de l'avant et dissocieront tout le groupe ici. Et maintenant, je vois que je reviens à ma mise en page précédente où je n' ai que mes calques sans qu' ils soient dans un groupe. Donc maintenant, si je bouge les choses, ils n'auront aucun lien entre eux et ils ne bougeront plus ensemble. Encore une fois pour regrouper des éléments, sélectionnez tout ensemble et appuyez sur Commande G ou Control G sous Windows. Et cela va regrouper les choses ensemble. À titre d'exemple, si vous vous en souvenez, nous avons joué avec cette grille de répétition. Vous pouvez maintenant voir à quel point ce sera utile si nous répétons réellement un groupe. Par exemple, supposons que nous ayons une application et que nous voulons que plusieurs cartes apparaissent avec différentes images et textes différents. Nous pouvons réellement le faire et nous pouvons même les reproduire horizontalement. C'est donc une chose soignée que nous pouvons faire avec une grille de répétition. Et nous allons certainement l' utiliser dans nos créations. Appuyez deux fois sur la commande Z. Je vais juste annuler ça et dissocier la grille ici. Revenons simplement à l' avoir en groupe. Et oui, c'est ainsi que vous regroupez les objets et organisez vos objets au sein de XD. 16. Les grilles: Alors, de quoi avons-nous besoin de grilles dans nos conceptions ? Eh bien, en utilisant des grilles, nous pouvons en fait aller de l'avant et aligner les objets et les placer en conséquence de manière plus organisée tout au long des plans de travail. En cliquant sur n'importe quel plan de travail, vous pouvez aller de l'avant et accéder ces options de grille dans le panneau des propriétés situé sur le côté droit ici. Et nous avons deux types de grilles. Nous disposons d'une grille de disposition et d'une grille carrée. Et nous allons rapidement passer en revue ceux de cette conférence. Pour utiliser une grille, vous pouvez aller de l'avant et cliquer sur cette petite case à cocher ici. Ensuite, nous allons créer une grille pour nous. Et maintenant, il s'agit d'une grille de colonnes qui comporte 12 colonnes ou tableau d' art avec une largeur de gouttière de 16 pixels entre chaque colonne, largeur de colonne de 221 pixels. Et ici, c'est notre marge sur les côtés ici. Donc, le côté gauche que le côté droit. S'il a dit cela à 0, il ira de l'avant et supprimera cette marge et créera une colonne uniformément espacée. On peut augmenter ou une gouttière à, disons 50 pixels. Il y a donc maintenant plus d'espacement entre nos grilles ou nos colonnes de grilles. Nous pouvons augmenter ou diminuer notre nombre de colonnes, etc. Désormais une valeur par défaut dans le type de conception Web, 12 colonnes est assez typique. On va donc revenir à 12, 16 et 243 et ajouter une marge de 100 sur les côtés. Donc, si vous étiez dans cette nouvelle audience facultative, vous pouvez réellement définir les marges gauche et droite ensemble, mais vous pouvez également passer à cette option si vous le souhaitez. Marges personnalisées de chaque côté, du haut, du côté droit, du bas et du côté gauche. Mais généralement, nous faisons simplement le côté gauche et droit comme ceci parce que nous voulons un espacement entre les coins gauche et droit. Ensuite, nous pouvons aller de l'avant et aligner nos objets nos grilles afin de créer une sorte de mise en page organisée. Et nous savons exactement combien d'espacement nous utilisons entre chaque objet. Maintenant, une chose intéressante est que pendant que vous travaillez avec des objets ici, et cela vous montrera cette petite boîte rose entre vos objets pour vous montrer que vous avez un espacement uniforme. entre ces trois objets ici. Ou je devrais dire des groupes, ce qui est plutôt cool. Encore une fois, des grilles qui nous aideront à aligner uniformément nos objets tout au long de notre conception. Et au fur et à mesure que nous travaillons sur notre projet, vous verrez que nous utilisons des grilles de temps en temps afin de nous assurer que tout est aligné et distribué correctement dans nos conceptions. Maintenant, si la couleur bleue ici est un peu distrayante, nous pouvons aller de l'avant et cliquer sur ce petit remplissage et diminuer la transparence des colonnes afin qu'elles soient plus cachées et qu'elles n' interfèrent pas. avec nos créations. Et à tout moment, nous pouvons aller de l'avant et simplement l'éteindre. Et maintenant, nous voyons que nos objets sont bien plus joliment et bien organisés dans nos plans de travail. L'autre type de grille est une grille carrée. Et essentiellement, c'est un peu comme une grille et grille uniformément carrée traversent ce design. Nous pouvons aller de l'avant et changer la taille carrée ici. Vous pouvez y arriver, disons 50. Ainsi, vous avez maintenant un type de grille différent où les lignes horizontales et verticales sont toutes uniformes. Vous pouvez donc utiliser une racine carrée si vous souhaitez un alignement plus spécifique. Surtout si vous assemblez peut-être une icône ou quelque chose qui nécessite plus de détails en termes d'espacement. Sinon, nous utilisons généralement une grille de mise en page. En ce qui concerne les applications Web et mobiles, vous pouvez toujours l' activer et le désactiver à nouveau, comme je l'ai mentionné ici. Si, à un moment donné, vous souhaitez utiliser cette grille comme grille par défaut, vous pouvez faire de cette grille la grille par défaut. Et donc de cette façon, si je fais quelques changements, disons 20 grille. Et je veux utiliser une grille personnalisée ici. Et je le veux, disons maintenant que je veux revenir à cette grille par défaut. Je peux toujours cliquer sur la valeur par défaut des États-Unis. Et je vais revenir aux paramètres de ma grille par défaut que j'ai définie, ce qui est très pratique. C'est ainsi que vous utilisez les grilles dans Adobe XD. Et la prochaine conférence, nous explorerons comment aligner et distribuer nos objets sur ses tableaux artistiques. 17. Alignement et distribution: Maintenant que nous savons comment utiliser nos grilles pour mieux aligner les choses à l'intérieur de notre tableau d'art. Je vais également vous montrer les fonctionnalités d'alignement et de distribution dans XD, car plus souvent, nous allons utiliser ces fonctionnalités pour aligner nos objets dans nos conceptions. Pour démontrer, je vais simplement cliquer sur la touche a de mon clavier et dessiner un autre plan de travail ici. Dans le but de vous montrer comment fonctionne la distribution et l'alignement. Vous n'êtes pas obligé de suivre cette étape si vous ne le souhaitez pas, mais je l'encourage pour que vous compreniez le fonctionnement de nos outils d'alignement. Maintenant, en utilisant la touche R, je vais utiliser mon outil rectangle pour créer des rectangles, varier aléatoirement dans mon design et créer cinq rectangles. Et je vais juste aller de l'avant et m' échapper de ce rectangle deux. Et en maintenant la touche Maj enfoncée, je vais cliquer sur tous mes rectangles. Et juste pour que vous puissiez mieux le voir, je vais leur donner le plein d'accord ici. Cool. Nous avons donc maintenant un tas de rectangles qui sont tous très inégalement espacés dans mon tableau d'art. Laissez-moi juste zoomer ici pour que vous puissiez mieux le voir. Tout d'abord, si vous avez sélectionné un objet, peu importe qu' il s'agisse d'un rectangle ou d'une zone de texte ou quoi que ce soit du genre. Mais à l'aide de la touche Alt de votre clavier, vous pouvez réellement voir l'espacement de cet objet dans votre plan de travail. Par exemple, ce rectangle est situé ici à 270 pixels du haut, 1185 pixels à partir du bas ici, 5, 11 pixels à partir de la droite et 2551 pixels à partir de la gauche. Et vous pouvez répéter ce processus. Ainsi, non seulement vous pouvez voir l'espacement entre cet objet et son tableau d'art, vous pouvez également voir l'espacement entre cet objet et un autre objet simplement en maintenant ancien et en surmontant un autre objet. . De cette façon, vous pouvez voir quel est l'espacement entre chaque objet différent. Et au fur et à mesure que vous passez par là, vous remarquerez que mes objets ne sont pas uniformément espacés du tout. Ils sont très espacés au hasard. C'est donc là que les caractéristiques d'une femme sont utiles dans XD. Donc, en cliquant, en faisant glisser et en sélectionnant toutes mes formes ici, vous devez sélectionner toutes vos formes ou celles que vous souhaitez aligner en fonction de votre tableau d'art. Ensuite, en utilisant ces outils ici, nous pouvons essayer différentes fonctionnalités d' alignement. Le premier est donc aligné pour taper je clique dessus. Xd va de l'avant et alignera tous ces rectangles sur le calque le plus haut entre ces objets. Donc, si je l'annule simplement, parce que le calque le plus haut est ce rectangle ici. Dans tous les rectangles sélectionnés , des objets sont sélectionnés. Xy va aller de l'avant et pousser tous ces rectangles pour correspondre à celui-ci ici, puisque celui-ci est au plus haut niveau. De même, si je fais celui-ci ici même, il va faire la même chose, mais au milieu de toute ma boîte parentale ici. Nous allons donc aller de l'avant et les aligner verticalement au milieu. Si je l'annule et que je le fais en fin de compte, nous allons faire de la même manière ce qu'il a fait avec l'onglet aligné, mais en bas, jusqu'à l'objet inférieur, qui était celui-ci ici. En utilisant cette option, je peux aller de l'avant et distribuer tous mes objets horizontalement. Cela signifie donc que XD va de l'avant et créera espacement homogène entre tous mes objets. Donc maintenant, si je clique sur un et que je vérifie l'espacement en maintenant Alt enfoncé, je peux voir qu'il a un espacement de 450 pixels environ entre chaque objet. Et maintenant, si je les sélectionne tous à nouveau en faisant simplement glisser tous les objets ici, je peux aussi faire une chose très similaire appelée distribuée verticalement. Cela va donc aller de l'avant et répartir tous mes objets sont verticalement afin qu'ils aient un espacement vertical similaire entre eux. Et ce sont les alignements horizontaux. Donc aligné à gauche, nous allons aligner tous mes objets le côté le plus gauche de cette sélection parent là-bas. Donc, tout ce genre de vue parent que nous avons sur les objets, le point le plus à gauche serait ici. Nous allons donc aller de l'avant et pousser tout jusqu'à ce point là-bas. Si je fais du milieu, ça ira de l'avant et poussera tout au milieu de cette boîte. Et puis, comme on peut s'y attendre avec la ligne droite, tout sera aligné sur l' objet le plus approprié de ma sélection. Encore une fois, il faut noter que tout est aligné par rapport à ce que vous avez sélectionné. Donc, si je n'ai que ceux-ci, disons que trois objets sont sélectionnés, et que ces fonctions fonctionneront différemment en fonction de ce que j'ai sélectionné. Et si vous voulez juste aligner tous ces éléments ? Toute la sélection ici horizontalement dans mon plan de travail sera, si je les sélectionne tous ensemble et que je fais glisser, par défaut, XD se mettra en place lorsque je suis au milieu horizontalement, et de même lorsque nous sommes au milieu verticalement. Maintenant, tout ce conteneur parent est aligné au milieu de mon plan de travail, verticalement et horizontalement. C'est donc votre alignement et votre distribution dans XD. Et la prochaine conférence quand elle reviendra et explorez certains de nos kits d'interface utilisateur filaire qui faciliteront beaucoup la conception dans XD. 18. Kits d'UI Wireframe: J'espère que vous êtes familier. J'espère que vous vous familiariserez avec XD. Maintenant, nous sommes presque prêts à lancer notre projet. Et ce sera évidemment la partie la plus amusante de tout le parcours. J'ai donc hâte de commencer avec toi là-dessus. Mais avant de nous lancer et de le faire, dans la section suivante, alors que nous avions commencé nos conceptions brutalement en utilisant enfants filaires fournis par Adobe XD, qui sont très utiles. Et vous verrez pourquoi en une seconde. Que devriez-vous aller dans le fichier dans votre option de menu et cliquez sur Obtenir des kits d'interface utilisateur. Une fois cela fait, XD va réellement ouvrir votre navigateur. Et il devrait vous placer sur une page comme celle-ci. Si vous n'êtes pas sur cette page, vous pouvez simplement faire une pause ici et assurez-vous de suivre ce lien ici. Mais vous devriez être redirigé vers cette page par défaut. Et donc, que sont les kits d'interface utilisateur ? Eh bien, les kits d' interface utilisateur sont essentiellement des enfants d'interface utilisateur qui ont déjà été mis en place par d'autres concepteurs pour XD, sorte que vous pouvez réellement les utiliser dans vos conceptions pour accélérer votre processus de conception. Ce que cela signifie donc que des entreprises comme Apple, Google, Amazon, etc. ont créé ces frameworks, framework de conception afin que vous puissiez réellement aller de l'avant et obtenir ces enfants. Et donc, au lieu de devoir réinventer ou redessiner une barre de navigation comme celle-ci ici, vous pouvez en fait aller de l'avant et simplement utiliser celle-ci dans vos conceptions, ce qui est essentiellement ce que font la plupart des designers afin d'imiter ce à quoi ressemblera l'application dans un iPhone ou une application iOS. C'est vraiment important car j'ai vu des designers les redessiner ou les recréer à partir de zéro. Mais cela ne sert vraiment à rien car ils sont disponibles gratuitement à partir de votre site Web XD UI Kit. Donc, que vous conceviez un projet Bootstrap pour le Web ou que vous mettiez en place une application pour Android. Vous pouvez toujours aller de l'avant et utiliser l'enfant pour accélérer votre processus de conception. Et bien sûr, nous l' utiliserons dans la section suivante pendant que nous travaillerons sur notre application mobile. En vous donnant juste une idée de comment cela fonctionne, je vais aller de l'avant et obtenir le kit sur le design Apple. Selon le moment où vous regardez cela, ces enfants peuvent être différents ou avoir l'air différents. Ne paniquez donc pas si vous ne voyez pas exactement le type de kit que nous voyons ici, ou si ces images peuvent être différentes. Et en fonction de ce qu' iOS est sorti à l'époque. Nous allons donc cliquer sur obtenir le kit, ce qui nous amènera sur le site Web d'Apple. De là, nous avons accès aux kits OS iOS et iPad, que nous pouvons télécharger à l'aide cette petite icône ici pour dialoguer. Maintenant, il s'agit d'un fichier un peu volumineux, donc le téléchargement peut prendre un certain temps, alors soyez patient. Je vais prendre son temps. Et il finira par s'ouvrir. Il suffit de faire une pause ici si nécessaire. Si vous utilisez un Mac, passez par le processus de configuration habituel. Et vous devriez alors pouvoir voir ce petit dossier ou ce petit dossier, je dirais. Et une fois que vous l' aurez ouvert, vous obtiendrez ce modèle de conception pour iPad. C'est pour iPhone, je crois. Et enfin, c'est pour vos textiles. C'est celle qui nous intéresse si nous concevons une application iPhone. Nous allons donc cliquer sur les modèles de conception, les composants, les guides et le tableau de bord iPhone dot TXT. En double-cliquant dessus, XD va l'ouvrir. Maintenant, si vous êtes invité à accéder à la touche X pour ouvrir des fichiers à partir des téléchargements, continuez et cliquez sur OK. L'ouverture de ce fichier peut prendre un certain temps , alors soyez patient. Mais une fois qu'il est chargé, il devrait ressembler à ceci. Donc, avec mon modèle de conception ouvert, je peux simplement aller de l'avant et voyons, je travaille à ajouter peut-être une vue d'activité contrôlant celle-ci ici. Je peux simplement copier celui-ci en cliquant dessus et en cliquant sur Contrôle ou Commande C, ou Contrôle C sous Windows. Revenons à mon projet, puis collez la fin où je veux. Bien sûr, pour l'instant, nous ne travaillons pas sur un iPhone. Les applications ne sont pas aussi pertinentes. Mais une chose que je tiens à noter est que lorsque vous importez ou collez quelque chose d'un autre fichier, vous pouvez obtenir cette police manquante. C'est simplement parce qu'Apple utilise certaines polices à l'intérieur du design que nous n'avons pas sur notre machine. C'est donc là que nous obtenons cette petite police manquante. Mais vous pouvez tout à fait aller de l'avant et trouver ces fichiers et les installer et cette erreur devrait disparaître. Alors, ne paniquez pas si vous obtenez quelque chose comme ça. C'est généralement la raison pour laquelle cela se produit. C'est ainsi que vous utilisez essentiellement les kits d' interface utilisateur pour accélérer votre processus de conception. Et cela n'a peut-être pas beaucoup de sens pour le moment, mais une fois que nous commencerons à travailler sur notre projet, vous verrez à quel point il sera utile. 19. Raccourcis de zoom: Je n'arrête pas de dire que nous allons arriver au projet principal sur lequel nous allons travailler et nous continuons à revenir à l'introduction, mais c'est presque fini. Il s'agit en fait de la dernière conférence de cette partie de la section. Mon objectif ici est de m' assurer que vous connaissiez suffisamment le logiciel avant de vous le logiciel avant de vous lancer dans un grand projet. Mais bien sûr, nous allons le faire étape par étape tout en continuant à apprendre. L'idée n'est pas de mémoriser tout ce dont nous parlons tout au long de ces conférences, mais de le faire suffisamment avec la pratique que cela devienne naturel pour vous. C'est vraiment la meilleure façon de comprendre que ces logiciels de conception ou tout autre logiciel en général fonctionnent quand il s'agit de l'apprendre. Très bien, donc assez en parlant de ça, parlons de zoom. Comme je l'ai mentionné, nous allons explorer le zoom dans XD. Le moyen le plus simple d'accéder à l' option Zoom est d'accéder à l' affichage et à votre menu. Nous avons donc un tas d'options allant de 100 %, ce qui nous montrera la taille réelle de ce projet. Donc, vous savez, si ce projet était 100 %, c'est ce que l'utilisateur verra réellement. C'est donc un peu comme la taille réelle si vous voulez y penser de cette façon, alors quand vous avez besoin de 100 pour cent, ce qui est bien sûr même un zoom plus élevé. Et maintenant, ce ne sont que des préréglages, mais ce sont les plus intéressants, dont la commande 0 ira de l'avant et intégrera tout ce que vous avez, tous vos plans de travail dans toute la vue. Et c'est pour accéder à ces derniers de 100 % à 100 % et de s'adapter à toutes les options. Vous pouvez également effectuer la commande 1 pour une valeur de 100 % engagée sur quatre à une commande 0 à 100 % afin de répondre entre 0 pour tout intégrer. À tout moment, vous pouvez également effectuer Command plus et moins si vous souhaitez effectuer un zoom avant et arrière un peu. Si vous voulez zoomer sur une section spécifique, disons que je veux zoomer sur ce petit objet d'haltères ici. Je peux appuyer sur le Z de mon clavier, puis dessiner un petit rectangle autour de lui et il va zoomer sur cette zone. Je vais au Commandement 0 pour annuler cela. Une autre astuce est que si nous travaillons, disons le tableau d'art, quel que soit le choix que j'ai sélectionné, je peux aller de l'avant et cliquer sur Afficher, zoomer sur la sélection. Ou il peut faire la commande 3. Et nous allons aller de l'avant et zoomer sur ce que nous regardons exactement. Donc, si c'est le cas, disons que ce groupe sélectionne et clique sur Commande 3. Et nous allons aller de l'avant et zoomer exactement sur ce groupe. Ce qui est génial si vous travaillez avec, disons, juste un certain design. Vous voulez, vous savez, vous concentrer sur le design et peut-être sur une certaine couche au-dessus ou être plus précis et utiliser cela. Et ensuite, revenez à un niveau de zoom de 100 % ou 200 %. Ou utilisez simplement votre pincement sur votre trackpad ou votre défilement sur votre souris pour effectuer un zoom avant et arrière manuellement. Comme ça. Et bien sûr, au fur et à mesure que je zoom avant, vous pouvez maintenant voir le changement de niveau de zoom ici. Si vous souhaitez effectuer un zoom personnalisé avec vous, le zoom vaut 25 %. Vous pouvez également y parvenir en le tapant simplement ici. Mais c'est un peu rarement utilisé pour ouais, essentiellement ce sont vos options de zoom. Et les deux plus importants dont je veux que vous vous souviez, il suffit d'appuyer sur le ZED et dessiner autour de la zone que vous voulez zoomer. Et effectuez également une sélection en cliquant sur un élément sur lequel vous souhaitez zoomer, puis en appuyant sur Commande 3. Je pense que ce sont les options de zoom les plus utilisées et elles sont très pratiques. Cela dit, passons dans la nouvelle section et commençons travailler sur notre nouveau projet de conception mobile. 20. Boulages santé : introduction du projet: Très bien, Bienvenue dans la nouvelle section. Nous sommes prêts à commencer enfin avec conception de notre application mobile. Super excité pour cette section, et je pense que vous allez adorer. Donc, avant de nous lancer dans le projet lui-même, je vous encourage à aller de l'avant et à télécharger les ressources de cette conférence. Vous devriez pouvoir trouver un fichier. Vous devriez être en mesure de trouver un dossier comme celui-ci ici, bouchées saines, des ressources d'applications mobiles. Cela inclura tous les fichiers documents et icônes que les éléments dont vous avez besoin pour concevoir cette application mobile avec nous. Prenez donc une seconde pour le télécharger, allez-y et décompressez-le et ouvrez-le. Ainsi, à l'intérieur de ce dossier, vous devriez pouvoir trouver un petit fichier comme celui-ci appelé « Healthy bites ». Allez-y et ouvrez-le depuis le dossier. Il s'agit donc essentiellement notre dossier de conception que le client nous a fourni. Ainsi, le client dans ce cas s' appelle des piqûres saines. Et le projet sur lequel nous travaillons s'appelle l' application mobile de commande d' aliments sains bouchées. Donc, si vous ne savez pas quoi donner un exposé, ce n'est pas du tout un problème. Essentiellement, un bref est ce qui nous fournit les informations initiales du projet fournies par notre client. Donc, dans ce mémoire, nous avons généralement quelque chose à propos du client, ce qui explique ce qu'il fait. Peut-être des mots-clés autour leur entreprise et de leurs projets, des buts et objectifs du projet, ce qu'ils recherchent dans ce projet. Et puis, plus en détail, vous verrez parfois une audience Slash du marché cible. C'est donc à eux qu'ils essaient de traiter ce produit 2. Cela nous permettra donc de vraiment nous assurer que lorsque nous concevons, nous concevons pour ce public cible spécifique. Parallèlement à d'autres éléments tels que les livrables du projet. C'est donc ce qu'ils recherchent que nous leur livrons à la fin de ce projet avec eux. Et puis d'autres choses telles que le calendrier, le budget, la direction qu'ils veulent prendre en termes de direction créative, peut-être qui est le principal interlocuteur dans cette entreprise, puis quelques autres notes. sont fournis par le client. Donc, ce mémoire est généralement ce qui est fourni au départ lorsque vous commencez à travailler avec des clients ou même avec une entreprise dans laquelle vous travaillez ? Mon offre quelque chose comme ça qui inclut ce qu'ils recherchent. Désormais, il peut parfois inclure plus de détails sous les livrables. Donc, maintenant, nous allons passer en revue le mémoire ici. Ensuite, lors de la prochaine conférence, nous présenterons les pages dont nous aurons besoin dans notre application mobile. Nous pouvons donc concevoir cela pour notre client. Mais parfois même ces pages ou fonctionnalités sont incluses dans ce mémoire afin qu' elles vous informent exactement de ce qu'elles recherchent. Ou parfois, ils peuvent être plus larges comme celui-ci. Et c'est vraiment à vous de proposer ces fonctionnalités et ces pages et ce dont ils auront besoin dans leur application mobile. Mais pour l'instant, allons-y et passons en revue ce mémoire. Ainsi, pour les bouchées saines, les bouchées saines fournissent aux clients une application de commande mobile facile à utiliser pour des aliments sains et leur ville. Il s'agit donc essentiellement d'une application mobile de commande d'aliments, mais uniquement pour des aliments sains. C'est plutôt cool. Voici d' autres mots-clés de marque. Aliments sains, aliments propres, faible en glucides , régime alimentaire, etc. Vous pouvez lire cela plus en détail. Notre objectif est donc de concevoir une application de commande de nourriture simple à utiliser qui aide les clients à parcourir les restaurants sains à proximité et à passer une commande à partir de leur menu affiché dans l'application. Les clients doivent être en mesure de définir une option de livraison et de voir l'avancement de leurs commandes fur et à mesure qu'elles sont préparées et livrées. Cool. Ainsi, le client cible, ou les jeunes professionnels âgés de 22 à 40 ans qui recherchent uniquement des options de repas sains et qui se soucient évidemment de leur forme physique et de leur santé. Et ils cuisinent rarement de la nourriture à la maison et ils préfèrent manger à l' extérieur la plupart du temps. Donc, bien sûr, celui qui est une option saine. Et c'est donc ce que les morsures saines que son entreprise fournit ici. Et les livrables du projet ont-ils une conception d' application mobile pour iOS, ainsi que le prototype, puis aussi un logo pour leur entreprise qui mettra en place tout au long du projet. Et il y avait un programme. Nous avons des maquettes initiales dans deux semaines, un prototype en trois semaines, ainsi que des maquettes et des livrables finaux. Donc, ici, dans quatre semaines. Maintenant, bien sûr, ils sont en quelque sorte inventés pour le bien de ce projet dans ce cours. Habituellement, ils peuvent être plus longs en fonction de la taille du projet. Et bien sûr, ils ont dit ici un budget informatique de 6 000 dollars américains. Vous pouvez maintenant charger plus bas ou plus haut selon l'endroit où vous vous trouvez dans votre carrière de concepteur. Donc, si vous débutez, vous devrez peut-être facturer un montant inférieur pour votre projet, ce qui est tout à fait correct. Et puis jusqu'à des projets plus grands qui pourraient se situer dans les 45 chiffres vont. En ce qui concerne la direction créative, nous voulons développer l'image de marque d'une entreprise, y compris le logo, la couleur et les styles de police. Ensuite, nous voulons garder le logo et l'application propres et modernes. Et cela suggère d'utiliser une couleur verte, bien sûr, pour montrer la santé du produit faute d'un meilleur mot, etc. Il s'agit donc d'une personne de contact principale vient de se réinventer pour le projet. Vous n'avez pas besoin de vous inquiéter à ce sujet, mais vous aurez généralement une personne-ressource principale ou toute autre partie prenante et des personnes censées approuver les personnes qui seront approuver le projet une fois qu'il est terminé. Ainsi, d'autres nœuds, certains éléments d'icônes seront fournis pour la maquette. Ceci est donc inclus dans ce dossier que vous auriez dû télécharger à partir de cette conférence. Revenons donc dans une conférence suivante et rassemblons plus en détail pages que nous devons concevoir avant commencer le câblage et la création de nos tableaux artistiques. 21. Obtenir l'inspiration: accord, alors de quoi avons-nous besoin pour cette application mobile ? Donc parce que le client ici vient nous fournir le livrable en tant que conception de l'application mobile. Ils ne nous ont pas spécifiquement donné les pages dont vous avez besoin ou que nous devons avoir à l'intérieur de cette conception ou de l'application. Nous allons les trouver seuls. J'ai donc ouvert un document Word ici, vous pouvez simplement aller de l'avant et ouvrir des pages sur Mac ou un document Word sous Windows. Quelle que soit la modification de mots que vous utilisez. Je vais juste prendre quelques notes ici pour que nous sachions quelles pages nous allons inclure dans nos créations. Ça va aller de l'avant et taper en exigences de commande d'aliments mobiles. Cela sera également fourni dans le dossier que vous avez téléchargé. Donc, au cas où vous ne voudriez pas suivre et prendre les mêmes notes ici. Vous pouvez y accéder dans vos ressources que vous le téléchargez également. Alors, comment savoir quelles pages nous devons concevoir pour une application mobile, pour Web App, pour n'importe quel projet sur lequel nous travaillons. Eh bien, ce que j'aime faire personnellement, c'est d'aller de l'avant et d' installer d'autres applications similaires qui font des fonctionnalités similaires. Nous avons donc des tonnes d'applications de commande de nourriture. Que ce soit Uber Eats, sautez la vaisselle. Il y en a tellement que nous pouvons aller de l'avant et installer, jouer avec, peut-être même essayer et commander quelque chose pour que nous puissions voir tous les designs nécessaires et tous les pages qui entrent dans une telle application. C'est donc la première étape pour y parvenir. Et si vous avez déjà fait cela et que vous cherchez plus d'inspiration, ne vous inquiétez pas, il y a plus de ressources. Je vais partager avec vous quelques ressources que vous pourrez utiliser pour trouver de l' inspiration lorsque vous étudiez ce dont vous avez besoin dans la conception de votre application mobile. Ou c'est le cas. J'ai donc ouvert trois ressources que vous pouvez utiliser gratuitement pour comprendre ce dont vous avez besoin ou vous inspirer lorsque vous travaillez sur une application mobile ou Web. Et j'ai inclus les liens vers les trois documents texte qu'ils peuvent télécharger à partir de cette conférence. Le premier est donc ce site Web appelé moveon dot design. Vous pouvez en fait aller de l'avant et parcourir applications iOS et Android ici. Ils ont donc téléchargé des captures d'écran de chaque application. Nous avons donc une livraison qui est peu similaire à celle que nous concevons. Et un tas d' autres applications telles que LinkedIn et ainsi de suite. Vous pouvez aller de l'avant et naviguer. Ceux-ci sont filtrés par catégorie d'application. Donc, si nous recherchons uniquement des applications de restauration et de boissons, cela nous incitera à vous connecter d'abord. Je vais donc aller de l'avant et cliquez simplement sur Connexion ici. Je viens d'aller de l'avant et je me suis connecté ici. Je peux vous demander une petite année de sondage. Je vais aller de l'avant et sauter ça. Mais essentiellement, une fois que vous vous connectez, vous pouvez aller de l'avant et filtrer en fonction du type d'applications que vous recherchez. Nous pouvons donc filtrer par catégorie, nourriture et boisson. Et maintenant, nous voyons un tas d' applications qui font de la nourriture et des boissons. Il suffit donc de cliquer sur ce premier ici, Deliveroo. Comme vous pouvez le constater, ils ont inclus toutes les captures d'écran de différentes parties de l'application. Donc, de leur écran de démarrage au partage de position, à la navigation, aux restaurants, aux pages de vérification téléphonique , ainsi de suite, jusqu'aux détails de livraison, etc. Maintenant, pour notre projet, nous n'allons pas être aussi détaillés qu'une application comme celle-ci, car il est évident qu'une application comme celle-ci prendra beaucoup plus de temps à concevoir. Nous allons donc nous concentrer sur la simplicité des choses. Pouvons-nous accéder à la fonctionnalité de base de l'application, qui consiste simplement à commander des aliments aliments sains via l'application. Maintenant, bien sûr, vous pouvez toujours l' amener plus loin, concevoir autres pages et envoyer ces designs pour obtenir des commentaires de ma part, ce que vous pouvez faire en envoyant votre projet ou le partageant avec Hello Clever sur gmail.com. Et je ferai de mon mieux pour répondre à chaque projet et vous laisser des commentaires sur vos projets. Mais oui, nous allons aller de l'avant et utiliser des ressources comme celle-ci pour trouver de l'inspiration sur les pages dont nous avons besoin et ce que nous devons inclure dans ces pages. À d'autres ressources auxquelles vous avez accès ou Adobe Stock. Et bien sûr, c'est plutôt pour télécharger des images de stock. Mais si vous recherchez quelque chose comme une application de commande de nourriture, vous obtiendrez tout de même un tas de pages que vous pourrez utiliser comme source d'inspiration sur ce que vous pouvez inclure dans vos applications mobiles, comme celle-ci ici. N'hésitez donc pas à expérimenter cela et à parcourir ces ressources. Enfin, le dribble est un autre excellent que vous pouvez faire une autre application de commande de nourriture que j'ai faite ici. Et ils ont des tonnes de personnes qui téléchargent exemples de types d'applications pour commander des aliments. Lorsque vous vous connectez, vous pouvez le voir en plein écran. Ou vous pouvez juste avoir l'idée à partir des miniatures ici. C'est plutôt cool. Donc, si vous vous demandez comment je vais créer les pages que nous allons concevoir. Je vais simplement utiliser ça. Revenons donc à la prochaine conférence et assemblons les pages que nous allons concevoir pour notre application. 22. Exigences de l'application: Très bien, dressons ici votre liste des pages que nous devons concevoir pour que nous devons concevoir pour cette application de commande de nourriture. Ainsi, au cours de la dernière conférence, vous pouvez utiliser des sites Web tels que la conception mobile pour trouver de l'inspiration et voir les pages dont vous pourriez avoir besoin. Donc basé sur ce genre de maquettes et d'autres maquettes que j'ai déjà conçues pour les applications de commande de nourriture ou que j'ai déjà connu un tas de pages. Je vais donc aller de l'avant et les rassembler dans ce document. rappel, ce document est donc disponible en téléchargement. Les ressources au début de cette section. Donc, la première page, nous allons avoir besoin d'une page d'écran de démarrage. C'est donc la page que vous voyez ici qui montre généralement un logo et un petit chargement qui agit comme une sorte d'écran de chargement. Ensuite, nous aurons besoin d'une page de connexion, où les utilisateurs vont se connecter avec différents comptes ou utiliser un e-mail et un mot de passe. Ensuite, nous allons probablement faire une sorte de vérification afin de pouvoir concevoir une vérification de numéro de téléphone. On y va. Ensuite, nous aurons une page principale qui montre les restaurants. Nous pouvons donc soit appeler cette page principale, soit le restaurant, soit la page de navigation, vraiment tout ce qui fonctionne. Je l'appellerai simplement la page principale parce que c'est le cas, nous sommes généralement les utilisateurs qui vont partir quand ils lancent l'application après qu'ils se soient connectés. Ensuite, nous aurons probablement besoin d'une sorte de page de carte ou emplacement où les utilisateurs pourront entrer leur adresse pour livraison. Je souhaite certainement consulter la page de profil à partir de laquelle les utilisateurs pourront accéder à leurs informations, à leur carte de crédit, etc. Et en parlant de carte de crédit, nous avons vraiment besoin d'une page de paiement. C'est donc ici que les utilisateurs pourront ajouter leur mode de paiement pour l'application. Voyons quoi d'autre. Maintenant, si vous vous souvenez, dans notre mémoire, le client veut que nous montrions l'avancement de la commande au l'avancement de la commande fur et à mesure qu'elle est en cours de préparation et de livraison. Donc, sur la base de cela, après notre type de page principale, nous voudrons certainement la page de menu à partir de laquelle les utilisateurs pourront accéder au menu de ce restaurant de la sélection, ainsi qu'une commande où ils vont aller de l'avant et faire plaisir leurs commandes pour la nourriture qu'ils veulent. Et puis je suppose qu'une page Progress vous permettra de suivre la progression de leur commande, de voir quand elle sera livrée, etc. Maintenant, cette application Deliveroo ici que j'ai ouverte sur la conception de points moveon de la conférence précédente. Un tas d'autres pages comme des filtres et des offres et tant d'autres options telles que la sélection de vos options alimentaires, etc. Nous n'avons pas besoin de toutes ces fonctionnalités pour le moment car nous voulons concevoir une application de commande simple. Mais comme mentionné précédemment, vous pouvez certainement les concevoir et profiter l'occasion ici pour améliorer la conception de ces pages. Nous avons donc ici tout ce que nous voulons pour notre client. En tant qu'exercice, je vais ajouter une page de commande antérieure où vous pouvez réellement accéder aux commandes passées par le client , afin que les clients puissent voir leurs précédentes commandes. commandes. Je vais laisser cette page et cette page d'exercice pour que vous puissiez le faire au fur et à mesure que nous concevons cette application. Donc, nous l'avons là. C'est la configuration requise pour nos applications. Bien sûr, c'est toujours une bonne idée de l'envoyer à votre client en vérifiant si c'est exactement ce qu'il veut, s'il manque quelque chose, car il s'agit d'un processus de va-et-vient. Vous devez travailler et communiquer avec vos clients sur ce que vous concevez et quels sont leurs besoins afin de les répondre. Et il n'y a pas de divergence entre les deux. Une fois que nous avons obtenu notre approbation de notre client, ce que nous pouvons supposer que nous l'avons déjà fait. Nous pouvons aller de l'avant et aller de l'avant avec la conception de ces pages. Mais avant de passer à 16 ans, en les concevant réellement, nous allons assembler ce qu' on appelle des filaires de faible fidélité, comme celle-ci que vous voyez ici. Donc, si vous effectuez des filaires Google à faible fidélité, vous pourrez voir quelques exemples de ce qu'il s'agit. Essentiellement, les filaires nous permettent créer un Blueprint de notre application qui mentionne ce dont nous avons besoin à l'intérieur de cette page et où les choses devraient aller. Il n'y a pas de couleur, tout est noir et blanc. Vous pouvez même aller de l'avant et l'esquisser sur un bout de papier et un stylo pour commencer. Et je pense que c'est ce que nous allons faire lors la prochaine conférence pour assembler le filaire de nos pages avant de commencer à les concevoir. Alors prenez un stylo et du papier et je vous y verrai. 23. Dessiner nos cadres Wireframes: Pour cette prochaine partie , allez de l'avant et prenez un simple stylo et du papier, car nous allons dessiner notre filaire sur stylo et du papier, puis le déplacer dans XD. Nous allons donc commencer à dessiner ou à dessiner des filaires. Ils sont prêts à commencer notre câblage ici. J'espère qu'à partir de là, vous serez en mesure d'avoir une bonne idée de ce que nous dessinons ici. Laissez-moi aller de l'avant et ouvrez mon stylo. Ensuite, je vais commencer à écrire le nom du projet d'abord. Nous allons donc faire une maquette mobile de morsures saines . Et je vais simplement créer une boîte autour de chaque page que nous avons pour notre projet. Vous pouvez utiliser une règle si vous voulez être très précis avec cela, mais je vais simplement les dessiner à la main. Ils n'ont pas besoin d'être parfaits. N'oubliez pas que nous avons juste une idée de ce que nous voulons où. Donc, juste pour pouvoir vous rendre un peu plus facile à voir. De notre précédente conférence, nous en avons neuf, 10 et 11. Nous avons donc dix pages que nous allons être conçues avec une seule comme exercice. Nous allons donc concevoir les 10 pages, ou au moins les encadrer ici sur notre papier. Je vais donc essayer de rentrer dans 4 sur cette page. Elle va donc aller de l'avant et dessiner. Je suis en quelque sorte une boîte d'application ici. Pour chaque page. Encore une fois, vous n'avez pas besoin d' aller parfaitement avec ça. L'idée est de simplement avoir une idée de ce que nous concevons. Je ne vais donc pas vraiment dessiner la page de l'écran de démarrage car nous avons juste le logo là pour que nous sachions à quoi cela devrait ressembler. Nous allons faire la page de connexion. Nous allons vérifier le téléphone. Nous allons faire la page principale et nous allons faire la page de localisation. Je vais juste aller de l'avant et passer à une nouvelle page. Mettez celui-là de côté pour l'instant. Nous allons en créer quatre ici également. Nous avons donc un profil, à gauche. Profil. Nous avons un menu de paiement. C'est donc la page où nous verrons le menu des aliments, puis une page de commande, pour économiser de l'espace. Je pense que je peux également entrer dans la page de progression ici. Excusez-moi s'il est un peu difficile de lire mon écriture manuscrite à partir de là, mais l'idée est simplement de rassembler les filaires ici. À partir d'ici sur notre page de connexion, comme nous l'avons déjà vu dans d'autres pages de journalisation. Et encore une fois, vous pouvez vous inspirer des applications que vous avez sur votre téléphone ou simplement parcourir les sites Web que nous avons consultés, nous voudrions probablement ou logo quelque part ici. Nous pourrions donc créer un logo, une option e-mail et mot de passe ici. Ainsi que le bouton de connexion. Et si vous voulez peut-être vous connecter avec Google ou d'autres options, nous pouvons également les répertorier ici. Je vais donc écrire d' autres options de connexion. Et peut-être un petit texte ici pour nos conditions d'utilisation et notre politique de confidentialité. Lien permettant à l'utilisateur de cliquer s'il souhaite voir ses conditions d'utilisation ou sa politique de confidentialité. Habituellement, ils le placent quelque part sur la page de connexion ou peut-être sous les pages de profil. Pour le téléphone, la vérification est assez simple. Nous voulons juste une petite boîte ici pour qu'ils saisissent leur numéro de téléphone avec un petit bouton d'accueil pour passer ensuite. Pour qu'ils puissent le vérifier. Et très simplement, nous pouvons mettre un petit texte ici pour décrire exactement ce que nous voulons qu'ils fassent. Page principale, je veux aller de l'avant et cliquer sur une petite barre de navigation ici et peut-être avoir une petite boîte de recherche là-dedans pour qu'ils puissent rechercher des restaurants spécifiques, ainsi qu'un petit menu de hamburgers. Ils peuvent donc voir le menu, dont nous n'avons pas encore conçu de page de menu. Cette page de menu nous amène donc à la page de profil et à partir de là, ils peuvent avoir accès à d'autres options. Et ici, nous allons juste avoir des cartes qui montreront les restaurants. Nous pouvons donc avoir une petite image du restaurant ici, ainsi que le titre du restaurant. Donc, je vais juste pointer ça. Nous pouvons inclure un petit titre. Nous pouvons inclure la note. Donc, le nom oblique du restaurant, inclut une petite note, peut-être des signes de dollars pour inclure la fourchette de prix, puis peut-être le type de nourriture de ce restaurant. Et ensuite, nous allons répéter cela pour tous les restaurants que nous avons, et ainsi de suite. Pour ce qui est de l'emplacement, nous voulons simplement aller de l'avant et leur permettre de chercher leur robe. Il s'agit donc d'une petite boîte de recherche d' adresse ici avec une petite carte. Et il sera en mesure de sauvegarder leur adresse. Peut-être aurons-nous une petite icône d'épingle pour leur montrer où se trouve leur adresse. Nous pouvons également faire un peu de location actuelle. Peut-être que nous aurons ici une petite zone de texte pour écrire l'actrice. C'est donc un peu comme nos filaires de faible fidélité pour ces pages. Pour celui-ci, revenons à la prochaine conférence pour la terminer. 24. Terminer nos souhaits: C'est fait ici. Allons de l'avant et terminons ces cinq autres maquettes de faible fidélité pour un projet. Donc, en commençant par un profil, nous allons utiliser ce profil comme une sorte de page de menu. Parce que comme vous vous en souvenez sur ou autre page de la page principale, je voulais qu'ils cliquent sur ce petit menu de hamburgers et à partir de là, et ils pourront voir leur menu oblique de profil. Quelqu'un pourrait-il peut-être faire un petit menu ici et un petit X pour fermer le menu, peut-être avoir sa photo de profil ici avec son nom. Et à partir de là, nous pouvons leur donner accès à un tas d' options afin de pouvoir compter s' ils veulent modifier les détails de leur compte et nous pouvons faire l'historique des ordres de paiement. De quoi d'autre avons-nous besoin ? Nous avons besoin du lieu ou adresse que nous allons faire maintenant, nous allons faire un petit bouton de déconnexion et je pense que c'est tout ce dont nous avons besoin. N'oubliez pas que s'il nous manque quelque chose à un moment donné, nous pouvons toujours revenir et mettre à jour ces filaires. L'idée est donc simplement de mettre en évidence ce dont nous pensons avoir besoin pour l'instant. Nous allons donc nous déconnecter. On y va. C'est notre petite page de profil barre oblique de menu. Nous avons ici une petite page de paiement. Donc, ici, peut-être pourrait-on leur demander d'ajouter un paiement. Ensuite, nous pouvons énumérer leurs paiements précédents ici. Mais les quatre derniers chiffres. Ensuite, nous pourrons leur dire lesquels sont les principaux, puis leur permettre d' ajouter à partir d'ici aussi s'ils le veulent. Encore un petit exercice, je quitterai la page d'ajout pour vous. rappel, vous pouvez toujours m'envoyer ces designs et je vous donnerai quelques commentaires à leur sujet en leur envoyant un courriel à bonjour intelligent sur gmail.com. Parfait, on a presque fini ici. Le menu portera le nom du restaurant ici. Ensuite, nous ferons une petite sous-catégorie où nous pourrons leur montrer peut-être des boissons et avoir chaque type de boisson ici. Et puis peut-être sur le secteur. Vous savez ce que vous verriez généralement dans un menu. Nous allons aller de l'avant et écrire ce dont nous avons besoin dans cette petite carte ici. Nous voulons évidemment le nom de la boisson ou du menu. Nous voulons une petite description. Nous avons besoin du prix et je pense que c'est tout ce dont nous avons besoin pour l'instant. On pourrait aussi faire comme une numération calorique. Parce que rappelez-vous que nous concevons cela pour nos clients cibles qui sont en quelque sorte conscients de leur apport calorique Probablement. Ce ne sera donc pas une bonne caractéristique ici. Et alors peut-être pourrons-nous avoir un petit bouton plus moins pour qu'ils puissent ajouter cet article à la commande ou le déplacer 90. Bien sûr, comme une application de commande de nourriture, peut être beaucoup plus complexe que ces pages. Mais nous gardons les choses simples ici pour le bien de ce cours. Cette page de commande peut donc inclure votre commande. Il vous montrera donc ce que vous avez ajouté afin pouvoir voir chaque élément que vous avez ajouté. Article numéro 1, article numéro 2, nous pouvons avoir un peu moins ici ou quelque chose comme ça. Supprimez cet élément de la liste. Et puis peut-être en bas ici, nous aurons une petite sorte de total montrant combien sera votre total, peut-être avec les impôts. Et puis un petit bouton qui indique l'ordre avec le rouge total ici. Et le bouton peut avoir quelque chose comme ça pour la page de commande. Et évidemment, sur ces pages, nous pouvons avoir un petit bouton retour pour revenir à la page précédente, nous allons donc comprendre la navigation au fur et à mesure. Enfin, nous avons besoin d'une petite page d'avancement. Donc, dans cette page, il y aura la progression. Nous pouvons donc montrer ici un petit bar, peut-être un petit bar qui montrera à quel stade leur commande est ajoutée à partir de l'endroit où la livrer afin que nous puissions leur montrer exactement ce qui se passe en ce moment. Ensuite, sous la rubrique ici, nous pouvons faire livraison et inclure l'adresse à laquelle elle est livrée. En parlant de cela, nous pouvons certainement avoir cela quelque part ici aussi. Donc peut-être une petite icône de localisation pour s'assurer que ces commandes sont livrées à la bonne adresse. Et cela pourrait les amener à la page de localisation que nous avons dessinée. Nous avons donc l'adresse, puis les détails de la commande. Et ici, ils peuvent cliquer pour parcourir cette page de commande pour voir quelle est la commande. Nous pouvons également inclure un petit appel, option de restaurant ou peut-être même un ordre du conseil. Cool. Alors, tu y vas. Il s'agit de notre filaire basse fidélité pour notre projet. Ils seront inclus dans les ressources que vous avez téléchargées. Vous pouvez donc utiliser ces dessins au lieu d' avoir à dessiner les vôtres. Et je vous encourage également à dessiner cette page supplémentaire en tant qu'exercice, qui comporte la page précédente des commandes ou l'historique des commandes. Maintenant que nous avons nos filaires, que revenons-nous lors de la prochaine conférence et commençons à créer notre fichier XD ? 25. Créer notre fichier XD: Donc, si vous avez dessiné les filaires avec nous au cours des deux dernières conférences, vous pouvez aller de l'avant et utiliser ces filaires pendant que vous concevez votre projet. Mais sinon, vous pouvez aller de l'avant et ouvrir les fichiers filaires sains un PDF à partir des ressources. Et là-bas, j'ai inclus le croquis que nous avons fait pour nos filaires. À partir de là, vous pourrez voir ce que nous devrions inclure dans chaque page. Et bien sûr, s'il y a quelque chose que nous avons laissé de côté, nous y retournerons et l'ajouterons à nos maquettes. Mais cela vous donne une idée générale de l'endroit où commencer. Donc, pour cette conférence, allons mettre en place nos tableaux artistiques pour chaque page. Nous savons donc que nous avons besoin d'un total de 1, 2, 3, 4, 5, 6, 7, 8, 9 tableaux d'art ainsi qu' un tableau supplémentaire pour vous permettre de faire le passé ou la loi sur les pages. Nous allons donc créer 10 plans de travail dans notre projet. Mais avant de faire cela d'abord, nous devons réellement aller de l'avant et créer un nouveau projet dans XD. Nous allons aller de l'avant et minimiser cela et aller de l'avant et ouvrir notre XD. Nous concevons donc un projet iOS en fonction des mémoires client. J'ai donc fait une petite recherche Google pour trouver le modèle d'iPhone le plus utilisé en 2021, et il semble qu'il s' agisse de l'iPhone 12. Et la raison pour laquelle j'ai fait cela est que la conception pour une application iOS ou même Android, vous voulez savoir quel l'appareil le plus couramment utilisé est l'appareil le plus couramment utilisé en fonction de cela. Ensuite, allez de l'avant et créez une sorte de design réactif que nous continuerons à travailler sur des écrans plus petits ou légèrement plus grands. Je vais donc vous montrer comment procéder tout au long du projet. Mais pour l'instant, allons de l'avant et créons un projet pour l'iPhone 12. J'irai de l'avant et fermera ça. Et ici, dans notre XD, rendez-vous chez vous. Si vous êtes déjà dans un projet, fermez-le et dirigez-vous vers la maison et, euh, cliquez sur cette petite flèche à côté de l'iPhone 12 Pro Max, ou de n'importe quel iPhone affiché en ce moment. Et ensuite, cliquez sur iPhone 12. Maintenant, au moment où vous regardez cette vidéo et l'iPhone le plus couramment utilisé est différent. Alors, bien sûr, vous pouvez aller de l'avant et utiliser cela comme option. Nous allons continuer et cliquer sur cet iPhone 12 virgule 12 Pro pour notre plan de travail. Et XD va ouvrir un nouveau projet avec cette taille d'iPhone 12 comme valeur par défaut. Nous savons donc que nous avons besoin de 12 ou de dix pages pour nos maquettes. Nous allons donc choisir ce petit plan de travail ici, le premier que nous avons déjà. Et puis allez-y et touchez le Commandement D neuf fois bien que nous dupliquions notre tableau d'art neuf fois. Et elle va toucher Command Zero pour voir combien j'en ai. Neuf. Ok, parfait. Je vais le faire encore une fois pour cette page supplémentaire pour notre historique des commandes. Nous devrions donc maintenant avoir 10 plans de travail. Et en appuyant sur la commande 0, nous pouvons tous les placer dans une seule vue. Et maintenant, nous allons simplement aller de l'avant et renommer ces plans de travail en conséquence, juste après avoir renommé notre fichier lui-même en premier. Alors, continuons et cliquons sur ce nom de projet sans titre et fromages pour des bouchées saines. Maquette mobile. V One. Ce petit V1 est juste pour indiquer qu'il s' agit de notre première version. Au fur et à mesure que nous travaillons sur nos conceptions, nous voudrions peut-être créer plusieurs versions. Surtout si nous exportons ce fichier XD et l' envoyons à notre client. Et c'est si nous n'utilisons pas la fonctionnalité de partage parce que sinon c'est un Fisher qui partage le rendra redondant. Ou vous pouvez toujours aller de l'avant et ensuite ajuster votre fichier à 1.1 lorsque vous apportez de petites modifications, ou peut-être V2 si vous apportez des modifications plus importantes. Mais pour l'instant, nous allons le laisser en V1. Allez-y et cliquez sur Enregistrer. Maintenant, à tout moment, si vous tombez les cours et vous êtes perdu après chaque cours, je sauvegarderai ce fichier de maquette, ce fichier XD et je le saisirai dans une maquette de fichiers. Ainsi, à partir de cette conférence , vous pouvez télécharger ces maquettes de fichiers. Et si vous vous perdez à un moment donné, vous pouvez suivre la dernière maquette ou la maquette disponible la plus proche de la conférence que vous regardez. Disons donc que vous regardez la conférence 23. Et vous voyez dans un dossier maquette qu'il y a une conférence 22. Vous pouvez aller de l'avant et utiliser cette conférence 22 pour tomber sur une. Sinon, je vous encourage à suivre chaque étape pour que vous puissiez aller l'avant et apprendre autant que possible avec XD. Allons de l'avant et renommons chaque plan de travail. Faites le premier comme écran de démarrage. Le second a une connexion. Maintenant, je ne fais que double-cliquer ici pour modifier le nom. Vous pouvez également le faire dans le panneau Calques ici. Jetez un coup d'œil. Qu'avons-nous d'autre ? Nous avons vérifié par téléphone. Donc, lorsque vous vérifiez par téléphone, nous avons notre profil de page principale, notre paiement, menu, notre commande , notre progression, ou nous pouvons même le faire avec sa progression. Et enfin, mais non des moindres, ou nous appellerons plutôt cet historique des commandes. Pour ce profil, je vais en fait faire un menu oblique de profils. Il s'agit donc du menu de l'application, pas du menu du restaurant. Maintenant, nous avons tous nos plans de travail à tout moment, nous pouvons les organiser et les déplacer. Mais pour l'instant, je vais juste aller l'avant et laisser ça tel quel. Nous sommes maintenant prêts à commencer par notre écran de démarrage et à nous frayer un chemin dans notre conception. 26. Écran éclaboussure: Très bien, donc d'abord, nous allons d'abord concevoir notre écran de démarrage. Bien sûr, les écrans de démarrage sont l'une des pages les plus faciles à concevoir. Donc, je vais aller de l'avant et appuyer sur Zed et zoomer dessus. Donc, pour notre écran de démarrage, nous voulons probablement colorier l' arrière-plan, puis un logo au milieu ici avec le nom de cette entreprise. Il est donc évident que nous n' avons pas encore notre logo. Nous allons concevoir cela dans les prochaines conférences. Mais pour l'instant, nous pouvons donner à cette page un remplissage de couleur verte, car c'est un peu comme le jeu de couleurs nous recherchons avec ce projet. Ensuite, allez de l'avant et ajoutez un petit texte. Et puis peut-être un petit porte-place pour savoir où le logo ira une fois que nous l' aurons conçu. Tout d' abord, allez-y et cliquez sur cette page d'écran de démarrage. Assurez-vous que vous l'avez sélectionné. Le plan de travail ici. Continuez ensuite et cliquez sur Apparence. Et vous pouvez en fait aller de l'avant et changer le remplissage de ce tableau d'art à ce que vous voulez. Donc, pour moi, je vais aller de l'avant et sélectionner la petite couleur verte qui, selon moi, aura fière allure pour cette application. Bien sûr, je suis juste en train de regarder ça ici. Je n'ai pas de couleur spécifique que je cherche. Et il y a de fortes chances que nous mettions à jour cette couleur lorsque nous suivrons notre conférence sur les ressources de couleur. Mais pour l'instant, nous allons aller de l'avant avec une couleur similaire à celle de celle-ci ici. Et je peux obtenir exactement cette couleur en entrant ce petit code hexadécimal dans vos sélecteurs de couleurs. Donc, si vous voulez aller de l'avant et écrire cela exactement là-bas, vous devriez obtenir exactement cette couleur. Maintenant, en utilisant cette petite icône plus, je peux ajouter cette couleur à la nuance de couleur afin que vous puissiez aller de l'avant et réutiliser dans d'autres objets. Donc, le vrai, nous avons un peu de couleur pour notre arrière-plan. Ajoutons un texte en appuyant sur la touche t. Et puis juste au milieu de la page. Allons de l'avant et faisons des octets sains, qui est bien sûr le nom de l'entreprise. Et je clique pour échapper à un tas de fois. Et puis évidemment, la taille de la police est un peu petite. Je vais donc aller de l'avant et l' agrandir un peu. Il prend donc une bonne partie de la taille de l'écran, mais pas trop grande. Je veux probablement lui donner un remplissage blanc à la place. Par défaut, vous devriez obtenir cette nouvelle police helvetica. Si ce n'est pas le cas, allez-y et modifiez-la ici en recherchant cette police. Nous étudierons également les polices de caractères lors des prochaines conférences. Pour l'instant, nous allons simplement créer cet espace réservé jusqu' à ce que nous utilisions nos polices personnalisées. Et maintenant, allons de l'avant et ramener ça plus bas. C'est donc un peu au milieu, mais pas exactement. C'est donc juste au milieu de la page, car ces deux types de lignes me montrent que c'est aléatoire au milieu de la page. Mais si je l'apporte un peu plus bas, je peux créer de la place pour mon logo ici. Je peux donc faire un petit rectangle en appuyant sur la touche Alt. Et je vais vraiment faire un carré en maintenant Shift et laisser ça passer par-dessus leur tête, échappé à beaucoup de temps pour sortir de cet outil rectangle. Et puis pour le remplissage, allons-y, retirez-le et avons juste une petite bordure que nous sachions exactement où va aller notre logo. Et je vais juste ramener ça un peu plus bas. C'est donc là que va aller notre logo. Au lieu de ce petit rectangle, nous reviendrons et ajouterons cela au fur et à mesure que notre logo sera conçu. Mais pour l'instant, c'est notre écran de tranche. Nous allons passer à un écran de connexion lors de la prochaine conférence. 27. Ajouter et masquer: Très bien, nous sommes maintenant prêts à concevoir notre écran de connexion. Je vous promets que ces écrans sont beaucoup plus excitants que l' écran d'affichage car il inclut beaucoup plus contenus vont apprendre beaucoup. Et nous allons également apprendre à utiliser les masques d'image, ce qui est plutôt sympa pour vos images. Il suffit donc d'aller de l'avant et de zoomer sur cette zone. à partir de notre dossier de ressources, vous devriez pouvoir trouver un dossier d'images comprenant un dossier de page de connexion. Alors allez-y et sous les images, trouvez ce dossier de page de connexion et ouvrez-le. Et ici, nous voyons deux images que nous allons utiliser sur notre page de connexion. Ce que j'ai en tête, c'est qu' ici, nous aurons notre contenu principal comme nous l' avons fait dans nos filaires. Nous aurons donc notre logo ou notre e-mail, notre mot de passe et notre bouton de connexion, ainsi que les conditions d'utilisation et tout ce qui se trouve ici. Mais ce que j'ai en tête, c'est que dans les coins ici, nous pouvons avoir une petite image de certains aliments sains. économie va donc de pair avec ce thème. Et bien sûr, pour notre bouton de connexion, nous allons utiliser la même couleur verte et avoir simplement un champ de courrier électronique et de mot de passe et devrait être bon pour partir de là. Pour revenir à notre XD, première chose qu'ils veulent faire est d'importer ces images dans notre fichier. Le moyen le plus simple d' importer des images consiste à sélectionner les images souhaitées. Vous pouvez donc continuer en maintenant la touche Commande et sélectionner les deux images ici. Maintenant, je dois rendre hommage à unsplash.com pour avoir fourni ces images. Si vous souhaitez utiliser des images gratuites dans tous vos projets, consultez Unsplash. Il y a une multitude d' images que vous pouvez rechercher et utiliser tout au long de vos projets. Ce que j'ai fait, c'est que j'ai simplement cherché des aliments sains. De cette façon, je peux aller de l'avant et filtrer par ces options alimentaires saines. À partir de là, j'ai téléchargé ces deux images et pour les importer sur mon XD, je vais aller de l'avant et simplement les faire glisser dans ma page de connexion. Maintenant, comme vous pouvez le constater, les images sont énormes comparées à notre plan de travail. Nous allons donc aller de l'avant et simplement maintenir Shift et les redimensionner. Et la raison pour laquelle nous maintenons le quart de travail, c'est ne pas gâcher les proportions. Nous avons donc cette image ici. Et je croyais que mon autre image était entrée dans cette page de l'historique des commandes pour certaines raisons. Allons de l'avant et redimensionnons également celui-ci. Et allons également le déplacer sur notre page de connexion. Whoops. Assurez-vous que lorsque vous faites glisser, vous n'allez pas au-dessus de ces petits boutons. Sinon, il se peut que vous modifiiez votre image plutôt que de la faire glisser. Assurez-vous donc d'être au milieu ou à un endroit où il n'y a pas de nœud. Donc, ce que je veux faire, c'est d'aller de l'avant et de recadrer ces images pour que nous ayons juste les plaques au lieu de l'arrière-plan. Et la façon la plus simple de le faire, car ces boules sont en quelque sorte des cercles, utilisez ce qu'on appelle un masque d'image. Ainsi, pour masquer ou images, nous pouvons créer une forme ovale. Allons donc appuyer sur E et créer un cercle parfait touche Maj enfoncée et en faisant glisser l'écran, puis en lâchant prise. Allons de l'avant, échappons de là et assurez-nous simplement que c'est en quelque sorte au-dessus de cette balle. Et à tout moment, je peux baisser l'apparence pour m' assurer qu'elle est au-dessus de la balle et qu'elle semble l'être. Et maintenant, nous pouvons le faire, c'est aller de l'avant et cliquer sur le cercle ainsi que sur l'image. Alors maintenez la touche Maj enfoncée et assurez-vous que vous avez tous les deux sélectionné puis accédez à Objet, Masque avec forme. Et c'est là que tu l'as. L'image a donc été une sorte de culture dans cette zone. Je peux toujours continuer et double-cliquer dessus et éditer l'image et la déplacer. Mais c'est essentiellement le moyen le plus simple de créer des masques d'image. On dirait donc que je n'ai pas complètement masqué correctement. Donc, si vous constatez que vous avez encore des zones comme cette bordure noire ici, cela ne fait pas partie de la frontière car nous n'avons pas de frontières pour le moment. Donc, si nous sortons la frontière, c'est toujours là, nous pouvons aller de l'avant et double-cliquer et lire cercle de justice pour nous assurer qu'il est un peu plus petit que l'image. De cette façon, lorsque nous y reproduirons, nous irons de l'avant et supprimerons tout ce qui se trouve à l'extérieur. Cool. Donc, nous l'avons là. Nous allons aller de l'avant et sélectionner cela rendre un peu plus gros et le placer peut-être ici. Et ensuite, faisons la même chose ici. Création d'une ellipse. Va par-dessus l'assiette, c'est s'échapper de là. Et allons-y et sélectionnons les deux. Accédez à Masque d'objet avec forme. Vous pouvez également y parvenir en appuyant sur la touche Maj M. et cela fera la même chose. Cool, et allons de l'avant et agrandissons aussi. Donc maintenant, ce calque entier, comme vous pouvez le voir, s' appelle un groupe de masques. Mais à l'instar de nos formes booléennes, nous pouvons toujours accéder au cercle que nous avons et à l'image en-dessous comme prévu. Nous pouvons donc toujours y aller et modifier l'image et la rendre plus grande ou plus petite, puis revenir en arrière. Et nous allons agrandir ça un peu et nous le laisserons là. Revenons donc à la prochaine conférence pour compléter notre page de connexion. 28. Page de connexion: centrisme droit, la page de connexion, je veux la laisser avec un fond blanc tel quel. Ensuite, nous allons ajouter notre mot de passe e-mail. Et puis un logo ici avec le bouton de connexion. Allons de l'avant et ajoutons ces éléments maintenant. Nous avons donc besoin d'un rectangle et d'un texte pour notre boîte e-mail. Allons de l'avant et faisons cela en appuyant sur R, puis faisant glisser un petit champ ici. Je vais faire de celui-ci une hauteur d'environ 50 pixels. Je peux le voir ici. Et puis je vais aller de l'avant et sortir de là en appuyant deux fois sur Escape , puis en frappant des textos et en ajoutant un petit e-mail par ici. Et je pense que c'est un peu gros. Nous allons donc faire 16 points pour le centre de messagerie qui durent un an et peut-être 20 pixels de n dans la zone de texte du désert. Et nous allons le mettre juste ici. Ensuite, en utilisant la commande G, nous allons en faire un groupe et dupliquer le groupe en maintenant la touche Alt enfoncée et en faisant glisser une copie. C'est donc une autre façon de dupliquer des objets. Vous pouvez maintenir la touche Alt enfoncée et tout en maintenant la touche Alt, créer une autre copie de cet objet. Je vais juste supprimer ce supplément. Et allons-y et nommons l'e-mail ici pour passer des mots. Il s'agit du champ Mot de passe. Ensuite, nous voulons un bouton. Nous pouvons donc aller de l'avant et utiliser le même rectangle. On va juste l'amener ici. Et au lieu de ce ping texte ici, nous allons aller de l'avant et le déplacer au milieu. Et nous allons appeler cela un journal n et donc une chose à noter, c'est qu'à mesure que votre texte grandit ou se rétrécit, il n'est pas exactement au milieu. Donc, ce que vous voulez faire est ajusté après avoir saisi votre texte et assurez-vous cette option de texte centrée ici pour que si vous finissez par taper davantage, les textes restent au centre. Nous avons donc notre bouton là maintenant. Nous voulons donc modifier le remplissage ou l'arrière-plan de celui-ci par cette couleur verte, mais assurez-vous de ne pas le faire à ce niveau, car en ce moment , nous modifions le groupe plutôt que le rectangle lui-même. Par conséquent, si vous ajoutez un remplissage à ce niveau, vous ajoutez un remplissage à la fois au texte et au rectangle, qui n'est pas ce que nous voulons. Ce que nous voulons, c'est un texte blanc et un rectangle vert. faisant, nous maintenons la commande, appuyez sur le texte, changeons celui-ci pour attendre et maintenons la commande. Appuyez sur le rectangle et remplacez-le en vert. Je vais peut-être faire de mon texte un boulon pour qu'il soit plus crédible. Et nous en aurons également besoin ici. Nous allons donc les sélectionner à partir de notre écran de démarrage. Maintenez la touche Alt à nouveau enfoncée et apportez ceci sur cette page. Il suffit donc de faire glisser la copie en maintenant Alt devant et en réduisant un peu plus petit en maintenant Maj et en la ramenant ici. Allons de l'avant et changeons le texte ici à partir du poids que nous avons deux noirs. Enfin, nous voulons avoir nos petites Conditions d'utilisation ici. Nous allons donc créer un nouveau texte, droit, conditions d'utilisation et politique de confidentialité. Et s'échapper de là. Et amenez ça un peu sur le côté gauche. Et comme vous le remarquez, je maintiens mes affaires alignées ici. Il est donc très important de s'assurer que tout est de la même taille et que tout soit aligné. Et c'est donc visuellement correct. Allons de l'avant et modifions cette taille de police de 21 à 14. Nous n'avons pas besoin que ce texte soit super gros. Et en fait, nous pouvons ramener le remplissage à une sorte de couleur gris clair. Et allons-y et réduisons tout un peu. Il n'est donc pas complètement au-dessus de l'autre. La chose se réunit lentement. Faisons quelques petits changements pour que cela paraisse beaucoup mieux. Tout d'abord, je recommande de faire coins arrondis lorsqu'il s'agit de zones de texte et de boutons, hum, et de supprimer au moins les bordures dures autour des boutons. Et ensuite, pour les zones de texte, vous pouvez aller de l'avant et rendre un peu plus subtil. Donc, deux choses ici. Commençons par aller de l'avant et retirer la bordure du bouton. Ce bouton n'a plus de bordure, ce qui est bien. Allons de l'avant et sélectionnons le rectangle ici et amenons les coins et pour avoir un rayon de coin de, faisons 10 puis appliquons la même chose ici. Je vais donc choisir juste le rectangle ici. Encore une fois, dans le panneau Calques, vous pouvez vous assurer de sélectionner uniquement le rectangle par opposition au groupe. Et faites la même chose ici. Je tiens juste à Commande pour sélectionner les deux calques. Ensuite, je vais aller de l'avant et taper un rayon de 10 pixels ici. Et au lieu de ce genre de couleur de bordure gris plus foncé, allons-y et ramenons-le un peu autour de cette couleur, peut-être un peu plus sombre que ça. Je pense que ça a l'air bien. Nous y arrivons lentement. De toute évidence, il reste encore beaucoup à faire. Une autre chose que vous pouvez ajouter, par exemple ici, est de dupliquer ce petit texte ici et peut-être de le mettre ici. Nous pouvons donc avoir une petite option de mot de passe oublié et aller de l'avant et aligner cela à gauche ou à droite, Désolé, imprimé un peu. Abaissez un peu notre bouton. Je pense que ça a l'air bien. Une autre petite chose est que nous pouvons aller de l'avant et à la fois le texte ici, la politique de confidentialité dans les conditions d'utilisation. Nous pouvons même aller de l'avant et les souligner en appuyant sur vous. Ce que cette partie du texte sélectionnée pour que nous puissions montrer qu'il s'agit de liens vers l'utilisateur. Allons de l'avant et déplacons cette image un peu trop près d'eux. Et je pense que ça a l'air bien. Donc, vous l'avez là. C'est la page de connexion. Et dans la prochaine leçon, nous reviendrons travailler sur notre page de vérification téléphonique. 29. Page de vérification téléphonique: Très bien, nous avons mis en place la page d'écran de démarrage, la page de connexion. Nous allons de l'avant avec notre page de vérification téléphonique. Laissez-moi aller de l'avant et zoomer à l'aide de cette touche , puis dessiner la vue Notre vue est désactivée de ce mode de zoom. Pour l'instant, je vais juste revenir rapidement à mes filaires. Très bien, donc j'ai ouvert mon filaire ici. Ce que nous voulons ici, c'est peut-être un message pour dire que c'est la vérification téléphonique avec une petite description de ce qu'ils doivent faire. Bien sûr, mettez-y pour la vérification numéro 4, ainsi qu'un petit champ de texte et un bouton suivant. Cela devrait donc être assez simple et simple. Nous avons juste besoin de deux lignes de texte. Une zone de texte que nous pouvons utiliser à partir de la page de connexion et d'un bouton suivant. Nous pouvons donc également utiliser le même bouton de connexion et nous mettrons ici pour le prochain. Allons de l'avant et faisons cela dans notre plan de travail pour une vérification à l' étranger. Donc, pour commencer, je vais sélectionner mon champ e-mail, ainsi que mon bouton de connexion. Je garde le quart de travail ici pour les sélectionner tous les deux. Vous pouvez donc voir que les groupes de champs et de boutons sont maintenant sélectionnés. Allons de l'avant et appuyez sur la commande C pour la copie. Accédez à notre page de vérification téléphonique et appuyez sur Commande V. Deux choses que je veux vous dire d'abord, lorsque vous copiez quelque chose et sélectionnez un autre plan puis collez ces éléments dans ce plan de travail. . Icsi le placera exactement là où ces objets se trouvaient dans l'autre plan de travail dans le nouveau plan de travail dans lequel vous le collez. C'est pourquoi il a exactement défini nos articles là où je l'ai eu sur cette page. C'est donc très utile si on peut dire que vous collez des éléments similaires à ceux que vous voulez dans la même position, au lieu de devoir les déplacer et les placer dans cette nouvelle position. Mais parce que comme vous pouvez le voir dans nos filaires et nous en avons, sentez-les, mais sur le terrain en haut, le bouton en bas. Ensuite, nous allons aller de l'avant et simplement déplacer cela. Nous allons donc ramener cela jusqu'à ce que nous ayons environ 140 pixels sont en fait 170 pixels. Nous avons de la place pour nos messages de vérification téléphonique. Allons de l'avant et abaissons ce bouton jusqu'à ce qu'il soit à peu près. Faisons 35 pixels à partir du bas. Encore une fois, pendant que vous faites glisser des éléments, XD vous affichera cette petite ligne rose et bleue avec un nombre qui indique nombre de pixels que vous êtes le nombre de pixels que vous êtes en bas ou par rapport à d'autres objets. Pour rappel, vous pouvez également maintenir touche Alt pour vérifier tous les côtés. Maintenant, je le vois au milieu. J'ai 29 pixels à gauche, 29 et la vitesse, et 35 à partir du bas. Donc, en quelque sorte au milieu, ici. Si vous avez votre bouton, voyons ici. Et vous voulez le centrer à nouveau. Vous pouvez utiliser ce centre d'alignement horizontal. Et une fois que vous aurez cliqué dessus, il se mettra au centre de ce bouton rapport au plan de travail ici. C'est la même chose ici avec ce champ. Je vois que je suis au milieu, donc c'est exactement là que je veux être. Mais allons-y et changeons cet e-mail par numéro de téléphone. Et nous allons créer un autre texte en appuyant sur T sur notre clavier. J'écris un téléphone. Vérification. Maintenant, parce que le dernier texte dit créé était blanc et rempli, c'est là que vous ne pouvez pas voir le texte est toujours là. C'est juste parce qu'il est blanc et que le fond est blanc. C'est un peu le mélange de la fin. Allons de l'avant et choisissons Outfile deux. Faisons comme une couleur verte ici et continuons et sauvegardons cela dans nos nuanciers. Je vais l'intégrer en appuyant sur la commande B. Pour que vous puissiez utiliser un poids de police régulier, puis aller avant et augmenter la police à 25. Parfait. Allons de l'avant et évoquons ça ici. Nous avons donc notre total pour cela. Et maintenant, nous voulons une petite description expliquer pourquoi ils doivent entrer leurs numéros de téléphone. Faisons les autres textes cette fois, nous allons créer une zone de texte. Allons de l'avant et présentons-le ici sur notre clavier pour créer cette description. Alimenté. Je vais juste lâcher prise ici et allons-y et filons-y. Veuillez entrer votre numéro de téléphone pour vérifier votre compte. Une chose que je veux vous dire, c'est que puisque je modifie le texte en ce moment, si je modifie le texte ou la taille de la police ici, comme vous pouvez le voir, rien ne se passe. Rien ne change. Et c'est parce que je suis actuellement en mode édition. Donc, tout ce que j'ai pris à partir d'ici sera une police de 15 points, mais rien d'autre ne changera. Donc, ce que vous voulez faire, c'est vous assurer que vous sélectionnez tous vos textes dans votre zone de texte, Allez-y et appuyez sur Escape jusqu'à ce que vous n'ayez plus ce type d'outil. Ensuite, sélectionnez l'intégralité de votre zone de texte , puis définissez une nouvelle taille de police. Je vais en faire 16 ici. Tray Think fonctionne bien. Et je veux juste laisser ça juste là. Ça a l'air bien. On peut peut-être les faire baisser un peu aussi bien que la vérification téléphonique ici. Et comme vous pouvez le constater, les choses se mettent en place car elles sont uniformément espacées. J'encourage donc que vous ajoutiez beaucoup d'espaces blancs à vos créations au lieu d'essayer d' entailler autant de choses que vous pouvez, c'est juste une bonne pratique. Et la dernière chose que nous allons faire, c'est d'aller de l'avant et de changer cette connexion par la suivante. Ainsi, lorsqu'ils appuient sur Suivant, vont de l'avant et leur demanderont ensuite de saisir le code de vérification du numéro de téléphone. Nous ne concevrons pas cet écran, mais il est très proche de celui-ci, sauf que vous leur demandez simplement de mettre le code de vérification qu'ils obtiennent sur leur numéro de téléphone. N'hésitez pas à faire cela en tant qu' exercice si vous le souhaitez. Mais je vais aller de l'avant et sauter ça pour l'instant. Nous avons donc maintenant une petite page de notifications téléphoniques. Très simple, très simple. Et lors de la prochaine conférence, quand il reviendra et organisez simplement un peu nos plans de travail parce qu' ce moment ils n'ont pas vraiment d'ordres. Revenons donc à la prochaine conférence et travaillons là-dessus. 30. Organiser nos tableaux: Alors, lorsque nous avons commencé à créer nos tableaux artistiques, expliqué que nous allons revenir et organiser un peu parce qu'à l'heure actuelle, c'est juste dans un ordre aléatoire ou dans l'ordre des pages qui nous avons écrit dans notre document texte. Mais maintenant, je vous encourage à aller de l'avant et à organiser vos plans de travail d'une manière qui soit logique pour vous, logique pour vos clients, et c'est simplement lisible si quelqu'un de l'extérieur ouvre ce projet et essaie de comprendre ce qui va où. Donc, la meilleure façon de le faire, le plus simple, tout d'abord, appuyez sur Commande 0 pour zoomer et voir tous vos tableaux artistiques. Ce que je vais faire, c'est que je vais aller de l'avant et séparer et regrouper des plans de travail pertinents les uns pour les autres. C'est donc la meilleure façon de faire fonctionner les choses. ce moment, l' écran de démarrage et la page de connexion vont bien ensemble car généralement, à partir de l'écran de démarrage, nous allons à la page de connexion ou à partir de cet écran de cinq, si l'utilisateur est connecté, nous allons généralement sur la page principale , puis la page de connexion et la vérification du formulaire sont également liées car généralement, après l'inscription de l'utilisateur, il sera demandé de vérifier son numéro de téléphone. Le positionnement de ces trois écrans initiaux est donc bon. À mon avis. Je pense que la page principale est également bonne là où elle se trouve. Mais ce que je veux faire, c'est que je veux séparer le profil et la page de paiement, les mettre quelque part ensemble , puis le menu et l' ordre oblique progressent ensemble. Et ensuite, l' historique des commandes devrait également à un profil car il sera accessible depuis le profil comme nous l'avons dessiné dans notre filaire ici. Allons-y et faisons-le. C'est déplacer le menu de profil juste ici. Un peu d'espacement. Et ensuite, le paiement devrait également être effectué ici car il est accessible depuis la page du menu oblique de la page de profil. Nous allons y aller de l'avant et apporter l'historique des commandes ici aussi. Et ensuite, allons de l'avant et sélectionnons tous ces trois, puis amenons-les ici. Il y a donc maintenant un peu de relation entre eux où vous allez de la page principale à la page de profil. Vous pouvez ouvrir la page de profil. Et à partir de cette page de profil, vous pouvez accéder à la page Historique des paiements et des commandes si vous le souhaitez. Et puis, à partir de la page principale, vous allez généralement au menu du restaurant. À partir de la page de menu, vous commencez à commander , puis à partir de votre page de commande vous pouvez voir la progression de votre commande. Ce type de flux est donc plus logique. N'hésitez pas à ajouter un texte si vous le souhaitez. Ainsi, nous pouvons tout à fait aller de l'avant et ajouter un outil de texte dans notre plaque de plâtre, qui est essentiellement cette zone située à l'extérieur de nos plans de travail. Nous pouvons faire des options de menu. Je vais aller de l'avant et donner un remplissage noir avec une taille de police de 100. Options de menu. Faites glisser une copie en utilisant alt ici, connectez-vous et faites glisser une autre copie ici. Commande de commande. Allons de l'avant et baissons-les un peu. Un truc génial quand on déplace des trucs. Si vous appuyez sur la flèche vers le bas, vous allez de l'avant et déplacez les choses un pixel à la fois, ou la flèche vers le haut, même chose avec la droite et la gauche. Mais si vous maintenez la touche Maj pendant que vous faites cela, vous allez procéder ce processus de 10 pixels à la fois. Il est donc beaucoup plus rapide de déplacer des objets. Cela s'applique aux tableaux d'art, sont des objets, des textes, tout ce qui est pris. Nous avons donc maintenant une sorte d'organisation de nos plans de travail en différentes sections. Nous avons les options de menu, les écrans de commande et les écrans de connexion, beaucoup plus soignés et bien plus organisés. Ensuite, nous allons revenir créer une petite structure de navigation pour nos pages de progression de commande et de commande du menu principal. 31. Utiliser une barre de navigation: Nous avons donc toutes nos pages ou nos plans de travail organisés ici. Maintenant, c'est génial. Je pense maintenant qu'il est temps de mettre en place la structure de navigation. Donc, si vous jetez un coup d'œil à ce filaire que nous avons rassemblé entre ces pages du moyen ou l'emplacement ou de l'adresse, le PJ, le menu des paiements et la commande. Nous avons une petite structure de navigation ici en haut. Maintenant, bien sûr, nous pouvons aller de l'avant et les placer ici. Mais comme je vous l'ai mentionné, Apple dispose du kit d'interface utilisateur iOS que vous pouvez utiliser pour coller barres de navigation iOS dans votre projet sans avoir à redessiner ou à recréer dans vos conceptions. Cela nous fait gagner beaucoup de temps quand il s'agit concevoir et d' obtenir ce kit d'interface utilisateur. Si vous suivez la dernière section, nous l'avons parcouru, mais nous y reviendrons à nouveau. Tout simplement, vous devez vous diriger vers le fichier, obtenir des kits d'interface utilisateur. Une fois cette page ouverte, passez à Apple Design. Il devrait être le premier ici. Et si ce n'est pas le cas, faites défiler vers le bas et trouver Parce que nous concevons un projet iOS, nous allons télécharger le kit de conception Apple. Cliquez donc sur obtenir le kit , puis allez ici à XD. Allons de l'avant et faisons deux choses. Donc, cliquez sur Télécharger sur cette option X d ici pour le modèle de conception iOS et iPad OS XD. Allons-y et faisons-le. Si vous l'avez déjà obtenu lors des conférences précédentes, vous pouvez utiliser la même. Si ce n'est pas le cas, allez-y et donnez-lui le temps de le télécharger. En attendant, passez aux polices de caractères. Et si vous n'avez pas les fans d'Apple, c'est également le bon moment pour télécharger la SF Pro, une police qu'Apple utilise par défaut dans ses applications. Nous allons donc utiliser ces profils SF également dans notre application. Allez-y et cliquons. D'accord, il existe différentes variantes de cette police sf. Il y a aussi des composés et acides SF, mono et d'autres, mais nous allons nous en tenir uniquement au SF Pro. Donc, tout d'abord pour le modèle de conception iOS 15, allez-y et passez par l'installation. l'instant, ces deux-là devraient être ouverts. Et ces pages sont-elles différentes dans Windows, mais vous devriez toujours être en mesure d'obtenir le modèle de conception iOS 15 ainsi un package de profils SF que vous pouvez installer. Donc, d'abord, je vais installer les polices en double-cliquant sur celle-ci ou ici. Je vais aller de l'avant et vous emmener à travers une petite installation, Peach, ce qui est assez simple. Et moi, Watson est superbe. Et allez-y et fermez celui-ci. Déplacez-vous à la poubelle. Et continuons maintenant et double-cliquez sur notre modèle de conception iOS 15. Maintenant, ouvrons celui-ci ici. C'est ce qu'on appelle des modèles de conception, des composants plus des guides Plus iPhone ou iPhone dot TXT. Ouvre celui-là. Maintenant, le chargement peut prendre une seconde car il s'agit d'un fichier volumineux. Mais une fois qu'il sera chargé, nous allons trouver une barre de navigation pour notre maquette. Et c'est là que tu l'as. Nous voulons donc prendre une chose à partir d'ici, c'est la barre de navigation. Allons donc aller de l'avant et zoomer sur la zone du bar ici. Et nous en avons ici, particulier à la recherche de celle-ci ici, qui est celle que nous recherchons. Nous avons également un tas de types différents. Nous avons donc une petite recherche que nous pouvons utiliser pour notre page principale. Comme vous vous en souvenez, nous avons un petit surge ici, même pour notre emplacement et nous pouvons utiliser ce style de navigation de type zone de texte. Alors pourquoi ne pas aller de l'avant et revenir à la petite pomme ici. Et allons de l'avant et sélectionnons celui-ci ici, ainsi que celui-ci ici. Je veux donc ces deux-là aussi bien que d'ici, nous allons sélectionner celui-ci aussi. Je maintiens simplement Commandement et Maj sélectionne celui-ci également. Maintenant, nous avons sélectionné ces trois personnes. Allez-y et copions. Revenez ici. Et juste de ce côté, ici, je vais aller de l'avant et coller ces n. Allez-y et traînez-les ici. Juste pour l'instant. Très bien, nous allons probablement utiliser celui-ci ici pour notre page principale. Nous allons donc copier et coller ça là-dedans et faites-le glisser vers le haut. Et nous voulons probablement en fait le même pour notre page de menu aussi si vous avez besoin de rechercher tri, faire la commande C, collez cela ici au cas où vous voudriez rechercher certains plats du menu. Pour notre page de commande, nous pouvons le faire ici. Nous n'avons pas vraiment besoin d'une barre de recherche là-bas. Et puis pour la progression de la commande, je vais copier celui-ci et le coller ici. Parce qu'alors ces pages, nous n'avons pas vraiment besoin de chercher quoi que ce soit. Nous n'avons pas besoin de cette barre de recherche. Ensuite, sous profil, nous voulons une navigation personnalisée. Nous n'avons pas vraiment besoin d'une barre de navigation. Et voici ce que nous pouvons copier ici sur ces deux pages, la page de paiement et la page de l'historique des commandes. Au fur et à mesure que nous parcourons nos créations, nous allons changer ces titres et tout ce qui se trouve dans la section ces titres et tout ce qui se trouve dans la Ne vous inquiétez pas maintenant si vous vous demandez pourquoi nous le quittons. comme c'est le cas pour l'instant, nous voulons simplement mettre en place l'ensemble de la structure de navigation. Nous avons maintenant la structure de navigation sur toutes les pages que je veux, l' exception de quelques pages je ne pense pas avoir besoin, comme une vérification téléphonique et la page de profil, qui aura ici un petit exposant pour clore cela. Et au fur et à mesure de notre conception, nous allons remplacer chaque bouton en fonction de ce qu'il devrait être. Revenons donc à la prochaine conférence pour continuer à travailler sur notre page principale. 32. Créer des vues de carte: Concevoir des vues de cartes. C'est l'une de mes parties préférées de la conception de l'interface utilisateur. Qu'est-ce qu'une vue de carte ? Quelle est essentiellement la carte vue comme n'importe lequel d'entre vous qui a généralement une image avec un tas de textes, d'icônes et de boutons, un peu comme un contenu organisé qui comprend un tas d' informations qui est utile ou pertinent pour cette page. Par exemple, si nous zoomons là-dessus, je reviens sur la conception mobile. Et si je fais défiler jusqu'à, euh, voyons cette page de commande ici. Vous pouvez voir que c'est une carte ici. Essentiellement. Il n'y a peut-être pas beaucoup de séparateur entre les différentes, mais vous pouvez créer totalement des cartes où il y a un séparateur complet et une ombre et tout ce qui une bordure ou simplement quelque chose comme ça où vous avez une image, tas d'informations ici, et il pourrait même y avoir un bouton là-dedans. est donc essentiellement ce qu' on appelle une vue de carte. Dans cette conférence, nous allons donc en concevoir un pour nos restaurants. C'est donc ici que nous pourrons parcourir les restaurants affichés dans ce panier. En revenant à mon filaire, nous avons ce pH ici sur notre page principale. Comme vous pouvez le voir ici, j'ai essayé d' esquisser cet exemple de carte ici. Et là, nous voulons un titre ou une barre oblique le nom du restaurant. Nous voulons une petite note pour montrer aux clients quelle est la lecture du restaurant. Ensuite, nous voulons un petit prix et le type de nourriture qu'ils servent. Donc, dans cette conférence, nous allons assembler cela dans une jolie interface utilisateur de petite carte. Revenons à XD et zoomons sur notre page principale ici. Et en utilisant R, je vais créer un rectangle. Juste ici. Je vais faire une hauteur d' environ 200 pixels. Allons de l'avant et sortons de là et mesurons simplement la distance et ce n'est pas tout à fait au milieu. Je vais donc utiliser la touche fléchée pour centrer ça et c'est plutôt centré maintenant. C'est donc ma petite carte. Je vais aller de l'avant et placer ici un tas de textes que nous voulons. Je vais donc juste prendre quelques notes sur le côté ici. Nous voulons le type. Allons de l'avant et modifions la taille de la police à 14. Nous voulions donc le type de nourriture. Nous voulons le nom. Je vais juste aller de l'avant et à gauche aligner ça ici. Whoops. Je veux mettre ça dans mes sports de pièce, je peux simplement écrire ce que je veux lire ainsi que la fourchette de prix. Voici donc les quatre choses que je veux. Je vais donc créer une zone de texte pour chacun d'entre eux. Donc, les premières choses, nous allons faire le nom du restaurant. Donc, en utilisant le t ici, j'ai créé une zone de texte ici. Je vais aller de l'avant et sortir de là et placer ça quelque part ici, je pense. Et une rangée en dessous. Et nous allons faire des panneaux de 2$ juste pour montrer à quel type de prix le client peut s'attendre. C'est donc notre fourchette de prix. Nous voulons quelque chose pour notre lecture. Alors pourquoi ne pas continuer et dupliquer celui-ci et faire juste comme un échantillon, vous pouvez faire 4.5. Et ensuite, entre parenthèses, on peut mettre le nombre de personnes qui ont donné un restaurant, combien de lectures ? Vous pouvez apporter ça sur le côté ? Et je pense que nous pouvons également placer une petite icône d'étoile ici. Donc, lorsque nous parcourrons les icônes, nous reviendrons et ajouterons cela également. Je vais juste aller de l'avant et l' espacer un peu. Et puis ces textes, je voulais en fait faire 12 pixels. Et le nom du restaurant, je veux qu'il soit 16 pixels pour la taille de la police. Enfin, nous avons juste besoin du type de nourriture. Alors pourquoi ne pas aller de l'avant et placer ça sur la droite ici. Nous pouvons donc faire comme exemple italien pour le type de nourriture. Et je vais aller de l'avant et juste aligner ça pour qu' il soit à 14 pixels de la droite. Et je pense qu' en arrière-plan, on peut avoir une petite image du restaurant. Ensuite, nous allons aller de l'avant et entrer des données dans cette page. Il ne s'agit donc pas seulement d'un porte-place comme celui-ci ici. Allons de l'avant et débarrassons-nous de tout ça maintenant. C'est donc notre petite carte. Revenons à la prochaine conférence. Saisissez des données réelles et peaufinez-les. 33. Polir notre carte: Très bien, nous sommes donc prêts à peaufiner notre vue de carte ici. Nous allons donc faire deux ou trois choses. Je vais passer par eux. Alors n'hésitez pas à franchir les mêmes étapes que moi ici. Et ensuite, j'expliquerai exactement ce que nous faisons. Donc, la première chose que je vais créer un rectangle, et ici je vais l'utiliser pour montrer l'image de notre restaurant. Ensuite, je vais aller de l'avant et faire baisser ces textes un peu pour qu'ils soient plutôt centrés le long de cet autre bar. Et ensuite, nous allons aller de l'avant et aligner celui-ci sur ces textes ici. Parfait. Je veux prendre mon alignement, assurer que nous sommes autour du même nombre de pixels de chaque côté. Et encore une fois, j'utilise Alt ici. Je vais donc contourner notre vue de carte ici. Allez-y et cliquons ce petit rectangle qui contient tout ici. Ensuite, nous allons aller de l'avant et arrondir les bordures, faisons 12 pixels. Et ensuite, nous allons faire la même chose , mais avec ce rectangle pour les images. Mais sauf que nous ne le ferons que dans ces deux premiers coins. Allons-y et maintenons Alt. Ce que nous modifions également ces deux-là. Faisons 12 et 12 ici. Je peux voir ces tableaux ici aussi, et je peux les modifier à partir d' ici. Je pense que ça a l'air bien. Maintenant, ce que nous voulons faire, c'est tout d'abord je vais aller de l'avant et m'assurer que ma frontière est très légère en réduisant l'opacité à quelque part ici. Et continuons et sauvegardons cela notre nuancier au cas où vous vouliez l'utiliser ultérieurement pour ces textes. Allons de l'avant et tout d'abord, sur les boulonner en appuyant sur la commande B. Et nous n'allons mettre en gras le texte plus petit ici pour qu'il soit un peu plus facile à lire. Et à partir des ressources que vous avez téléchargées, vous devriez pouvoir trouver un petit dossier d'icônes. Et à l'intérieur de ce dossier Icones, il devrait y avoir un dossier principal que vous pouvez ouvrir. Et puis à partir de là, cette petite icône ici, le point étoile PNG. Nous allons donc importer la start-up PNG. Et voilà, c'est aller de l'avant et il suffit de le faire glisser. Maintenant, la taille est beaucoup trop grande, alors allons-y et tout d'abord, passons à 20 pixels. En fait, je pense que nous pouvons faire 16 par 16. Et allons-y , apportons ça ici et réajustons les choses. Donc, tout est en quelque sorte aligné ici. Je vais aller de l'avant et regrouper ces deux-là en appuyant sur la commande G tout en les sélectionnant. Allons de l'avant et créons un groupe à partir de tout cela aussi. En appuyant sur la commande G sur tout, assurez-vous que tout est sélectionné. Maintenant, celui-ci n'est que ma barre de navigation, donc vous n'avez pas besoin de la sélectionner. On y va. Et maintenant, nous avons une vue de carte raffinée prête à être utilisée et nous sommes prêts à y ajouter des exemples de données. Mais avant cela, nous allons utiliser une grille de répétition et faire glisser cette grille de répétition verticale 3 fois. Nous avons donc trois exemplaires de ce groupe. Et maintenant, nous pouvons aller de l'avant et entrer trois restaurants différents ici. Revenons donc à la prochaine conférence pour entrer quelques exemples de données ici. 34. Saisie de données d'échantillon: Si vous êtes prêt, entrez quelques exemples de données pour notre restaurant Peach ici ou sur la page principale. Donc avant cela, je vais juste aller de l'avant et déplacer un peu tout ce groupe ou répéter la grille. Je pense que c'est mieux. Maintenant, j'ai 25 pixels de la barre de navigation, ce qui est beaucoup mieux. Voici donc ce qui est vraiment génial à propos de Repeat Grid. Lorsque vous l'utilisez pour répéter des objets et vous pouvez en voir la puissance. Vous pouvez réellement aller de l'avant et saisir des données très facilement. Si vous disposez d'un fichier texte contenant les exemples de données avec lesquels vous travaillez. Donc, si vous ouvrez vos ressources pour ce projet et que vous accédez aux exemples de données du dossier. Dans les exemples de données du dossier, vous devriez pouvoir trouver le dossier du restaurant. Allez-y et ouvrez ça. Et dans chaque fichier texte, il y a un ensemble de données différent. Il y en a donc un pour les noms des restaurants, un pour le prix, un pour les lectures et un autre pour la cassette du restaurant. Et ils sont tous en ordre. Ce que nous allons faire, c'est d' utiliser facilement ce fichier texte pour générer ces exemples de données. Donc, au lieu d'avoir à l' ouvrir et à copier et coller chaque texte, ce que nous pouvons totalement faire. Saisissez et allez et répétez ce processus. Il existe un moyen beaucoup plus rapide de le faire en utilisant la grille de répétition. Et c'est en faisant glisser le fichier texte ici. Et je vais vous montrer comment le faire en une seconde. Allons de l'avant et tout d'abord, défaites-le. Comme nous aurions juste le nom du restaurant avec un tas de noms de restaurant ici. Ce que vous voulez faire, c'est que vous voulez que ce fichier texte soit ouvert. Je vais juste aller de l'avant et le mettre de ce côté ici. Et je vais juste répéter mon XD ici. Et maintenant, ce que vous pouvez faire, c'est que vous pouvez simplement aller de l'avant et faire glisser les noms de ce restaurant pointillés sur le TXT sur votre tout premier nom de restaurant. Et quand vous le souhaitez, allez, XD va de l'avant et collera ces données dans chaque restaurant. Donc, si vous regardez ce fichier texte, il est exactement collé ces noms. Et c'est parce que nous les avons séparés en utilisant la touche Retour ou Entrée et nous avons placé le nom de chaque restaurant sur une nouvelle ligne. Donc, xc a déjà trouvé comment aller de l'avant et les coller au bon endroit. Nous pouvons donc maintenant répéter ce processus pour la tarification en surmontant le texte du signe du dollar. On y va. La lecture. On y va. Enfin, enfin, mais non des moindres, le type de restaurant. Donc maintenant, tout est collé comme prévu et nous avons un ensemble d' exemples de données qui vont aller de l'avant et redimensionner mon extérieur. Il y a juste une chose que j'ai remarqué, c'est que notre fichier texte ici ou notre zone de texte pour la bande n'est pas correctement alignée. Alors, allons de l'avant et écrivons une ligne qui soit alignée sur le côté droit. Remarque au centre, il est vraiment important de garder les choses alignées pour que vous ayez l' air visuellement correct. Enfin, je vais juste aller de l'avant et saisir les bonnes images pour chaque restaurant. Sous les images, vous devriez pouvoir trouver ce dossier de page principale. Et maintenant, nous pouvons faire la même chose, mais maintenant avec nos images. Nous avons donc trois images ici, chacune pour les différents restaurants. Et c'est aussi un ordre, 123. Nous allons donc les faire glisser dans ce petit rectangle de notre fichier XD et non dans le rectangle entier, car sinon il le collera au mauvais endroit , mais juste comme partie supérieure. Et maintenant, si j'y retourne, c'est beaucoup mieux. Maintenant, je pense que nous mettons lentement notre page principale ensemble. Nous allons donc revenir compléter cette page principale et aller de l' avant à partir de là. 35. Compléter notre page principale: Nous en avons déjà presque fini avec notre page principale ici. Je pense que jusqu'à présent, nous avons fait un excellent travail. Nous avons appris à créer une vue de carte, puis à utiliser Repeat Grid pour créer plusieurs versions de cette carte ou plusieurs répétitions. Ensuite, nous sommes allés de l'avant et saisissez des données très facilement à l'aide la fonction de collage de grille répétée de notre projet. Et j'espère que cette fonctionnalité vous a plu car elle permet de gagner beaucoup de temps. Bien sûr, ici, nous n' avons que trois restaurants. Mais si nous avons maintenu cette page continue et continue, et que nous l'avons étirée et que nous utilisons, je répète la grille, disons dix fois ou plus. Vous pouvez voir combien de temps cela gagnerait au lieu de devoir saisir chaque données manuellement. J'espère donc que vous voyez maintenant la valeur de la grille de répétition. Revenons donc sur cette page et finissons quelques choses et ajoutons simplement quelques choses et nous devrions être prêts à y aller. Je veux juste vérifier mon filaire pour m'assurer de ne rien manquer. La seule chose, c'est que nous allons aller de l'avant et changer les cartes sont-elles belles ? Nous n'avons donc qu'à apporter quelques modifications à notre barre de menus pour avoir ici une petite icône pour le menu, ou pour accéder à un profil puis à une petite barre de recherche que nous avons déjà. Allons de l'avant et revenons à notre projet. Et en fait, en deuxième réflexion, je pense que cette barre de navigation appliquerait mieux. On peut donc avoir un titre un peu grand et donc le petit titre. Donc, continuons et copions celui-ci. À la place. Supprimez celui-ci d'ici et copiez cette grande barre de navigation de titre. Ensuite, nous pourrons supprimer cette action. laisserai cette action car c'est là que nous allons mettre notre icône de menu. Et nous allons aller de l'avant et simplement redimensionner. Je vais juste aller de l'avant et les déplacer. En fait, nous allons laisser celui-là. Il suffit de remonter un peu ça et d'aller de l'avant et de le redimensionner. Et au lieu de cela, il y a un grand titre ce tarif restaurants. Et baissons-nous simplement vers le bas en appuyant sur Maj et sur la flèche vers le bas. Nous avons donc un espacement de 25 pixels. Je pense que ça a l'air bien. Et au lieu de cette action, allez de l'avant et créez une icône pour le menu des hamburgers. Pour celui-là, nous avons juste besoin de trois lignes pouvoir utiliser L pour créer une ligne. Et nous allons créer trois lignes de 30 pixels de large. Pour sortir de là, puis utiliser commande D pour dupliquer cette ligne. Et puis je vais appuyer sur la flèche Maj vers le bas pour l' espacer de dix pixels. Et puis je l'ai fait encore une fois. Nous avons donc trois lignes. Modifions ces trois lignes en définissant une bordure de deux pixels. Et allons de l'avant et cliquons sur cette petite casquette ronde. Et maintenant, nous allons aller de l'avant et apporter ça ici. Et au lieu de l'action, ou elle peut aller de l'avant et simplement supprimer l'action. Et j'ai juste ces lignes et je les sélectionne toutes ensemble, puis j' appuie sur la commande G. Et je vais renommer cette icône de menu berbère de groupe. Et modifions la couleur de la bordure par la couleur verte que nous avons pour le thème de notre application. Et ça a l'air bien. Si vous allez un peu moins large, nous allons sélectionner ce groupe de gars ici. En fait, utilisons la commande et les touches fléchées pour réduire la largeur. Il s'agit donc d'un petit raccourci où vous pouvez modifier la largeur. Et en maintenant la touche Commande et en appuyant sur la droite et la gauche. Donc j'appuie juste sur moins à gauche pour faire 25 pixels. Ensuite, allons-y et changeons cette taille, deux ou trois pixels à la place. C'est la taille de la bordure. Et je vais juste aller de l'avant et écrire une ligne qui m'assure qu'elle est au bon endroit. Une chose que je tiens à noter, c'est que cette icône n'est pas à l'intérieur de notre barre de navigation ici. Notre barre de navigation est donc en fait une instance d'un composant dont nous allons parler dans une seconde. Mais comme il s'agit d'une instance d'un composant, nous ne pouvons pas insérer directement une icône ici, et elle ne sera pas incluse dans cette instance. Il est donc séparé. Donc, si vous déplacez ça, celui-ci, bougez avec. Nous pourrions donc faire quelque chose comme regrouper ces éléments ensemble en guise de solution temporaire. Et maintenant, c'est lié les uns aux autres, mais d'autres façons, c'est pourquoi vous ne pouvez pas entrer de nouveaux éléments à l'intérieur d'une instance. Vous ne pouvez entrer que de nouveaux éléments à l'intérieur d'un composant principal, dont nous parlerons encore une fois dans les conférences à venir. En tant que VR, effectuez un zoom arrière. J'ai une jolie petite page de restaurant et maintenant nous sommes prêts à travailler sur notre page de menu pour qu'un utilisateur clique sur un restaurant, il ouvre le menu de ce restaurant. Revenons donc dans la section suivante et faisons cela ensemble. 36. Composants: Que sont donc les composants ? Nous en avons donc parlé un peu ici et là. Mais nous n'avons jamais exploré ce qu'ils font et comment ils sont utiles. Dans cette conférence, nous allons examiner comment utiliser des composants pour comment utiliser des composants accélérer votre travail de conception lorsqu'il s'agit réutiliser des objets ou des groupes au sein de vos conceptions. Ainsi, à un niveau élevé, les composants sont essentiellement des objets que vous réutilisez tout au long de votre conception, où ils ont une sorte d'élément partagé entre eux. Ainsi, lorsque vous avez besoin d' utiliser un objet dans plusieurs plans de travail, il y a plusieurs endroits. Au lieu de devoir les redessiner dans chaque page. Supposons que si vous devez apporter un changement, vous pouvez en fait les modifier au même endroit, qui est généralement appelé composant principal. Ensuite, faites-les modifier dans toutes vos instances, qui sont l'enfant de ce composant maître, appelé instances dans les composants. Ainsi, si nous regardons tout au long de notre conception, éléments tels que les champs de saisie , les boutons, les barres de navigation comme ceux-ci sont généralement transformés en composants. Et la raison en est que nous l'avons utilisé dans plusieurs endroits, nous les avons utilisés à plusieurs endroits. Disons donc que je décide d' apporter une modification, une petite modification à mon bouton ici et de modifier la couleur d'arrière-plan, la couleur d'arrière-plan, la taille de la police ou le placement des textes. Bien sûr, maintenant, supposons que je dois changer l'arrière-plan de ce bouton. Je devrais aller à deux endroits, définir une nouvelle couleur, puis copier ce code couleur, aller à l'autre bouton, puis répéter ce processus pour tous ceux que j'ai dans ma conception. Je vais juste défaire ça. Je conduisais juste en train de démontrer quoi ressemblerait la vie sans composants. Nous allons donc transformer ces boutons en composants en quelques secondes. Mais avant de le faire, allons voir quels sont les composants que nous avons déjà dans nos plans de travail. Et c'est en fait les barres de navigation ici. Par conséquent, la raison pour laquelle vous voyez cette bordure verte autour cette barre de navigation est qu'il s'agit d'un composant ou d'une instance de ce composant, nous pouvons en fait parcourir les composants sous notre bibliothèque. Donc, si vous allez à la bibliothèque, le raccourci clique sur Maj Command Y. Nous pouvons voir tous nos composants ici. Bien sûr, nous n'avons pas créé ces composants, mais ce qui s' est passé, c'est que lorsque nous avons fait glisser cette barre de navigation dans notre projet, nous les avons copiés en tant que composants. Projet de conception iOS. Donc, tous ces composants sont des composants et il y a en fait contenu dans cette zone où nous les découpons ou les barres de navigation, pas ces barres de navigation que nous avons collées ou toutes les instances. Maintenant, en ce qui concerne les composants, comment savoir si un composant est le composant principal ou s' il s'agit d' une instance où une instance avec override peut essentiellement regarder le coin ? diamant sur la forme autour de la bordure verte. En haut à gauche, vous verrez une petite gâchette en diamant comme celle-ci. Celui qui se sent comme ça est l'élément principal. Par conséquent, toutes les modifications apportées à ce composant seront appliquées aux instances. En parlant d'instances, vos instances auront une forme de diamant vide ou non remplie. Et ensuite, si vous apportez des modifications à une instance spécifique, si vous remplacez ces modifications et ajoutez ces propriétés telles que le texte à l'intérieur ou les objets, vous verrez cette petite forme avec un cercle au milieu. Cela signifie que vous avez surécrit les propriétés de cette instance. Donc, si nous revenons en arrière, nous pouvons voir que nous avons celui-ci ici qui sera écrasé parce qu'il y a eu quelques modifications. Nous voyons celui-ci là où ce n'est qu'un exemple. Nous n'avons donc pas vraiment le composant principal. Ainsi, la façon d'accéder réellement au composant principal de ces composants est d' aller de l' avant et de cliquer avec le bouton droit de la souris et cliquer sur Modifier le composant moyen. Et maintenant, ce sont les principaux composants de ma barre de navigation. Ainsi, toutes les modifications que j'apporterai à ce composant principal vont de l'avant et s'appliqueront à d'autres instances. Par exemple, si je prends le gros titre ici et voyons, je le fais 25 pixels. Il va de l'avant et s'appliquera aux deux. Grandissez ici. Si je déplace la barre de recherche, vais m'appliquer aux deux. Pour vous, supprimez le titre. Nous allons aller de l'avant et l' appliquer aux deux. Bien sûr, si je vais ici parce qu'il s' agit d'une instance, si je vais de l'avant et que je supprime quelque chose d'une instance, maintenant, elle ne sera pas supprimée d'ici parce que c'est notre principal comme vous pouvez le voir. Mais parce que maintenant nous avons écrasé cette instance, nous obtenons cette petite forme et le coin, ce qui signifie que maintenant nous avons remplacé ou instance. Donc, s'il commence à éditer les choses ici, rien ne sera effectué ici car encore une fois, c'est notre composant principal et les changements ne fonctionnent que d'une façon. Mais ce qui arrivera, c'est que l'instance partagera toujours certaines propriétés. Donc, s'il y a encore certaines choses présentes à l'intérieur de cette instance, elle procédera toujours aux ajustements tels que le positionnement de ces éléments. Mais bien sûr, si je modifie ce gros titre, rien ne changera ici car nous avons déjà remplacé le texte à l'intérieur de ce champ de texte, mais pas vraiment sa position. Maintenant, si nous modifions également sa position, nous verrons que si nous bougeons cela, rien n'arrivera à la position de ceci et au texte ici parce que nous avons remplacé les deux textes à l'intérieur et à la position maintenant. Mais nous pouvons toujours changer des choses telles que le remplissage, qui s'appliquera toujours à moins que nous n'allions dans notre cas et que nous changions également cette couleur et que nous la remplacons. Donc, tout type de remplacement en termes de position Phil, d'effets, ainsi de suite et ainsi de suite que nous effectuons, nous allons appliquer à notre instance à moins que nous ne modifiions ces propriétés. Mais si je veux aller de l'avant et supprimer réellement ces remplacements, je peux aller de l'avant et cliquer sur cette instance, puis réinitialiser l'état principal. Et ce que cela fera, c'est qu'il va aller de l'avant et changer ces propriétés à ce que nous avions ici. Et maintenant, ces remplacements ont disparu. Nous pouvons voir dans l' instance que la forme est maintenant de retour à une instance sans écrasement, cela aura plus de sens à mesure que nous commençons à transformer les boutons ou les boutons en composants. Et si vous avez des questions, veuillez les poser en cours de route. J'espère que c'est logique. Je vais l'annuler plusieurs fois pour revenir à notre barre de navigation. Comme nous l'avions auparavant. On y va. Ce sont des composants et hé, peuvent réellement créer des instances à partir d'eux et les écraser. Revenons à la prochaine conférence et transformons ces boutons en composants. 37. Convertir nos boutons en composants: Bon, maintenant que nous savons quels sont les composants et comment ils sont si utiles, convertissons nos boutons en composants afin que nous puissions les réutiliser dans votre projet. que plus tard, si vous décidez d' y apporter des modifications ou de créer une variété de boutons différents, nous puissions les utiliser plus facilement sans avoir à les changer à plusieurs endroits. Je vais donc aller de l'avant et simplement zoomer sur ma page de connexion ici. Allez-y et sortez de mon outil de zoom là-bas. Et ce que je veux faire, c'est d'aller de l'avant et de convertir ce bouton, qui fait déjà partie d'un groupe. Donc, si vous vous souvenez, lorsque nous concevons notre page de connexion, nous avons converti ou rectangle ici, qui est l'arrière-plan du bouton et le texte en groupe. Si vous ne l'avez pas déjà fait, vous n'avez pas à vous en inquiéter. Assurez-vous simplement d'avoir sélectionné l'arrière-plan et le texte de la connexion ici et le texte de la connexion ici, car c'est la partie du composant du bouton lui-même. Et pour le convertir en composant, il vous suffit de cliquer dessus avec le bouton droit de la souris et de cliquer dessus et de cliquer sur Make Component. Vous pouvez également appuyer sur Commande K sur votre clavier ou sur la touche Ctrl sous Windows. Il existe plusieurs façons de dire qu'il s'agit maintenant d'un composant. Vous pouvez donc d'abord voir qu' ici , nous avons un petit diamant rempli, ce qui signifie que c'est le composant principal. Et ici, dans le panneau Propriétés, il y a également dit composant et entre parenthèses moyennes. Et nous pouvons aller de l'avant et créer, et c'est l' état par défaut du bouton. Nous pouvons aller de l'avant et créer plusieurs états, que nous ferons dans les prochaines conférences et dans notre panneau de calques, vous pouvez voir cette petite forme de diamant. sont donc des indicateurs qui indiquent qu'il s'agit maintenant d'une composante. Et comme il s'agit encore d'un diamant rempli, nous pouvons voir que c' est le composant principal. Donc, ce que nous voulons faire, c'est placer nos principaux composants quelque part à l' écart de nos conceptions. Et la raison en est que de cette façon, nous pouvons savoir exactement quels sont les principaux composants et lesquels ne sont que des instances de ce composant. Plus tard, si vous souhaitez apporter des modifications à ce bouton au lieu d'accéder à la page de connexion et d'y apporter des modifications, nous pourrons effectuer nos modifications en dehors de l'endroit où nous avons nos composants, puis aller de l'avant et il suffit de voir que les changements ont lieu dans l'ensemble de votre conception. Alors, allons maintenant faire glisser ce composant principal hors de notre page de connexion. Et je vais aller de l'avant et placer mes composants dans le coin de mon tableau d'art ici. Donc, quelque part ici. Et nous pouvons aller de l'avant et même faire glisser une copie en utilisant tout ce texte ici et donner un titre à nos composants. Oups, on y va. Je vais juste aller de l'avant et aligner ça ici. Comme garder les choses en ligne pour qu' elles soient visuellement mieux. Alors, pendant que nous sommes ici, je vais faire deux choses. La première est que je vais aller de l'avant et changer ce texte de connexion en bouton. Et la raison étant que maintenant que nous avons fait ce bouton une sorte de bouton générique, le texte ici ne devrait pas être spécifique. Il peut donc s' agir d'un bouton aussi général d'un bouton afin que, dans chaque cas, nous puissions modifier ce texte. C'est donc la première chose. Et la deuxième chose que je veux faire , c'est que je vais aller de l'avant et cliquer sur nos bibliothèques ici. Et maintenant, vous voyez ce petit bouton. Maintenant, je vois que ce bouton s' appelle le composant 14 ici. Vous pouvez en voir une petite miniature. Nous savons donc qu'il s' agit d'un bouton et faites glisser ce composant 14 dans notre plan de travail. Nous verrons que nous en avons créé une instance maintenant, mais nous n'avons pas besoin de renoncer. Allons de l'avant et renommons cela en double-cliquant sur le titre de ce composant 14 ici et modifiez-le pour simplement enregistrer le bouton. Parfait. Et maintenant, si je retourne à ma page de connexion, je peux simplement faire glisser instance de ce bouton sur ma page de connexion. Allez-y et alignez-le ici. Assurez-vous qu'il soit bien aligné. Ensuite, allons-y et changeons maintenant nos textes en double-cliquant dessus et en écrivant une connexion comme nous l'avions fait auparavant. Où faire la même chose. Je vais appuyer sur la commande C sur mon instance ici et aller à la vérification téléphonique sur Commande V. Allons de l'avant et changer le texte de ceci pour, vous l'avez deviné ensuite. Allons de l'avant et débarrassons de ce groupe que nous avons pour le bouton, car il ne s'agit plus d'une instance. s'agit simplement d'un groupe de rectangle et d'un calque que nous avons. Allons de l'avant et sortons ça. Permettez-moi de vérifier l'espacement pour qu'il semble que nous soyons à 35 pixels du bas. Maintenant, nous allons aller de l'avant et supprimer cela et déplacer que sur deux sont la même position pour ce bouton. Nous utilisons maintenant des instances de ce composant. Et comme vous pouvez le voir, il y a un petit point à l'intérieur de cette forme de diamant, ce qui signifie qu'il s'agit d'une instance avec quelques remplacements. Et cette priorité, c'est les textes que nous venons de changer. Par exemple, si je reviens à mon bouton et que tout à coup je décide que je veux que mon bouton ait, disons un fond bleu. Je peux simplement aller de l'avant et changer la couleur d'arrière-plan ici, disons que vous avez sauté mon bouton. Et si je clique et que je retourne à mes créations, je peux voir que ces instances ont également pris la propriété de cette couleur d'arrière-plan. C'est pourquoi il est utile d'utiliser des composants pour ce que vous faites. Répétez vos créations, comme ces boutons, comme les champs de texte ici. Et maintenant, avec cela, je veux vous donner un exercice pour transformer ces champs de texte en composants et créer des instances et les faire glisser vers les mêmes positions ici. Et nous le ferons ensemble lors de la prochaine conférence. 38. Solution d'exercice des composants: Très bien, la première chose que je veux faire est aller de l'avant et de refaire ce changement de couleur pour nos boutons avant de nous lancer dans notre solution d'exercice. Passons donc à notre composant. Double-cliquez pour sélectionner le rectangle et rétablir la couleur verte du remplissage. Si ce n'est pas le cas, si vous n'avez pas créé nuance pour cette couleur, entrez ce point hexadécimal dans votre sélecteur de couleurs et cliquez sur cette icône plus pour ajouter cette couleur à notre nuancier. De cette façon, nous pouvons facilement y accéder. Parfait. L'exercice consistait donc à transformer ces champs de texte en composants plutôt que de simples groupes ici. Nous allons donc le faire très rapidement en dupliquant simplement ce champ de texte en dehors de l'aide d'ALT. Je ramène ça à la section des composants ici. Et je vais aller de l'avant et appuyer la commande K pour transformer cela en composant. Allons de l'avant et veillons à ce que vos bibliothèques soient ouvertes ici et renommons ce champ en champ de texte afin que nous sachions en quoi consiste ce composant. Et pendant que nous sommes ici, continuons et cliquons sur ce champ de courrier électronique et commençons et saisissons, s'il vous plaît. S'il vous plaît, détenteur, nous y allons. Une seule ligne. Nous allons créer des instances dans la page de connexion et de vérification du téléphone et remplacer par ces groupes que nous avons. Et nous le faisons simplement en allant page de la bibliothèque et en faisant glisser un champ de texte sur ma page de connexion. Il existe également un autre moyen de créer des instances sans utiliser le panneau de bibliothèque. Et c'est d' aller au composant, à vos principaux composants. Allez-y et appuyez sur Copier. En appuyant sur Commande C ou Contrôle C sous Windows. Accédez à votre page de connexion, puis appuyez sur Commande V. Et ce qui est fait est créé une instance de ce champ de texte dans notre page de connexion. Je vais changer le texte ici par e-mail. Et je vais faire glisser ceci ici, puis créer une autre copie de cette instance ici et changer cela en mot de passe. Mais bien sûr, nous avons ce groupe, les groupes des champs de texte de courrier électronique et de mot de passe sous ces couches. Allons donc de l'avant et débarrassons-en aussi en nous dirigeant vers nos couches. Et je pense qu'il devrait s'agir de ce groupe 2 et du groupe 1, que nous pouvons voir parce qu'ils créent ce point culminant bleu. Continuons donc en cliquant sur les deux en maintenant la touche Maj enfoncée et en appuyant sur Supprimer. On y va. Nous avons donc maintenant des exemples de ces combustibles textes. Nous pourrions faire la même chose en copiant une instance dans notre ancienne formation et en changeant ce chiffre par quatre. Et en faisant la même chose et en supprimant ce groupe un. Parfait. Nous avons donc maintenant des instances de ces champs de texte. Et voyons à tout moment avec le site pour, par exemple, rendre la couleur de cet espace réservé un peu plus tard. Comme pour cette couleur ici, elle s'appliquera à tous mes champs de texte. Parfait. Nous ferons une petite pause ici, puis nous reviendrons dans la prochaine conférence pour travailler sur notre page de menu. 39. Cartes de objet de menu: Nous sommes prêts à travailler sur notre page de menu. Donc, cette page de menu, à ne pas confondre avec la page de menu oblique de la page de profil. Voici notre page de menu de restaurant. Donc, ce que nous voulons ici, si je reviens rapidement à mes filaires, voici simplement un menu qui sépare les catégories d'articles, tels que les drains et la moyenne, les plats, les desserts et tout dans différentes sections avec des cartes qui affichent ces aliments au client afin qu'il puisse aller de l'avant et parcourir ce que possède le restaurant. De cette façon, ils savent qu'ils peuvent choisir ce qu'il faut commander à partir de là. Lorsque nous présentons notre page de menu, nous allons utiliser deux outils importants dans XD. L'un d'entre eux, c'est ce que nous avons déjà appris, c' est-à-dire les composants. Nous allons utiliser des composants pour ces cartes ici pour les aliments. Donc, si vous souhaitez les réutiliser, voyons dans notre page de commande ou notre page Progression ou n'importe où ailleurs, nous pouvons simplement faire glisser des instances au lieu de devoir refaire cela. Nous pouvons donc également créer différents états pour eux au fur et à mesure que nous avons conçu les composants. La deuxième chose que nous allons apprendre est comment utiliser des piles dans XY, ce qui est très utile. Ainsi, dans une vue de tableau comme celle-ci où nous avons des articles après articles, également de la même manière que la page du restaurant ici, qui est une vue de table d' articles ou de restaurants. Dans ce cas, les piles sont un outil utile, similaire à la grille de répétition, mais différent à certains égards. Et je vais vous montrer comment cela fonctionne pour que vous appreniez comment utiliser différents outils pour créer ce type d'utilisation. Alors, sans plus tarder, montons ici et travaillons sur nos cartes alimentaires de menu. Puisque cette page est principalement composée de cela ainsi que des différentes catégories qui créeront également ces sections. Alors, commençons par travailler sur nos cartes alimentaires, puis nous allons concevoir les différentes sections. Ensuite, nous allons terminer la page entière et utiliser des piles pour organiser nos articles. Revenons donc à XD. La première chose que je veux faire est d'aller de l'avant et de créer un composant pour ces aliments en fonction de ce dont nous avons besoin. Avant cela, notons tout ce dont nous avons besoin dans notre vue panier afin de pouvoir concevoir facilement ces champs de texte et ces images. Bien sûr, ici, nous aurons besoin d'une image de la nourriture. C'est donc une chose qui manque dans cette liste, mais il est en quelque sorte sous-entendu qu'il y aura une image de la nourriture ici, ainsi que la description du nom, prix, les calories et un plus un moins bi. Nous allons donc y prendre note en nous rendant simplement à notre section composants dans nos conceptions. Et je vais appuyer sur T pour créer un champ de texte. Faites glisser ici, prenez quelques notes en évaluant l'image. Un peu sombre pour mes textes ici. Je vais donc aller de l'avant et le rendre noir. Allons de l'avant et écrivons une image. Aliments, élément oblique, nom, description, calories, boutons pour ajouter une barre oblique, Supprimer l'article. Est-ce que je crois que c'est tout et le prix, bien sûr, oui. Allons de l'avant et ajoutons le prix. Voici donc les cinq données ou contenus dont j'ai besoin dans la vue de mon panier. Alors commençons par créer un rectangle pour l' arrière-plan de ma vue de carte. Et je vais créer ce rectangle d'environ 100 pixels de hauteur, en 325 pixels de largeur. Et vous pouvez voir que du côté droit ici, vous pouvez aller de l'avant et les modifier également. Je vais aller de l'avant et zoomer ici et apporter ce texte ici. Zoomons et décidons ce qu'il faut placer. La première chose que je veux faire est donner à ce rectangle un style similaire à celui de mon champ de texte ici en termes de rondeur ou de bordure, ainsi que de couleur de la bordure. Maintenant, si vous vous souvenez de la façon dont nous faisons cela, nous allons simplement cliquer sur notre rectangle ici, assurez-vous que le rectangle est sélectionné et non le composant alimenté en texte entier. Appuyez sur Commande C. Et moi, allez-y et cliquez sur votre rectangle ici et appuyez sur Option Command V. Et comme vous pouvez le voir maintenant, nous avons le même style. Parfait. Donc, ce que je pense ici en ce qui concerne l' image , c'est de créer une sorte d'image ici pour notre produit alimentaire sur le côté gauche. Et ensuite, sur le côté droit, nous allons énumérer ces textes. Nous allons donc dupliquer ce rectangle en appuyant sur la commande D. Nous en avons maintenant deux. Et je vais aller de l'avant et réduire celle-ci en traînant de ce côté. C'est tout ce que j'ai une largeur d'environ 35. Une chose que je tiens à souligner, c'est que la plupart des images ont un rapport de quatre à trois. En règle générale, lorsque nous créons images ou que nous ajoutons des images à notre conception, nous voulions atteindre ce rapport de quatre à trois. Donc, si vous voulez être précis, vous pouvez simplement rechercher un calculateur de ratio sur Google. Ensuite, je vais aller de l'avant et cliquer sur le premier lien. Donc, si vous voulez un rapport hauteur/largeur de 43 , nous savons que notre hauteur est fixe, soit 100 pixels. Revenir ici, ou la hauteur représente les trois ici. Nous voulons donc calculer pour voir ce que devrait être le C. Et comme on peut le constater, il devrait être de 133 pixels. Cela nous donnera donc un rapport hauteur/largeur de 4 à 3. Et donc si nous y retournons, j'en ai 135 ici. Je peux utiliser la commande et la flèche gauche deux fois pour réduire cela à 133. Maintenant, nous avons presque un rapport d'aspect quatre par trois parfait. Et la raison pour laquelle c'est important, c'est que lorsque nous faisons glisser des images dans notre carte ici, presque comme si elles ressemblent à une descente sans qu'elles soient étirées ou semblables à la taille inappropriée. Une des choses que je veux faire ici est d'aller l'avant et de cliquer sur mon rectangle. Descendez dans ces deux coins que j'ai et utilisez Alt pour les définir à 0. Assurez-vous donc de tenir vieux pour faire glisser ces coins jusqu' à 0 rondeur. Nous avons donc notre image et ensuite nous allons écrire notre autre texte. Et ici, pour ce faire, nous allons rapidement créer un tas de champs de texte. Le premier sera donc le nom de l'article. Je veux que ce soit à 10 pixels du haut. Maintenant, pour la description, je veux faire une zone de texte en appuyant sur T, en faisant glisser ici. Donc, si vous regardez juste ici, ça aurait fière allure. J'y vais et j' écris une description. Et je vais changer cette couleur de remplissage pour une couleur gris plus clair, quelque chose comme ça. Et nous allons aller de l'avant et changer le nom de notre article par cette couleur que nous avons ici, qui est en quelque sorte un gris foncé. Si vous n'avez pas cette couleur, saisissez ce code hexadécimal et vous obtiendrez la même couleur. Apportons une description un peu plus haut et veillons ce qu'elle ait une hauteur fixe jusqu'ici. Donc, si les descriptions sont plus longues que cette zone de texte, nous allons aller de l'avant et être en quelque sorte coupés. Celui que je mets les données doit donc s'assurer que la description est trop longue. Je vais aller de l'avant et copier cet autre champ de texte ici. Et nous allons mettre les calories. On va juste faire 0 calories ici. Et allons de l'avant et faisons une taille de 10 pixels pour cela également. Et posez-le ici avec le même pixel en bas, dix pixels. Nous avons donc obtenu l'image, nom de l'article, la description, les calories et les deux derniers articles dont nous avons besoin sont les boutons pour ajouter et supprimer cet article à notre commande, ainsi qu'un petit prix ici pour l'article. Je pense que nous pouvons mettre le prix juste à droite des calories ici. Nous pouvons donc aller ici et en donner un exemple, 000 dollars, puisque ce n'est qu'un champ de texte, qui a l'air bien. Enfin, nous avons juste besoin nos boutons pour ajouter et supprimer cet article. Nous allons donc faire une pause rapide ici, revenir dans la prochaine conférence pour travailler sur ces boutons transformer cela en composant et compléter notre page de menu. 40. Créer un compteur de boutons: Donc, parce que ce bouton ici pour ajouter et supprimer des articles est un peu plus compliqué qu'un bouton normal, nous voulons montrer au client qui utilise cette application la possibilité non seulement d'ajouter et de supprimer des articles, mais également de voir le nombre de quantités d' articles qu'ils ont ajoutées à leur commande. Nous voulons donc créer un design unique pour qu'il fonctionne bien et qu'il soit également fonctionnel. J' ouvre donc mon bloc-notes ici pour faire un petit croquis sur mon téléphone. Vous pouvez suivre si vous le souhaitez, ou vous pouvez simplement voir ce que je fais ici. Je vais donc aller de l'avant et prendre mon outil stylo ici dans cette application de notes que je n'ai pas ouverte. Ce que je veux faire, c'est bien sûr que nous avons le bon côté de notre carte, ce que je vais visualiser comme ça. Donc, ce que je veux faire, c'est aller de l'avant et leur montrer le nombre d'articles qu'ils ont ici. Disons donc qu'ils ont deux de ces articles avec une petite icône plus et moins ici, ou des boutons pour les guider, supprimer ou ajouter des articles à leur commande. Peut-être que vous faites un peu de forme arrondie ici pour leur permettre ajouter et de supprimer ces éléments. Nous allons donc travailler à la conception ce jeu de boutons ici dans cette conférence. Nous allons donc créer ce design similaire dans notre XD maintenant. J'ai donc ouvert mon XD. Et ce que je veux faire, c'est créer un composant séparé pour que nous puissions réutiliser ce type de bouton de compteur. J'aime bien l'appeler ailleurs au cas où nous en aurions besoin. Allons de l'avant et descendons ici en bas de cette vue de carte ici, je veux créer trois rectangles en appuyant sur R. et je veux créer trois carrés. Et je reste ici pour verrouiller les proportions. Et je voulais que ce soit 28 pixels sur 20 pixels. Parfait. Maintenant, sortons de l'outil Rectangle et sortons de l'outil Rectangle et appuyez deux fois sur Dupliquer ou Commande D pour créer deux copies. Et je vais juste aller de l'avant et utiliser la touche Maj et la flèche vers le bas pour abaisser cette copie et l'autre copie également. Et je vais aller de l'avant et juste remonter ce rectangle pour qu' ils soient un peu au-dessus de l'autre comme ça. La même chose avec celle ici. Et j'utilise simplement les touches fléchées pour les déplacer. Tout d'abord, je veux les sélectionner tous et changer cette couleur de bordure par une couleur de bordure plus claire que nous avons ici. Deuxième chose pour ce rectangle ici, je vais aller de l'avant et cliquer sur ce bouton pour séparer les rayons de la bordure. Maintenant, pour le taux supérieur gauche et supérieur, faisons un rayon d'angle de six pixels. Pour ce rectangle ici, faisons le contraire. Donc, les six pixels en bas à gauche et en bas à droite. Et maintenant, je veux aller de l'avant et créer une petite icône moins et plus. Et nous pouvons le faire en utilisant l'outil de ligne. Allez-y et cliquez sur L et dessinez une sorte d'icône moins ici. Appuyez sur Echap pour sortir de l'outil de ligne. Et je vais aller de l'avant et lui donner une taille 2. En ce qui concerne la bordure avec capuchon arrondi, assurez-vous qu'elle est alignée au centre et non pas de créer une icône plus. Je vais créer une copie de cette ligne en maintenant Alt et en faisant glisser une copie de ce côté ici. Appuyez ensuite sur Commande D pour dupliquer cela et faire pivoter de 90 degrés. Nous avons donc maintenant deux lignes. L'un a fait pivoter de 90 degrés pour créer cette icône plus. Allons de l'avant et donnons à ce rectangle un remplissage de vert, le même vert que nous avons. Et celui-là, je vais faire une sorte de couleur d'accord comme le gris ici. Vous pouvez copier ce code hexadécimal pour recréer la même couleur. Et puis pour mes icônes plus et moins, lorsque je maintiens la touche Maj enfoncée, cliquez sur toutes ces lignes, assurez-vous que toutes les lignes sélectionnées, puis modifiez-les pour attendre. Et enfin, ajoutons un petit compteur ici en appuyant sur T, en entrant au centre de celui-ci, et en écrivant 0. Et assurez-vous d'avoir 16 pixels pour la taille de votre police, ligne ou le centre. Pour que si vous changez ce nombre, disons à dix, il ira de l'avant et sera centré. Mais bien sûr, ce n'est pas centré, donc je vais m'échapper. Je vais cliquer sur Echap pour quitter l'outil de texte et le réduire jusqu'à ce qu'il soit centré. l'heure actuelle, nous avons un petit bouton de compteur que j'aime appeler ce R que nous pouvons utiliser pour nos articles afin que nous puissions ajouter ou supprimer des articles à notre commande. Que faisons-nous et cliquez sur tout ici et appuyez sur la touche de commande pour transformer cela en composant principal. Et maintenant, je vais faire glisser une instance de ce composant principal en maintenant Alt et en amenant votre copie ici avec neuf pixels de chaque côté. Allons de l'avant et faites-le glisser sur tout et assurez-vous que nous sélectionnons tout et notre panneau Calques. Puis appuyez sur Commande K pour créer ce composant également. Rendez-vous dans les bibliothèques et renommez ce composant ici en vue de notre carte d'article. Et puis cette composante ici aussi, faisons-le. Mais au comptoir. Parfait. Une chose que je veux faire est de revenir ici, sélectionner ce texte et de lui donner un remplissage de la couleur grise que nous avons au lieu du noir. La lumière peut parfois être un peu difficile pour les textes. Nous y faisons donc un peu une couleur un peu plus foncée, un peu plus facile pour les yeux. Parfait. Et cela s'appliquera automatiquement ici aussi, car il s'agit d'une instance de ce composant. Et c'est là que tu l'as. Nous avons la vue de notre panier. Et maintenant, nous allons revenir dans la prochaine conférence pour utiliser des piles afin de travailler sur notre page de menu. 41. Utiliser les piles: Alors, qu'est-ce que les cerfs ? Comment l'utiliser pour rendre notre processus de conception beaucoup plus rapide et plus efficace ? Eh bien, je vais vous montrer comment fonctionne les piles lorsque nous concevons notre page de menu. Je vais donc zoomer ici, me débarrasser de ce texte ici et aller sur ma page de menu. Tout d'abord, je vais aller de l'avant et choisir un titre ici dans Menu. Et puis modifiez ce bouton d'action ici en panier, qui va également faire une petite icône plus tard si vous le souhaitez. Ensuite, changez ça en restaurants. C'est donc maintenant un peu pertinent. Et ensuite, ici, ce que nous voulons faire, c'est séparer nos cartes par catégorie. Nous voulons donc des catégories de boissons aux locataires, ainsi que des entrées, des plats, etc. Je vais aller de l'avant et sélectionner cette page de menu et la faire glisser pour qu'elle soit plus longue que ma vue ici, nous puissions insérer plus d'éléments ici, 1500 pixels de hauteur. que montre ce petit séparateur ici, c'est notre point de vue principal ici. Ainsi, lorsque nous ouvrons cet aperçu du bureau ou l'aperçu de notre appareil, c' est ce que verra l'utilisateur. Tout ce qui va au-delà de cela sera coupé à moins que nous ne fassions défiler ce contenu afin que l'utilisateur puisse faire défiler le contenu pour voir le reste du contenu ici. Et vous le verrez alors que nous commencerons le prototypage. Mais d'abord, créons différentes sections en appuyant touche T sur notre clavier et en écrivant des entrées. Et je vais placer ça ici en haut, à 30 pixels du haut ici. Je ne l'ai pas déplacé avant qu'il se trouve à 25 pixels du haut. Maintenant, parce que je travaillais sur les polices ici ou sur les textes ici. Xy est allé de l'avant et a donné mon texte comme un style similaire, qui est le texte SF pro de 17 pixels ici. N'hésitez donc pas à aller de l'avant et à appliquer ces changements. Mais dans les prochaines conférences, nous examinerons également des textes. Mais assurez-vous qu'il s'agit d'une taille de police similaire. La police n'a pas autant d'importance à ce stade. Nous allons aller de l'avant et les changer dans les prochaines sections. Maintenant, ce que nous allons faire, c'est d'aller de l'avant et de faire glisser une copie de cette vue de carte d'objet ici. Et allez-y et alignez-le également sur la gauche. Et donnez-lui un espacement de 23 pixels à partir de la gauche. Similaire à cet apéritif ici. Je vais juste aller de l'avant et aligner à gauche ce texte d'entrée. Et maintenant, une chose que vous remarquez est que la carte ici ne remplit pas complètement la largeur de la vue que nous avons ici. Nous reviendrons donc résoudre ce problème dans une prochaine conférence. Mais pour l'instant, allons-y et apprenons comment utiliser balises pour ajouter d'autres éléments. Donc, ce que je vais faire pour utiliser les taxes, allez-y et regroupez ces textes d'apéritif ainsi que cette instance. Allez sur notre panneau de calques, nous pouvons le voir. Et nous allons les regrouper en appuyant sur la commande G. Pour utiliser des piles, nous devons regrouper les éléments afin que XD nous donne cette option pour utiliser cette fonctionnalité de pile. Nous allons donc continuer et cliquer sur Activer la pile. Et maintenant, ce qui se passe, c'est que ce groupe s' est transformé en pile. Nous pouvons voir comment cela fonctionne lorsque nous commençons à ajouter des articles. ce moment, nos objets ici, qui ne sont que des textes d' apéritif, ainsi que cette instance Vue de carte d'objet que nous avons. L'espacement est de 20 pixels. Donc maintenant, vous verrez si nous allons de l'avant et cliquez sur cette instance et cliquez sur Commande D. Nous allons le faire une fois de plus. Xd va aller de l'avant et a effectivement placé ces instances à 20 pixels l'une de l' autre en fonction de ce nombre que nous avons ici. Donc, si vous cliquez sur l'ensemble du groupe en fonction de ce nombre, qui est de 20 pixels, c'est ce que sera l' espacement de tout. Si nous modifions cela et que nous le faisons, voyons, 30 pixels. Maintenant, les choses auront un plus grand espacement ou nous pouvons aller plus bas et faire 15. Et je pense que dans notre but, 15 sont vraiment bons. Nous avons donc maintenant une petite partie d' apéritifs. Et je vais vous montrer quelle est cette option de rembourrage ici et pourquoi elle est utile. Donc, dans nos piles, si vous cliquez sur cette petite icône, cela va changer nos piles en une option horizontale. Ainsi, comme vous pouvez le voir, il continuera à continuer horizontalement au lieu de verticalement, ce qui est cool. Si vous avez quelque chose que nous voulons faire défiler horizontalement jusqu' à Brenna, nous voulons la verticale. Allons donc de l'avant et changeons cela en vertical. Et parce que nous l'avons fait, nous avons déplacé nos textes d' entrée ici. Nous allons donc aller de l'avant et déplacer cela vers la gauche de notre groupe ici. Et maintenant, si je frappe la Commande D sur tout ce groupe pour que nous puissions travailler sur les arbres. Je peux faire glisser ça ici et je peux le placer exactement au bas de cet autre groupe. Donc, le problème avec cela, c'est qu'en ce moment, si nous allons de l'avant et créer plus d'objets, ma pile pour les hors-d'œuvre, cette autre section ou cette autre pile ne disparaîtrait pas. Donc, ce que je peux faire, c'est créer des piles imbriquées, qui signifie que je peux aller de l'avant et maintenir la touche Maj enfoncée pour sélectionner ces deux groupes, puis appuyer sur Commande G et transformer cela en pile. Et maintenant, ce qui se passe, c'est que nous avons un groupe qui contient deux piles à l'intérieur. Un pour les hors-d'œuvre et celui-ci, nous allons changer le texte en entrées. On y va. Et maintenant, ce que vous pouvez faire est d'aller de l'avant et d'ajouter un rembourrage à cela sur la pile ici. Donc, si j'ajoute un rembourrage de 20, cela ira de l'avant et donnera 20 pixels d'espacement de tous les côtés. Si je ne veux que le rembourrage supérieur, ce qui est le cas principal ici, nous pouvons utiliser ce petit bouton pour créer le rembourrage supérieur de 20. De cette façon, nous n'avons qu'un espacement de 20 pixels. Et la droite, la partie inférieure et la gauche ne sont pas vraiment affectées. Et maintenant, nous avons un espacement. Et dans ce cas, maintenant, si je vais de l'avant et que j' ajoute d'autres hors-d'œuvre, les entrées seront repoussées vers le bas. Parce qu'il s'agit d'une pile imbriquée. Vous pouvez maintenant voir la valeur des piles, surtout si vous avez plusieurs catégories d'articles. Contrairement à notre page principale du restaurant, où nous utilisions la grille de répétition. C'est super cool. Vous pouvez l'utiliser dans vos conceptions et plusieurs sections. Et je vous encourage à jouer avec elle et à voir ce que Stack a à offrir. Maintenant que nous avons la configuration, nous allons sélectionner le groupe pour les entrées et le dupliquer en appuyant sur la commande D. Et cela a automatiquement créé une autre pile ici pour moi. Et je vais aller de l'avant et changer cela en déserts. On y va. Nous avons maintenant un tas d'objets. Nous pouvons aller de l'avant et supprimer ce troisième ici et juste prendre deux entrées. Et nous pouvons aller de l'avant et dupliquer celle-ci deux fois pour avoir deux entrées de plus et faire un autre désert. Ou allez-y et appuyez sur Commande Z pour annuler celle-ci. Et ainsi de suite et ainsi de suite. Tout sera redimensionné correctement. Je vais aller de l'avant et amener tout ce groupe dans les centres. Donc, il a aussi l'air visuellement centré, ce qui me semble bien. Et la prochaine conférence, Revenons remplir notre menu avec quelques exemples de données. 42. Compléter notre page de menu: Très bien, maintenant que nous avons mis en place nos piles pour les éléments du menu, nous sommes maintenant prêts à remplir notre mini-page avec des exemples de données. Il n'a donc pas l'air si fade ici et préparez-vous à passer à nos autres pages. Ainsi, dans les dossiers des ressources de ce projet, vous trouverez deux dossiers. L'un pour les exemples de données, c'est-à-dire où nous accédons également aux exemples de données de nos restaurants, ainsi qu'une autre pour notre page de menu sous images afin que nous puissions accéder à certaines images de nos articles ici. Mais je vais aller de l'avant et faire un peu plus petit pour que nous puissions voir ou dossiers ici. Et ce que je vais faire, c'est d' abord d'aller de l'avant et de remplir notre menu ici avec les images, puis de suivre le texte. Je vais donc le faire pour les annonceurs , puis pour les entrées et les déserts, je vous laisserai le soin. Alors, pour l'apéritif, passons aux images sous les hors-d'œuvre et faisons glisser cette bruschetta, qui est la première ici. Ce que vous remarquerez, c'est que le recadrage de l' image n'est pas le meilleur. Donc, ce que vous pouvez faire est de double-cliquer sur l'image ici et de la déplacer. Donc, la partie principale de la nourriture, qui est ce que nous voulons exposer, est centrée. Parfait. Utilisez la touche Echap pour sortir de cet objet. Allons de l'avant et faisons la même chose pour notre image de pain fourré au fromage ici. Et puis pour le texte ici, je vais ouvrir notre fichier texte appelé « food dash apéritifs » ou « TXT ». Il y a aussi les déserts et les entrées que vous pourrez utiliser. Et donc, à partir d'ici, je vais copier le nom de ce plat jusqu'au nom de l'article, puis à la description ici. Ainsi que, comme nous l'avons mentionné, s'il y a une description trop longue, XD va la recadrer zone de texte que nous avons. Mais une chose qui ne me satisfait pas, c'est l'espacement entre la description et ce bouton de compteur. Je vais donc aller de l'avant rapidement nos composants et m'assurer que cette taille de texte de description, un peu espacée du bouton Compteur. Donc maintenant, si on y retourne, je devrais avoir l'air un peu mieux. Pour les calories. Nous l'avons également ici. C'est 540 pour celui-là. Allons de l'avant et mettons ici. Et puis le prix est de 999. Et encore une fois, lorsque nous mettons les exemples de données, nous constatons certains problèmes liés à l'espacement. Cela pourrait donc être un peu plus espacé. Je vais donc revenir à notre composante et faire ces petits ajustements en déplaçant un peu l'icône du dollar. Peut-être 25 pixels. Bien mieux. Je vais faire la même chose pour l'échantillon de pain fourré au fromage. Saisissez les données dans. Et encore une fois, vous pouvez toujours voir le même type de problème avec le texte ici. Par conséquent, ici pour le nom de l'article, je vais le changer pour une taille fixe, puis faire glisser ici également. Et comme nous le modifions en taille fixe, je vais aller de l'avant et modifier la taille de la police à 14. Je pense que c'est mieux. Si j'y retourne. Maintenant, nous pouvons voir qu'il s'agit d'une meilleure taille. Allons de l'avant et modifions la description ici. Parfait également au prix. Pour celui-ci, je peux voir ici un 99. Les calories sont trois, 95. Parfait. Maintenant, nous avons nos hors-d'œuvre. Je vais rapidement, avancer rapidement dans le reste d'entre eux. Mais à mesure que vous aurez l'idée maintenant et je vous verrai dans une seconde. Maintenant, juste un coup d'œil, vous pourriez avoir faim alors que vous travaillez sur cette partie de l'application. Je ne vais pas mentir. Il m'est arrivé quelques fois. Alors n'hésitez pas à faire quelques pauses ici pour manger de la nourriture par gravité si vous le souhaitez. Et c'est là que tu l'as. Je suis allé de l'avant et j'ai tout copié et collé ici. Je sais donc que c'est un travail un peu fastidieux, mais notre page est certainement meilleure avec de véritables exemples de données ici. Parfait. Nous avons maintenant complété notre page de connexion ou notre page vérification téléphonique ou notre page menu et de menu de l'écran de démarrage. Et prêt à passer enfin à nos pages de commande. Et le paiement du profil et l'historique des commandes sont l'exercice pour vous. Nous allons donc faire une petite pause ici et revenir dans la section suivante pour continuer la conception de notre application mobile. 43. Ressources UX: Donc, en ce qui concerne la conception de l'interface utilisateur et de l'interface utilisateur, quelles sont les différences ? C'est l'une des premières questions posées de nombreux nouveaux designers. Je pense donc que c'est moment opportun de faire une pause pour passer en revue certains des conseils UX que j' ai pour vous avant terminer notre conception mobile. En ce qui concerne la conception de l'interface utilisateur, interface utilisateur est potentiellement une interface utilisateur. Il s'agit donc de l' application ou du site Web ou de l'interface que vous concevez pour que l'utilisateur puisse utiliser. Il s'agit généralement du design visuel, des couleurs. Je suis un graphiste qui travaille généralement sur cette interface. Et il se compose des mises en page des objets sur toute la page, la typographie, de tout ce que vous pouvez voir et interagir en tant qu'utilisateur. Aujourd'hui, l'expérience utilisateur est un peu plus compliquée, c'est essentiellement l'expérience utilisateur. C'est ainsi que l'utilisateur interagit réellement avec la conception. Donc, pas seulement l' aspect visuel et ce à quoi il ressemble, mais plutôt la façon dont ils interagissent avec lui. Par exemple, le cadrage filaire et prototypage doivent faire davantage avec la conception UX, car vous rassemblez l'expérience pour l'utilisateur et que le placement des objets a rassemblez l'expérience pour l'utilisateur et que le placement des objets un impact direct sur la façon dont l'utilisateur a besoin. utilise l'application, etc. interface utilisateur est donc essentiellement la partie de la conception que vous pouvez voir et l'UX est une partie de la conception que l'utilisateur peut ressentir. Je pense que l'une des excellentes ressources disponibles en ligne que vous pouvez consulter pour améliorer vos compétences en conception UX, ce qui pourrait prendre un certain temps. Habituellement, la conception UX prend un peu plus de temps pour se perfectionner et se rétrécir. Maintenant, si vous accédez à ces lois sur les liens d'UX.com, vous pourrez accéder à un ensemble de trucs et astuces en tant que nouveau concepteur UX que vous pourrez utiliser. Je vais vous laisser le soin d'aller plus loin. Mais sur ce site, vous trouverez un ensemble de trucs et d'astuces tous mis et des formes de lois sur ce que vous devez faire dans votre conception. Je vais donc vous donner un exemple. Cette loi de proximité signifie que les objets proches ou proches les uns autres ont tendance à être regroupés ensemble. Je peux cliquer ici pour en savoir plus à ce sujet. Mais essentiellement, il explique pourquoi la proximité est importante dans la conception et quel type de relation elle établit avec l'objet à proximité, etc. Une fois que vous avez terminé, vous pouvez aller de l'avant et consulter encore plus de lois. Il y a beaucoup de bonnes lois ici pour la conception UX. Bien sûr, vous pouvez aller plus en profondeur et consulter toutes ces lois ici. Je ne vais pas les parcourir un par un. Dans cette conférence. Je vous encourage à prendre une pause, passer par là et à me rappeler que ce n'est pas exactement quelque chose que vous voulez mémoriser, mais plutôt quelque chose auquel vous voulez avoir accès tant que ressource pendant que vous le faites. votre travail de conception. N'hésitez donc pas à jeter un coup d'œil à ce site Web. Et encore une fois, le lien pour cela en tant que lois d'UX.com, très utile. 44. Concevoir un logo: Si vous avez suivi jusqu'à présent, nous avons rassemblé nos premières pages. Nous avons rassemblé les pages de connexion, la vérification téléphonique, la page principale montrant tous les restaurants disponibles ainsi qu' une petite page de menu ou pour vous permettre commander ou d'ajouter des articles à votre commande. Nous sommes prêts à passer à nos pages de commande, ainsi qu'à notre historique de paiement et de commande de profil. Et une chose que je tiens à souligner, c'est que je crois que j'ai raté la page de localisation pendant que nous mettions en place les tableaux artistiques. Je vais donc y aller de l'avant et faire avancer ça un peu. Allez-y et dupliquez cette page. Ensuite, je vais aller de l'avant et lui donner un titre. Il s'agit donc essentiellement de la page où vous pouvez définir votre adresse. Si vous vous souvenez, si je viens d' ouvrir nos filaires. Voilà, c'est nos filaires qui ont ouvert cette page de localisation où vous pouvez définir votre adresse pour savoir où la livraison devrait aller. Nous allons donc le concevoir dans cette page, page de localisation ici. Encore une chose pendant que je suis ici, je veux juste m'assurer que tout ici avec mes tableaux d'art ou bien espacé. Je pense que ça a l'air bien. On y va. Parfait. Donc oui, nous sommes prêts à passer à la conception de ces pages. Avant cela, nous devions concevoir un logo pour des bouchées saines. Et maintenant, si vous vous souvenez du moment où nous avons passé le mémoire, l' un des principaux produits livrables est également le logo de l' entreprise. Nous allons donc le faire ensemble dans cette conférence. Maintenant, pour le logo, je veux que ce soit simple. Je veux le garder quelque chose de pertinent pour le nom, qui est généralement ce que vous voulez faire dans un logo. Je vais donc venir juste ici, juste à l'extérieur de mon tableau d'art et zoomer juste pour créer un logo ici avant de l'apporter un logo ici avant à mon, tout au long de mon design. Donc, ce que je veux faire pour morsures saines, c'est essentiellement avoir un peu, peut-être chaque lettre et peut-être quelques marques de morsure retirées de cette lettre d'âge pour représenter le nom. Je pense que ça peut paraître beau. Je veux donc le faire à l'aide de notre outil de ligne et d'un tas d'ellipses. N'hésitez donc pas à suivre si vous souhaitez créer vous-même une version du logo. Mais la version finale de ce logo Walzer figure dans les ressources de ce projet. Vous pouvez donc simplement l'utiliser si vous le souhaitez. Parfait. Donc, pour notre logo, allons-y et créons une ère en utilisant l'outil de ligne. Nous voulons donc une ligne ici, et j'utilise simplement Shift pour garder la ligne droite. Maintenant, pour la taille de la bordure, on y va avec 20. Nous allons aller de l'avant et contourner les bouchons ici aussi. Et puis je vais tout utiliser pour dupliquer ce côté de l'âge de deux ans. Par ici. Je vais utiliser la commande D pour dupliquer cette dernière fois. Ensuite, allez-y et faites-le pivoter. En utilisant ce petit nœud. C'est droit. De cette façon. Nous allons juste mettre ça quelque part au milieu de cette sélection parfaite. Donnons-lui une bordure de 25. Et changeons la couleur de la bordure par notre couleur verte. Je vais aller de l'avant et regrouper ces lignes à l'aide la commande G ou du contrôle G sous Windows. Et puis je vais aller de l'avant et juste zoomer sur ce côté de l'âge. Et je vais créer des ellipses en utilisant E, représenter ce genre de marque de morsure comme celle-ci. Maintenant, je vais aller de l'avant et regrouper ces ellipses ensemble, les déplacer un peu vers le bas. Alors, assurez-vous d'être en groupe. Votre forme H est en groupe. Et en fait, je vais aussi rendre ça un peu plus grand. Il prend donc plus de place ici. Rendez cela un peu plus grand. Je pense que ça a l'air bien. On y va. Parce que c'est ce He créé à partir de ces trois lignes. Nous devons réellement utiliser le contour pour que cela devienne plus une forme. Nous pouvons le faire en accédant au chemin d'accès à l'objet. Et si vous vous souvenez du contour, maintenant, les traits ici se sont en quelque sorte transformés en formes. Nous pouvons donc aller de l'avant et utiliser nos outils booléens pour créer cette marque de morsure hors de cet âge. Nous pouvons le faire en nous assurant d'abord qu'ils sont tous regroupés comme je l'ai fait ici. Et sélectionnez-les tous les deux ensemble. Et le chemin d'objet soustrait-il. Ça a l'air bien. Encore une fois, si vous voulez modifier votre forme, vous pouvez toujours aller de l'avant, y aller et réorganiser les cercles pour qu'elle ressemble davantage à Smith Cole. Faites vraiment ce que vous voulez. Je pense que ça a l'air bien. Je vais juste aller de l'avant et en fait, dupliquer ce groupe et amener ce groupe aussi ici. cet autre côté de l'âge aussi. Je pense que ça a l'air bien. Encore une fois, n'hésitez pas à modifier vos cercles si vous n'êtes pas entièrement satisfait de votre situation. Parfait. Nous l'avons donc, c'est notre petit logo pour ce projet. Je vais aller de l'avant et l'enregistrer en tant que rôle de ressources que vous pouvez utiliser. La prochaine conférence. Revenons et placons ce logo tout au long de notre design. 45. Placer notre logo: Bon, maintenant que notre logo est prêt à être lancé, allons le placer dans notre écran de démarrage. Et la page de connexion, je pense que c'est à peu près tous les principaux endroits où nous devons le placer. Si vous n'avez pas le logo ou si vous avez pas conçu avec nous lors de la conférence précédente. Vous pouvez y accéder en accédant aux ressources de ce projet. Et sous le dossier de logo, vous verrez un logo SVG vert et un logo blanc que SVG. Une autre raison pour laquelle ils sont exportés sous forme SVG et non de PNG ou de JPEG, ce qui est généralement ce que vous utilisez pour les images, est que SVG vous permet de modifier le logo et de le redimensionner sans perdre de qualité. C'est donc l'une des raisons pour lesquelles nous utilisons SVG pour certaines icônes et logos et des choses comme ça. Alors que pour les images où vous avez une photo, disons généralement utiliser le format JPEG et PNG. Nous y reviendrons plus en détail plus tard lorsque nous exporterons nos fichiers. Pour l'instant, vous pouvez importer ces deux éléments dans votre projet en les faisant simplement glisser dans votre projet XD. Maintenant, nous voyons que nous en avons deux ici. Je pense que l'autre a importé ici. Donc, ce blanc que nous allons utiliser sur notre écran de démarrage. Nous allons donc le placer au milieu de l' écran comme ça, ou là où nous avons notre espace réservé. Pour l'espace réservé, allons-y et maintenant supprimez-le. Il suffit de déplacer ce texte un peu plus haut pour qu'il soit proche du logo. Pour la taille que j'aime, c'est ici, qui est de 91 sur 126. Ensuite, pour ce vert, allons-y et faites-le glisser. Vous l'avez deviné. Une page de connexion centrée dans notre espace réservé ici. Supprimez celui-ci. Je pense que nous pouvons le faire monter un peu plus, donc nous avons un peu d'espacement par rapport au nom de notre entreprise ici. En parlant du nom de l'entreprise, on dirait qu'il s'agit d'un remplissage noir, donc je vais simplement changer cela par ce gris que nous avons. Vous pouvez entrer ce code hexadécimal et l' enregistrer, tout comme moi pour notre nuance de couleurs, mais pas du tout si vous avez pas fait, car dans les conférences suivantes, nous sommes Je reviendrai parler de la couleur et de la façon dont nous pouvons facilement accéder aux couleurs dans nos designs. Nous l'avons là, c'est notre logo, et nous sommes prêts à aller de l'avant. 46. Créer un schéma de couleurs: Ou un jeu de couleurs. Il y a beaucoup de plaisir parce que nous pouvons jouer avec un tas de couleurs et voir ce qui est beau et ce qui correspond à notre image de marque. En ce qui concerne la conception de notre application. Personnellement, j'adore la section de sélection de couleurs du cours parce que c'est là nous pouvons vraiment être créatifs et mettre en place une sorte de marque pour l'entreprise qui travaillait. Dans ce cas, parce qu'ils n'ont donné que de la couleur verte dans leur slip design. En termes de jeu de couleurs. Bien sûr, il vient de mentionner, utiliser un schéma de couleurs vert pour montrer la santé du produit, etc. C'est pourquoi nous allons utiliser ce petit outil en ligne pour proposer un jeu de couleurs pour ils sont basés sur la couleur verte que nous avons. Si vous allez à coolers.co, il y a trois O là-dedans, alors assurez-vous de le taper correctement. Coolers.com. Il s'agit d'une excellente ressource que vous pouvez utiliser pour générer rapidement des jeux de couleurs pour vos projets. Une fois que vous allez là-bas, il est simplement touché par ce générateur de démarrage, puis il ira de l'avant et vous mettra dans ce petit générateur de couleurs. Et à partir de là, vous pouvez simplement appuyer sur la barre d'espace de votre clavier pour générer de nouvelles palettes de couleurs qui ont fière allure ensemble. Vous pouvez également l'utiliser tout au long de votre projet. Il vous donne le code hexadécimal pour chaque couleur de cette palette. Parce que nous avons déjà l'une des couleurs de notre application, savonneux passe à XD. J'ai vraiment aimé cette couleur verte que vous utilisez ici. Donc, si je viens de cliquer sur l' un des, disons l'écran de démarrage ici, cliquez sur le remplissage. Je peux aller de l'avant et copier ce code hexadécimal d'ici qui retourne aux glacières pour l'une des couleurs ici. Voyons le premier ici. Nous pouvons aller de l'avant et simplement double-cliquer pour modifier cette couleur, en collant ce code. Appuyez sur Entrée. Alors ce que je veux faire est d'aller de l'avant et cliquer sur ce petit bouton de verrouillage ici, cela signifie que cette couleur restera la même. Cela ne changera pas car nous appuyons simplement sur la barre d'espace. Et ensuite, ce que nous allons faire, c'est essayer d'utiliser cette couleur pour trouver couleurs similaires ou des couleurs qui ont fière allure en combinaison avec cette couleur. Maintenant, si vous allez de l'avant et cliquez sur Espace Après vous être assuré de verrouiller cette couleur dans le monde du site Web, générez un schéma pour vous. Ensuite, vous pouvez aller de l'avant et choisir celui qui vous plaît. Je ne veux rien de trop différent. À tout moment, si vous souhaitez une certaine couleur, vous pouvez aller de l'avant et la verrouiller. Et ensuite, en fonction de cette couleur, vous pouvez proposer plus de couleurs pour votre palette de couleurs. Mais continuons d'appuyer sur Space pour voir ce que nous obtenons. J'aime un peu cette palette de couleurs ici. Je pense que ça a l'air plutôt bien. C'est monochromatique, c'est ce que j'ai aimé pour ce genre de palette ici. Alors pourquoi ne pas aller de l'avant et utiliser réellement ce jeu de couleurs ici. Nous pouvons même enregistrer cette palette en vous connectant et en cliquant sur Enregistrer. Ou nous pouvons aller de l'avant et l'exporter en copiant l'URL. Nous avons donc maintenant l' URL de cette palette. Donc, si vous souhaitez l' envoyer à quelqu'un d'autre, ou si vous le faites dans notre navigateur, cela va faire apparaître ce site Web. Je vais donc vous laisser une minute ici pour écrire ces codes hexadécimaux si vous le souhaitez, si vous souhaitez utiliser exactement ce jeu de couleurs, n'hésitez pas à utiliser le vôtre si vous le souhaitez. Mais si vous voulez suivre ce jeu de couleurs, vous pouvez utiliser cette palette de couleurs ici. Prenons une pause rapide et revenons à la prochaine conférence pour appliquer notre palette de couleurs à notre projet. 47. Appliquer notre style de couleur: Ça fait tellement mal maintenant que nous avons une palette de couleurs que nous avons générée à l'aide de Coors ou Ko, je suis allé de l'avant et j'ai placé un petit PDF de ce jeu de couleurs dans les actifs de l'application mobile saine. Vous pouvez accéder au format PDF , puis utiliser ces codes hexadécimaux pour générer le même jeu de couleurs pour votre projet. Mais encore une fois, comme je l'ai mentionné, vous pouvez également utiliser votre propre palette de couleurs. Donc, ce que nous allons faire maintenant, c'est aller de l'avant et retourner à notre XD. Juste sur le côté , ici, ici. Je vais créer une autre section dans mon panneau de pâte ici et appeler celle-ci mon jeu de couleurs. Comme ça. Allez-y et alignez simplement cette gauche, alignez-le avec les composants. Nous descendons un peu et ce que je veux faire, c'est d'aller de l'avant et créer, voyons voir, 12345. Et nous allons créer cinq ellipses ici pour générer ce jeu de couleurs pour notre projet. Je vais juste aller de l'avant et mettre ça ici, l'ellipse. Je vais retirer la frontière de là. Allez-y et créez-en cinq. Parfait. Un par un. Je vais aller de l'avant et entrer ces codes hexadécimaux dans mes points de suspension. Le premier est donc ce code hexadécimal pour la couleur 1. Allez-y et modifiez le remplissage par ce code. Nous avons cette couleur. La même chose ici. Obtenez cette couleur. Continuez à lire ce processus pour toutes les couleurs. On y va. On y va. Nous avons notre palette de couleurs dans notre projet. Maintenant, bien sûr, nous pouvons ajouter ces couleurs à nos échantillons ici et les utiliser tout au long de notre projet. Mais une chose que XD nous donne est la possibilité d'utiliser des styles de couleurs dans notre bibliothèque. Si vous vous rendez dans nos bibliothèques, nous voyons ici que nous avons quelques couleurs dans notre panneau de ressources. De cette façon, si vous ajoutez notre jeu de couleurs à cette section de couleurs du XD dans nos bibliothèques. Nous pouvons facilement les utiliser tout au long de notre projet. Et si nous devons modifier notre jeu de couleurs, il suffit de modifier notre jeu de couleurs ici et il sera appliqué tout au long de notre projet. Et vous verrez à quel point cela est utile en une seconde. Pour appliquer ce jeu de couleurs, vous pouvez simplement sélectionner chaque objet où vous avez cette couleur, puis l'ajouter à notre couleur comme ceci. Ou vous pouvez aller de l'avant et les sélectionner tous comme ceci. Et cliquez sur Plus. Les deux fonctionnent. XD allait donc générer ces couleurs sous forme de palette de couleurs ici, avec un titre étant le code hexadécimal. C'est maintenant que si vous le souhaitez, nous pouvons aller de l'avant et renommer ces couleurs. Je vais faire la primaire pour celle-ci ici. Pour le second ici, qui est cette couleur, on va faire le secondaire. Et ça va être ton accent. Et ça va être ton accident. Pour faire X et trois pour celui-ci. Maintenant, nos couleurs ont également un nom. Maintenant que nous avons mis en place notre jeu de couleurs ici à la beauté de cela, XD ira l'avant et verra où vous utilisez ces couleurs. Et ils ont déjà été liés à notre jeu de couleurs ou à nos styles de couleurs ici dans XD. Juste pour vous donner un exemple, si vous continuez à modifier cette couleur principale en cliquant avec le bouton droit de la souris et en cliquant sur Modifier. Si nous décidons d'aller de l'avant et disons que nous changeons cette couleur primaire par une sorte de regard, disons, disons le violet. Ensuite, il s'appliquera partout dans notre conception où nous utilisons cette couleur. Maintenant, avec cela, nous pouvons facilement modifier notre jeu de couleurs sans avoir besoin de parcourir notre conception et de changer chaque couleur, chaque objet utilisant cette couleur. Et vous pouvez voir à quel point cela peut être utile. Maintenant, cela dit, je vais aller de l'avant et appuyer sur la commande Z plusieurs fois jusqu'à ce que nous revenions à cette couleur que nous avons. Bien sûr, comme nous utilisons ces autres couleurs tout au long de notre conception, nous pouvons aller de l'avant et voir quel point ce jeu de couleurs et nos jeux de couleurs et nos bibliothèques XD seront utiles . 48. Dégradés: Toutes les couleurs unies sont donc amusantes à travailler et à appliquer à notre palette de couleurs. Encore plus amusant que ce sont les dégradés. Les dégradés vous permettront essentiellement de combiner plusieurs couleurs pour créer une sorte de maillage entre deux couleurs. Et vous verrez comment cela fonctionne en une seconde. Si vous allez de l'avant et dupliquez ce petit cercle ici à l'aide la commande D et en faisant glisser une copie vers le bas. Si vous allez à un remplissage ici, bien sûr, nous pouvons changer cette couleur ici par n'importe quelle couleur unie comme nous l'avons fait tout au long de notre projet. Mais si vous voulez créer un dégradé, nous pouvons simplement passer à cette flèche vers le bas ici. Nous avons plusieurs options. Nous pouvons soit faire un dégradé linéaire, ce qui va de l'avant et créer un dégradé entre deux couleurs. Vous pouvez bien sûr ajouter d'autres couleurs dans le dégradé comme vous le souhaitez, mais elles seront fusionnées sur une ligne unie. Vous pouvez effectuer un dégradé radial qui, comme son nom l'indique, c'est un dégradé qui s' estompe sur un rayon. Vous pouvez modifier ce rayon et le rendre plus grand ou plus petit, etc. Nous pouvons faire un dégradé angulaire, qui est moins couramment utilisé, mais il s'agit essentiellement d'un dégradé incliné comme son nom l'indique. Mais le plus souvent, nous voulons un dégradé linéaire. Et avec un dégradé linéaire, nous pouvons même aller de l'avant et déplacer ces deux points dans notre objet pour ces deux couleurs. Nous pouvons donc faire un angle comme celui-ci. Ensuite, nous pouvons définir la couleur de chaque nœud. Donc, si nous sélectionnons un nœud ici, ce que nous pouvons faire en sélectionnant ce nœud ou celui-ci ici dans notre sélecteur de couleurs, nous pouvons modifier ce côté du dégradé. Et ensuite, si nous allons de l' autre côté ou de l'autre nœud, nous pouvons également modifier celui-ci. C'est ainsi que nous réalisons des dégradés tout au long de notre conception. Donc, pour notre premier dégradé, nous allons appliquer un dégradé à mon écran de démarrage. Que faisons-nous ? La couleur verte que nous avons ici. D'un côté et de l'autre, nous allons faire la couleur secondaire ici, que j'ai sélectionnée comme couleur de nuance ici. Sinon, vous pouvez y mettre ce code hexadécimal 52796 f. Et nous allons aller de l'avant et vous donner le même dégradé ici. Je vais le laisser à cet angle de 45 degrés que j'ai ici. Maintenant que cette option est sélectionnée, vous pouvez cliquer sur l'icône petit plus ici pour ajouter une couleur à partir de cette sélection. XD est donc parti de l'avant et a créé ce dégradé pour nous. Et nous pouvons aller de l'avant et même le renommer dégradé dans nos styles de couleurs. Maintenant, si nous passons à notre écran de démarrage et que nous sélectionnons l'ensemble du tableau d'art. Étant donné que cette couleur d'arrière-plan est générée à partir du tableau d'art. Au lieu de modifier le remplissage ici pour qu'il corresponde à ce dégradé, nous pouvons simplement cliquer sur ce dégradé d'une couleur dans nos bibliothèques. Et nous allons appliquer même dégradé sur notre écran de démarrage. C'est ainsi que vous utilisez les dégradés dans XD. 49. Configurer un style de personnages: Semblable à la façon dont nous avons configuré ce style de couleur dans notre XD. Et maintenant, nous pouvons l'utiliser tout au long de notre conception. Nous pouvons faire la même chose avec la composition. Et si vous vous en souvenez plus tôt, j'ai mentionné que nous allons revenir et appliquer la police SF Pro tout au long de notre conception. Et nous allons utiliser cela comme principal fonds. Généralement, dans une application iOS, nous utilisons cette police car elle est la plus couramment utilisée par Apple ou par eux-mêmes. Si vous souhaitez créer un peu plus créativité et installer une police personnalisée, vous pouvez également le faire et appliquer cette police à la place. Mais je pense que nous allons nous en tenir à l'utilisation de SF pro tout au long de ce projet de conception iOS. Si vous ne l'avez pas déjà fait, rendez-vous sur developer.apple.com. Polices obliques avant. Allez-y et entrez cette URL , puis vous devriez être amené sur cette page où vous pouvez télécharger SF pro gratuitement. Maintenant, si vous êtes sous Windows, je tiens à noter qu' il peut être un peu plus difficile d'ouvrir ce fichier car il se télécharge sous forme de fichier DNG, qui est le fichier d'installation pour Mac. Mais si vous installez et téléchargez sept zip en vous dirigeant vers cette URL ici, vous devriez pouvoir utiliser 7-Zip pour décompresser ce dossier dans lequel vous accéderez ensuite aux fichiers de polices de où vous pouvez aller de l'avant et ouvrir ces fichiers de polices pour les installer sur votre machine. Maintenant, nous avons installé ces polices, une conférence antérieure, donc je ne vais pas passer par le processus d'installation, mais je vais vous laisser une minute ici pour faire une pause et installer ces polices si ce n'est pas le cas. Ensuite, allez de l'avant et suivez ce que le reste de la conférence. Une fois ces polices installées, j'utilise cette ressource appelée type-scale.com pour choisir une compétence pour nos tailles de polices. Désormais, lorsqu'il s'agit d'une application, qu'elle soit mobile ou Web, nous voulons généralement configurer une sorte de typeset avec différentes tailles de police à l'aide d'une échelle quelconque. que si vous le souhaitez, disons utiliser des balises d'en-tête, nous pouvons utiliser l'une de ces polices plus volumineuses. Ensuite, pour nos textes corporels et nos légendes, nous pouvons utiliser une police de corps plus petite. Et pour l'instant, je suis simplement allé de l'avant sur ce site Web. Et notre taille de base est 16 pixels avec une échelle de tiers majeurs. Il va donc multiplier chaque taille de police par 1,25 pour générer la taille suivante. Bien sûr, vous pouvez aller de l'avant et jouer avec d'autres types d' échelles pour vos polices, et elles deviendront plus grandes ou plus petites en fonction de celle que vous sélectionnez. Mais je pense que ce troisième majeur, ou le quatrième parfait, fonctionne bien, pour ce cours, nous allons aller de l'avant et utiliser le troisième majeur. N'hésitez donc pas à prendre une seconde pour déterminer la taille de ces pixels. Ensuite, une fois que vous les avez, gardez cette fenêtre ouverte, nous pourrons l'utiliser lorsque nous configurons nos ensembles de types dans XD, dirigez-vous vers XD lui-même. Fermez ça. Dans XD. Nous allons mettre en place ce jeu de dactylographies en nous dirigeant ici jusqu' dactylographies en nous dirigeant ici à l'endroit où nous avons notre palette de couleurs. Nous allons reproduire ce texte de jeu de couleurs ici. Et où allons-nous mettre en place une dactylographie ? Parfait. Et maintenant, nous allons aller de l'avant et simplement zoomer. Et allons de l'avant et créons un texte et nommons celui-ci, corps un. Pour celui-ci, je veux que la police soit ECIF pro, qu'elle soit 16 pixels. Pour le remplissage. Nous voulons aller de l'avant et utiliser ce code hexadécimal 333 pour ma police corporelle. Ensuite, je vais aller de l'avant et juste placer ça ici, dupliquer une fois de plus. Et ensuite, nous allons faire du corps à celui-ci en utilisant mes compétences. Il doit avoir une taille de 20 pixels. En montant ici, on va faire la tête trois. Celui-ci devrait être 31.25. Dupliquez-le encore une fois. Faites l'en-tête deux, et celui-ci devrait être 39,6, désolé, 0,06. Est-ce que cela se produira alors que vous travaillez là-dessus ? Soyez donc prudent. Enfin, nous allons faire le premier en-tête. Celui-ci devrait être 48,83. Au fur et à mesure de notre conception, nous n'utiliserons probablement pas autant l'en-tête, mais il est bon d'avoir accès à ces jeux de types tout au long de notre conception. Maintenant, je vais juste les placer ici. Je vais juste sélectionner tous ces éléments ici maintenant. Pour mon corps, je vais en créer un autre, mais celui-ci je vais sélectionner un médium pour mon poids de police et ensuite appeler celui-ci un médium. Ensuite, je vais les sélectionner tous ensemble, puis cliquer sur l'icône plus ici pour les ensemble, puis cliquer sur l'icône plus traduire en style de personnage ici dans XD. Allons de l'avant et renommons ceux-ci. Celui-ci devrait donc être un corps. Je crois que celui-ci devrait être le corps un médium. Si je ne me trompe à aucun moment, vous pouvez appuyer sur Modifier ici pour vous en assurer. On dirait que je l'ai eu dans l'autre sens. Le médium est celui-ci ici. Et puis le 31.25 devrait l'être. Ensuite, nous avons le 20 comme corps pour les 31 à cinq comme en-tête trois, SF PRO 39 comme en-tête de la plus grande police ici en tant qu'en-tête un. Vous pouvez y aller de l'avant et même réorganiser ces textiles ici ou même les regrouper. Disons donc que je veux regrouper tous mes en-têtes. Je peux les sélectionner tous et créer un nouveau groupe à partir de la sélection. Et ce seront toutes mes polices d'en-tête. Et ensuite, regroupez ces autres et appelez-les mes polices corporelles. Vous pouvez aller de l'avant et les réorganiser comme vous le souhaitez. Il s'agit simplement de garder les choses organisées dans votre projet. Alors que je faisais ça, je suppose que j'ai foiré ma dactylographie ici. Vous pouvez donc, à tout moment, accéder à la police que vous souhaitez modifier. Celui-ci pour les définir à celles avec lesquelles vous travaillez. Je vais donc sélectionner l'en-tête trois, site que trois en-tête deux devrait être à ou deux en-tête un. On y va. Ok, maintenant, sont mes ensembles de types que nous allons utiliser un design plus large. La prochaine conférence, nous reviendrons et les appliquerons tout au long de nos créations. 50. Appliquer nos styles de personnages: C'est un autre que nous avons configuré notre style de personnage ici. Nous allons aller de l'avant et appliquer cela dans nos conceptions. Je vais commencer par le haut ici. Pour nos barres de navigation, nous allons les laisser tels quels, car c'est généralement type ou le style de caractères utilisés dans les barres de navigation. On ne va pas vraiment changer ça. Nous allons garder cela tel quel. Mais partout ailleurs, nous avons nos propres textes. Nous allons aller de l'avant et utiliser nos propres styles de personnages. Cela dit, à partir de l'écran de démarrage, cliquons ici sur les bouchées saines et utilisons notre en-tête deux. Bien sûr, ce qui se passe, c'est que par défaut, les styles de caractères sont accompagnés couleur ou que Phil y est ajouté. Par défaut, XD va utiliser la même couleur pour les styles que nous avons configurés ici. Mais nous pouvons aller de l'avant et apporter des modifications à notre remplissage pour les cas spécifiques ici. Allons-y et faisons-le ici. Tout comme nous passons par le changement de police. Tu te souviens de ça ? Parce que les polices ou sont différentes, vos alignements peuvent changer. Alors, méfiez-vous de cela et continuez à réaligner les choses au fur et à mesure que nous faisons cela. Donc pour le second, nous allons faire l'en-tête ou l'en-tête h3. Aller de l'avant et encore, aligner les choses correctement. Si besoin est. Nous allons aller de l'avant et faire baisser un peu les choses aussi. Bien sûr, nous avons les boutons ici, donc nous allons modifier ces textes dans nos composants réels en une seconde. Mais pour ces deux-là, nous allons choisir les deux et utiliser notre corps un médium pour les deux ici. Mot de passe oublié. Je vais y aller de l'avant et ajouter un petit point d'interrogation à la fin de ça. Déplacez-le. Je veux donc rendre ce corps un médium plus subtil. Alors, que faisons-nous et cliquez sur Modifier sur ce corps sur un support en cliquant avec le bouton droit de la souris, en cliquant sur Modifier. Et je vais juste aller de l'avant et changer la couleur de la police en un peu plus subtile, peut-être quelque chose autour de ce genre de couleur gris clair. Vous pouvez entrer ce code hexadécimal pour générer la même couleur pour votre corps, un style de caractère moyen. Par ici. Je vais juste aller de l'avant et déplacer ça le côté pour laisser de la place à ce texte ici. Revenons à nos composants et appliquons notre nouvelle typeset tout au long de ce bouton, nous allons faire un corps. Ensuite, je vais aller de l'avant et changer le remplissage en blanc et aussi appliquer un support. Ou en fait, faisons une épaisseur semi-audacieuse ici. Je vais aller de l'avant et sauvegarder ce style et appeler ça mon cul dans mon style de texte de bouton. Pour cet espace réservé, nous allons utiliser body one et apporter la couleur à une couleur plus subtile ici. Pour celui-là, on va faire un corps. Nous n'avons pas de police pour cette taille ici. Je voulais donc changer la taille de police ici pour SF Pro et créer un nouveau style de personnage en appuyant sur plus ici. Celui-là, on va le nommer. Style de légende. N'oubliez pas que tout au long de votre conception, vous pouvez créer autant de styles de personnages que vous le souhaitez. Chaque fois que vous pensez qu' il y a quelque chose d' unique dans vos styles de personnages. Même pour les 0 calories et 1,1$ ici, nous allons utiliser cette légende textile. Avec la différence étant que nous allions aller de l'avant et les changer en demi-gras, pour ce petit 0. Et ici, nous allons changer ça aussi. Que voulez-vous ? Nos composants sont désormais à jour avec notre nouvelle police. Tout au long de nos composants concepteurs devrions utiliser ce nouveau jeu de polices et nos textiles. Pour la vérification téléphonique, qui est le titre de la page, nous allons faire l'en-tête trois. Pour celui-là, on va faire un corps. Ça a l'air bien. Bien sûr, celui-ci ici. Nous n'avons pas fait de ce composant un composant que nous pouvons utiliser ici et définir ces deux-là pour le titre. On va le faire. Un pour le dollar. On va faire la légende textile. C'est. Nous allons aller de l'avant et le changer en semi-gras. La même chose ici. Pour celui-là, nous allons faire un style de texte de légende, semi-gras, et simplement le déplacer vers le haut. Pour cet italien, nous allons faire la même chose. Légende textile et nous allons faire des publics semi-audacieux. Bien. Je pense que c'est toutes les polices que nous avons. Nous avons donc tout configuré en tant que nouvelle police SF Pro. Et au fur et à mesure de notre conception, nous allons appliquer les mêmes polices dans tous nos designs. 51. Page de commande: Maintenant que nous avons passé en revue certains des éléments essentiels de la mise en place de notre projet, notamment la mise en place d'un jeu de couleurs, organisation de nos jeux de types et l'ajout à nos styles de personnages. Dans XD, je pense que nous sommes prêts à aller avant avec la conception du reste de nos maquettes. En continuant, nous avons la page de commande suivante, donc nous allons travailler sur cette conférence. Donc essentiellement, s'il remonte notre filaire, dans notre filaire pour notre page de commande, nous avons quelques choses, y compris les articles qui ont été ajoutés ou les utilisateurs ajoutés à leur commande, ainsi qu'une petite section que nous pouvons inclure pour montrer l' adresse à laquelle elle est livrée au cas où ils auraient besoin d' apporter des modifications à leur adresse. Ensuite, nous avons ici les articles où ils peuvent également les ajouter ou les supprimer de la commande, ainsi qu'une petite section ci-dessous pour expliquer leur sous-total après taxe et tout, peut-être les frais de livraison et tout cela est avec un petit bouton Commander ici pour qu'ils finissent leur commande en utilisant. En revenant à notre XD, nous allons aller de l'avant et faire quelques choses. abord, commençons par modifier ce gros texte de titre pour terminer le trimestre. Allons de l'avant et débarrassons de ce titre ici. Pour le bouton d'action ici, nous pouvons revenir au menu. Et voyons ce que nous avons d'autre ici ? Nous voulons notre icône de localisation. Ce que nous allons faire, c'est que nous allons aller de l'avant et nous débarrasser de cette icône plus ici. Ensuite, nous allons y ajouter nos cartes de commande ici ou des cartes objets ici. Alors pourquoi ne pas aller de l'avant et traîner ? Je vais voir une copie de ces deux-là. Allons-y. Nous allons sélectionner l'instance de poulet parmesan ici. Je vais donc copier celle-ci en appuyant sur Commande C, irai sur ma page de commande et en collant ça là-dedans. Alors, faisons simplement l' un des desserts. Peut-être que le gâteau à la lave a l'air bien. Et collez-le dans la page de commande. Je vais aller de l'avant et juste réarranger ça. C'est donc moi qui porte ça au sommet. Nous voulons maintenir l'espacement ici assez cohérent. Je voulais donc faire 25 pixels depuis la barre de navigation. Et encore une fois, j'utilise Alt pour voir la différence d'espacement entre les objets gardera cela aussi identique à ce que nous avons ici, ce qui, je crois, c'est 15. Nous avons 15 pixels de chaque commande. Nous allons avoir les objets ici, puis nous allons dessiner un petit rectangle au bas de cette page. Pour ce rectangle, je vais choisir mon accent à colorier. Ça a l'air bien. Nous allons créer une petite zone de texte ici et écrire la sortie de sous-total hors de là. Et nous allons utiliser le, Allons faire un corps. Le corps deux aurait fière allure. Pour cela. On va régler le remplissage à l'accent trois couleurs. Eh bien, je vais continuer et dupliquer ça et mettre une copie ici et l'aligner à droite aussi. Parfait. Et on va juste y aller et ajouter ces chiffres. Donc 19,99$ en 1999. Cela devrait nous donner si je ne me trompe pas 2998, alors nous allons reproduire ça une fois de plus. Tous les deux. Et nous allons faire des impôts. Je vais aller de l'avant et j'ai quitté la ligne aussi. La lumière à gauche pour la taxe ici. Je vais juste aller de l'avant et inventer ça. Put 499 est destiné à compléter cette page. Ensuite, je vais répéter ça une fois de plus. Faites-le baisser cette fois parce que nous voulons placer le total que nous allons utiliser. Au lieu du corps deux, on va faire un en-tête trois. Nous allons aller de l'avant et changer à nouveau le remplissage en accentuant trois. Et au lieu de balises sur le bon total, oups. Ensuite, l'ajout de ces éléments devrait nous donner 3497. Une chose que vous pourriez faire ici c'est que vous pouvez aller de l'avant et totalement grouper. Ces objets sont des lignes de texte ensemble à l'aide de la commande G , puis il peut utiliser des piles. De cette façon. Nous pouvons d'abord aller l'avant et définir un espacement égal de, disons 20 pixels. De cette façon, si vous voulez laisser dire, dupliquer ce groupe et créer une autre ligne, nous pouvons le faire facilement. Peut créer autant de lignes que possible afin que nous puissions même ajouter, disons des frais de livraison. Disons 299. Je ne suis pas allé de l'avant et mis à jour ça. Comme nous le voudrions. On y va. C'est vrai. Continuons ensuite et complétons cette page en ajoutant un ou le lieu de livraison ou l'adresse et une option pour modifier cela, ainsi qu'un petit bouton Commander en bas. Commençons donc par le bouton Commander, car notre bibliothèque est déjà ouverte et nous pouvons faire glisser un bouton ici. Placez notre bouton ici. Permettez-moi de m'assurer que nous avons un espacement cohérent. Nous voulons donc 35 pixels en bas. Ensuite, nous allons aller de l'avant et modifier cela pour commander s'il vous plaît. On y va. Et ce que je veux, c'est une autre version de ce bouton avec une autre couleur, peut-être notre couleur d'accent. Ce que j'ai en tête, c'est qu'à l'intérieur de ce bouton nous pouvons leur demander de voir leur adresse de livraison. Je vais donc faire une pause rapide ici et nous reviendrons lors de la prochaine conférence. Nous allons créer une autre variante de ce composant pour ce bouton avec une couleur différente. Et ils l'utilisent pour ajouter notre lieu de livraison sur cette page. Faisons cela ensemble lors de la prochaine conférence. 52. Variation des composants: Très bien, comme promis, nous allons compléter notre page de commande et cette conférence. Mais avant de le faire, nous allons aller de l'avant et apprendre comment créer différents états de composants comme je l'ai promis lors des conférences précédentes. Passons maintenant à la section composants de nos conceptions. Ici, nous avons bien sûr notre bouton que nous avons créé et transformé en composant afin de pouvoir réutiliser facilement dans nos conceptions. Dans cette conférence, je veux créer une version légère de ce bouton et utiliser cette couleur d'accent pour mon bouton ici. Ce que nous n'avons pas vraiment exploré, c'est cette petite icône plus ici où nous pouvons créer différents états pour notre bouton ici. Si vous cliquez sur Plus, cela nous donne en fait quelques options, comme un nouvel état, qui correspond à ce que nous aimerions que notre État soit appelé. L'état de survol commun et l'état de basculement pour les boutons ainsi que XD nous suggèrent automatiquement. Mais nous n'allons pas créer ces dernières pour l'instant. Nous allons créer un nouvel état. On va appeler cette version State Lite. Ce sera la version légère de notre bouton. Pour modifier cet état maintenant, nous devons simplement nous assurer que nous l'avons sélectionné sur le côté droit ici. Si nous sélectionnons l'état par défaut, nous modifions actuellement notre état par défaut. Mais si nous sélectionnons cette version légère, soudainement mon composant est en cours de modification, mais la version légère seulement et non l'état par défaut. Ainsi, sous cette version légère, nous pouvons aller de l'avant et double-cliquer sur notre bouton, sélectionner à nouveau le rectangle, vérifier que le rectangle est sélectionné et non le composant du bouton entier. Et ensuite, cliquez sur X et trois pour que notre fond de bouton soit en trois couleurs. Ensuite, pour la couleur du bouton elle-même, je veux aller de l'avant et faire de l'accent aussi. On y va. Nous avons maintenant créé une version légère de notre bouton, qui a cette couleur. Et à tout moment, nous pouvons acheter vers l'état par défaut et mettre fin à cet état. Il est plus créatif et plus d'états tels que l' état de survol et de basculement. Mais pour l'instant, nous avons créé deux versions ou états différents de ce composant, sans vouloir utiliser cette autre version. Nous pouvons aller sur n'importe lequel de nos boutons et passer à la version légère. Ensuite, allez de l'avant et apportez ces modifications à ce bouton. Voici ce que je veux faire, c'est maintenant aller de l'avant et trouver mon bouton ici. Faites glisser un autre ici sur ma page de commande. Mais au lieu de l'état par défaut, je veux que ce soit la version légère. En fait, je veux créer une autre version de ma version de vie qui a le texte aligné sur le côté gauche. Pourquoi ne pas revenir ici. Accédez à notre version légère et à partir de notre version légère, nous pouvons créer une autre version ou un autre état. Et nous allons appeler ce texte de version légère à gauche, comme ça. Maintenant, dans cette version, je vais aligner ou amener mon texte ici sur le côté gauche. Mais 25 pixels à partir du côté gauche. Pendant que nous sommes ici, continuons et sélectionnons Aligner le texte à gauche, puis continuons et sortons. Nous avons donc maintenant trois versions. État par défaut, version légère, puis version légère avec le texte aligné sur le côté gauche. Comme ça. Parfait. Donc maintenant, si je retourne ici, dans notre page de commande, je voulais faire des textes à gauche puis aller de l'avant et entrer une sorte d' adresse fictive, quelque chose comme ça. Ils savent donc où va la livraison et ils peuvent appuyer sur ce bouton pour modifier leur adresse, ce qui nous amènera à la page de localisation que nous allons concevoir dans les prochaines conférences. Avec cela, je pense que cela complète notre page de commande. Revenons donc dans la prochaine conférence pour travailler sur notre page Progress de commande. 53. Page d'avancement de commande: Très bien, il est donc temps d'aller de l'avant avec notre page Progress de commande. Ne notez donc pas le travail avec les pages que nous avons assemblées. Pour la page Progression de ma commande. Je vais revenir rapidement à notre filaire. Il suffit de voir ce que nous avons dans nos croquis. Sur la page de progression, nous avons un petit texte d'avancement, bien sûr, avec une petite échelle indiquant à partir du moment où ils la commande à livrer, euh, où ils se trouvent actuellement. Je pense peut-être à un petit texte pour montrer l'état actuel de la commande et le petit marquage que nous pouvons créer avec une ligne et un cercle. Ensuite, ici, nous voulons simplement mettre l'adresse de livraison une fois de plus et peut-être dire en livrer deux. Et ensuite, nous voulons leur donner la possibilité de changer leur ordre appelé le château du restaurant , l'ordre et autres. Et je pense que nous pouvons les mettre dans une petite feuille d'action qu'iOS nous donne. Et cela sera donné comme un exercice à la fin de cette conférence. Mais avant de sauter là-dedans, allons de l'avant et concevons les autres pièces. De plus, je vais donner à cette page un peu plus d'espace que ce que j'ai esquissé ici, parce que plus tard je veux revenir et que nous travaillons sur le prototypage, et peut-être que nous ajouterons une petite animation cool pour montrer que l'ordre en cours de préparation ou quelque chose du genre. Je l'ai vu dans d'autres applications de livraison et je trouve ça cool. Nous pouvons donc faire une petite animation ici pour l'utilisateur puisse voir dans quel état ses commandes. Commençons tout d'abord par la barre de navigation. Nous allons aller de l'avant et supprimer ce petit titre d'ici, l'icône plus également, et changer cela en progression trimestrielle. Pour ce bouton d'action, nous allons aller de l'avant et nous allons faire l'ordre d'affichage. Ensuite, ce que nous voulons faire, c'est d'aller de l'avant et de mettre l'accent sur l'arrière-plan de cette page. Je viens donc de sélectionner tout le plan de travail , puis j'ai sélectionné accident pris pour donner cette couleur à l' arrière-plan entier. Maintenant, nous allons utiliser une ligne pour créer une ligne droite en travers ici et lui donner une bordure de cinq pixels autour des majuscules. Et nous allons changer cette couleur de bordure par notre couleur secondaire, qui a ce code hexadécimal. Nous ne pouvons pas, car il s' agit de lignes et que les lignes ont une bordure et ces styles de couleurs ne sont que des remplissages. Nous ne pouvons pas les utiliser, mais nous pouvons aller de l'avant et dire le survol et prendre le code hexadécimal et l'utiliser comme couleur de bordure à la place. Maintenant, s'il s'agissait d'un rectangle et que nous avions un remplissage, nous pourrions utiliser nos raccourcis couleur ici. C'est pourquoi je le saisis manuellement ici. Mais encore une fois, vous pouvez également utiliser vos nuances de couleurs pour refroidir. Et puis je vais faire une petite ellipse avec E à propos de cette grosse taille. Je vais juste utiliser mon trackpad pour centrer cela ici pour celui-ci parce qu'il a un remplissage, nous pouvons faire une couleur primaire, afin que nous puissions montrer où se trouve leur commande. Créons ici une petite zone de texte et écrivons que votre commande est en cours de préparation par le restaurant. Vous voulez aller de l'avant et donner un support à ce corps et utiliser x et trois pour la couleur. Remplacez-le en haut de la balance et en bas. Nous allons dupliquer cela et écrire, s'il vous plaît. Et un autre exemplaire ici. Alignez-le à droite et alignez-le ici et commandez correctement ou réellement séché livré. Ils savent donc où ils en sont. Nous allons ensuite copier ce bouton ou cette instance de ce bouton dans notre page Progression de la commande. Je vais le laisser tel quel, puis je vais faire le T Heat et la bonne commande pour sortir de là et juste apporter ça ici. Parfait. Voyons ce que nous avons d'autre. Nous allons faire un petit bouton pour qu'ils modifient leur commande à partir d'ici. Lorsque nous allons de l'avant et copions ce bouton ici. Et au lieu de passer commande, nous allons modifier cela pour modifier la commande. Parfait. Encore une fois, nous allons laisser le milieu vide ici pour une petite animation que nous allons mettre en place plus tard. Mais pour l'instant, je vais vous faire un peu d'exercice. Si ce document est toujours ouvert ou que vous l'avez dans votre XD, allez-y et ouvrez-le. Si ce n'est pas le cas, vous pouvez y accéder à partir des ressources obliques de conception oblique de developer.apple.com , puis télécharger la version XD. Et puis ouvrez cela dans XD. Et une fois que vous l' avez ouvert, il devrait ressembler à ceci, là où nous faisons glisser la barre de navigation. Je vais donc vous donner un exercice pour faire glisser la barre d'état dans tous vos tableaux d'art. En haut, je veux que vous le placiez en haut de vos tableaux d' art là où cela s'applique. Et aussi, allons-y et trouvons la feuille d'action. On y va. Il est sous vues, un composant d' interface utilisateur. Il s'agit donc d'un tricheur d'action. Vous pouvez tout à fait aller de l' avant et utiliser celui-ci. Donc, une fois qu'ils ont appuyé dessus, commandez ici dans notre design qui pourrait apparaître et leur montrer les différentes options qu'ils ont. Ce qui revient à nos maquettes pourrait inclure la modification de la commande elle-même, pourrait inclure la modification de la commande l'appel au restaurant ou l'annulation de cette commande. Donc, en tant qu'exercice, je veux que vous utilisiez cette feuille d'action pour contrôler ces options dans le design, vous pouvez y retourner et dupliquer ce plan de travail, puis placer cette feuille d'action sur haut. Ou vous pouvez simplement concevoir la feuille d'action séparément ou amener la feuille d'action ici sur le côté de notre tableau d'art et la placer là-bas. Si je ne pense pas que la deuxième option soit plus facile, car vous n'avez pas vraiment besoin de dupliquer toute cette page. Je vais laisser cela comme un exercice et mettre la barre d'état sur tous les tableaux artistiques. Et puis la prochaine conférence, nous allons revenir et faire cela ensemble. 54. Solution d'exercice: J'espère que vous avez eu l' occasion de jeter un coup d'œil à ces deux petits exercices que je vous ai donnés. Si ce n'est pas le cas, ne vous inquiétez pas. Nous allons le faire ensemble dans cette conférence, commençant par la barre d'état de tous nos tableaux artistiques. Et puis en revenant ici et en utilisant une feuille d'actions qui, une fois que l'utilisateur clique sur Modifier l'ordre, elle lui donne des options. Tout d'abord, revenons à notre kit d'interface utilisateur Apple. Parce que nous avons principalement un arrière-plan clair sur nos barres de navigation. Nous allons utiliser la barre d'état ici plutôt que le point sombre ici. Nous allons donc simplement copier la barre d'état à partir d'ici. Retournez ici, et je vais juste le coller avec nos autres ressources Apple ici pour que nous ayons notre instance ici. Ensuite, nous allons aller de l'avant et copier ça sur nos pages. Nous n'en avons pas nécessairement besoin dans notre écran de démarrage, mais nous le voulons sur notre page de connexion. Allons de l'avant et cliquez sur la page de connexion. Collez ça là-dedans. En utilisant la commande V. Je vais aller de l'avant et utiliser simplement Maj et les flèches vers le haut plusieurs fois jusqu' à ce qu'elles soient complètement en haut. Parfait. On va revenir et ajouter un peu d' effet de flou cool à ça. C'est un mur. Nous sommes sur notre page de connexion. Ce que je vais faire, c'est que je vais aller de l'avant et sélectionner la barre d'état. Mais cette fois, assurez-vous de sélectionner uniquement la barre d'état ici que ce groupe ici sans la couche BG ici, qui est l'arrière-plan. Assurez-vous donc de ne copier que la barre d'état. Ensuite, allez de l'avant et sélectionnez la vérification du téléphone, maintenez la touche Maj enfoncée, sélectionnez le menu principal tout en maintenant la touche Maj, commandez légèrement les pages de progression pour aller de l'avant et cliquez sur Commande V. Tout ce que je vais faire allez-y et collez notre barre d'état sur nos pages, le tout au même endroit que nous avons ici. La seule chose que je veux faire ici dans la vérification étrangère, c'est simplement ramener ou décaler tout de 20 pixels. Il y a assez d'espace. Nous pouvons même en faire 30. Je pense que c'est mieux. Plus vous avez d'espaces blancs entre les choses, c'est mieux. Vous ne voulez pas enfoncer votre design dans un petit écran, tel qu'un écran iPhone. Nous allons donc faire la même chose. Nous allons copier la barre d'état. Nous allons faire la même chose. Allez-y et faites-le encore une fois en copiant l'intégralité de ce groupe de barres d' état sur notre emplacement de paiement de profil ou sur nos pages d'historique. Maintenant, tous nos cadres comportent cette barre d'état, c'est ce que nous recherchons. Nous sommes maintenant prêts à passer à notre feuille d'action ici. Et donc pour celui-là, nous allons revenir ici et passer à notre feuille d'action qui devrait être en dessous. On y va. Je vais copier l'intégralité de la feuille d'action ici. Assurez-vous de sélectionner ce groupe. Allez-y et copiez-le dans votre design ici. Je vais le coller ici dans la plaque de plâtre sur le côté. Ensuite, nous allons modifier le titre pour modifier l'ordre. Dans cette petite description, nous allons juste écrire l'ordre des modifications pour cette première action. Nous allons modifier l'ordre. Pour la deuxième action, nous allons annuler la commande. Et pour ce troisième, nous allons contacter le restaurant. Parfait. C'est maintenant que s'ils cliquent sur cet ordre d'édition, ouvriront cette alerte ou cette feuille d'action sur laquelle nous n'avons pas à nous inquiéter pour le moment. Mais lorsque nous effectuons un prototypage, vous verrez pourquoi cela est utile. C'est ça l'exercice. Nous allons faire une pause rapide ici avant de revenir et de poursuivre nos créations. 55. Ajouter des flurs: Très bien, nous avons fait un excellent travail jusqu'à présent. Nous sommes presque terminés avec notre maquette ici. Nous avons encore quelques pages à concevoir. Et ensuite, nous sommes prêts à passer en termes de maquettes mobiles. Nous avançons ensuite dans l'exportation et le partage avec nos collègues et les membres de l'équipe. Avant de terminer ces pages, je voulais vous montrer quelques-uns des effets que XD a à offrir et comment ils fonctionnent sur les objets et les images, etc. Pour ce faire, sur la page de connexion, je veux aller de l'avant et simplement zoomer. Juste là. Nous avons cette petite barre d' état ici, bien sûr, que nous avons rassemblée lors des conférences précédentes. Cette barre d'état de cette page est accompagnée de l' arrière-plan ici, ce que nous voulons car il y a cette image ici. Et s'il n'avait pas ce fond, ça interférerait ou cette horloge ici interférerait avec cette image. Nous ne voulons donc pas cela, et c'est pourquoi nous voulons ce contexte ici. Maintenant, l'un des effets intéressants que vous pouvez appliquer sur une page comme celle-ci ou une barre d'état comme celle-ci consiste à appliquer ce qu'on appelle un flou d'arrière-plan. Xc propose deux types de flous différents. L'un d'eux est flou d' arrière-plan, l'autre étant flou d'objet. Et nous allons les explorer tous les deux dans cette conférence ici. Le premier que je voulais explorer en tant que flou d'arrière-plan, qui s'applique à la barre d'état. Allons de l'avant et sélectionnons la barre d'état. Et au lieu de sélectionner l'ensemble, double-cliquez pour sélectionner uniquement le BG ou le calque double-cliquez pour sélectionner uniquement d'arrière-plan ici. Assurez-vous que dans le panneau Calques, vous n' avez sélectionné que ce calque d'arrière-plan. Une fois que vous avez sélectionné ce calque BG, j' active le flou d'arrière-plan. Maintenant, si c'est cette périphérie d'objet, vous allez de l'avant et remplacez-le en flou d'arrière-plan, puis continuez et activez-le. Il y a trois propriétés que nous pouvons modifier ici. La première est la force ou le flou. Plus le nombre que nous avons défini ici est élevé, plus le flou sera appliqué. heure actuelle, nous n'en voyons pas grand-chose car la transparence de ce calque d'arrière-plan est à 100 % car nous le rendons moins transparent, vous verrez que le flou sera appliqué sur ce que ça ressemblera à ça. Donc, pour ce faire, je vais aller de l'avant et réduire la transparence de tout cela. Donc maintenant, si vous regardez en haut, vous pouvez voir le flou. instant, mon arrière-plan n'a même plus de couleur, c'est juste un flou. Et si je le sélectionne à nouveau et que je baisse le flou, vous pouvez voir qu'il devient de moins en moins floue. Et si je le fais plus haut, il deviendra de plus en plus floue. Ce que cela fait essentiellement c' est de prendre ce calque d' arrière-plan créer n'importe quoi en dessous et d'ajouter un flou à tout ce qui se trouve en dessous. Et c'est ce que fait le flou d' arrière-plan. Maintenant, cette option ici, si je vais de l'avant et que nous allons rendre ce calque d'arrière-plan plus sombre et vice versa. Si je vais dans l'autre sens, il ira de l'avant et le rendra de plus en plus léger. Mais c'est un peu ce que nous voulons dans ce cas, de sorte que nous créons suffisamment de contraste pour l'utilisateur puisse voir la barre d'état. Alors pourquoi ne pas mettre ça à 25 ans avec un flou d'arrière-plan lui-même à 15, je pense que ça aurait fière allure. Maintenant, si vous le regardez depuis le plus grand zoom arrière, vous verrez que c' est plutôt bien. Avant de passer à autre chose, je veux également vous montrer comment fonctionne le flou d'objets. Donc, si je sélectionne ce logo ici, si nous allons de l'avant et au lieu du flou d'arrière-plan, sélectionnez le flou d'objet, et continuez et activez-le ici. Ce qui arrivera, c'est que XD va l'avant et brouillera juste ce calque lui-même. Nous ne brouillons donc rien en dessous de ça. Nous brouillons le logo lui-même. Bien sûr, avec cela, vous pouvez créer des effets sympas si vous le souhaitez vraiment. À titre d'exemple, vous pouvez faire quelque chose comme ça où vous créez peut-être un arrière-plan unique pour le logo et peut-être le rendre un peu plus grand. Et ensuite, par exemple, dupliqué et celui-ci, vous pouvez supprimer le flou et le rendre un peu plus petit. Je peux devenir vraiment créatif et créer des trucs comme ça avec un flou d'objet. Et vous pouvez même aller de l'avant et le rendre moins visible. Il n'est donc pas totalement transparent. Quelque chose comme papa pourrait avoir l'air cool. Mais encore une fois, c'est vraiment à vous de choisir et à quel point vous voulez faire preuve de créativité avec vos flous. Et je vais juste aller de l'avant et commander à Z de l'annuler. Beaucoup de fois, je n'en veux pas vraiment. Ils veulent juste vous montrer ce que le flou d'objets a à offrir. Cet effet que nous avons créé pour le logo ressemble à une ombre. Ce que nous allons faire lors la prochaine conférence, c'est revenir et apprendre comment créer des ombres pour des objets dans XD. 56. Ajouter des ombres: Un autre effet vraiment utile et pratique que vous pouvez ajouter à vos créations pour vraiment polir les choses est appelé ombres. Bien sûr, vous pouvez maintenant appliquer des ombres à n'importe quel objet de votre choix. Et le but de l'ombre est de vraiment séparer votre premier plan, qui est les principales parties de votre interface, telles que les boutons, le texte, les champs, etc. du reste de la page, du reste de la page arrière-plan. Quelque chose d'autre derrière ces objets ? Maintenant, une chose que vous voulez faire, surtout si vous êtes un designer débutant, est d'être plus subtil avec les ombres. J'ai remarqué que beaucoup de designers rendaient les ombres un peu trop fortes. Le but de l' ombre n'est donc pas de créer un effet vraiment fort sur l'objet. En fait, nous essayons d'être aussi subtils que possible tout en veillant à ce que l'ombre respecte son objectif et que notre design soit plus soigné. Et vous verrez à quoi cela ressemble en une seconde. Je vais aller de l'avant et, par exemple, appliquer une ombre sur mon bouton ici. Bien sûr, parce que notre bouton est une instance de ces composants, nous pouvons accéder au composant cliquant ici et en cliquant sur Modifier les composants principaux. Cela nous amène donc à la composante où nous l'avons. C'est donc notre composant principal. Et la beauté des composants, c'est que nous pouvons aller de l'avant et leur ajouter des ombres et qu' seront appliqués dans nos conceptions. Par exemple, je vais ajouter des ombres à ce bouton ici en double-cliquant et en sélectionnant le calque d'arrière-plan ou ce calque rectangle. Pour ce qui est de l'ombre, nous avons deux options. Nous pouvons faire une ombre intérieure, donc il s'agit d'une ombre à l'intérieur du bouton. Maintenant, cela est généralement utilisé lorsque vous essayez de créer un bouton de type 3D ou que vous souhaitez créer peut-être un état tactile. Ainsi, lorsqu'un utilisateur touche le bouton, il affiche cette ombre intérieure que l'on voit généralement dans l'ombre , plus dans la conception du jeu que dans la conception de l'interface utilisateur de l'application. Mais bien sûr, c'est vraiment à vous de choisir en tant que designer. Mais encore une fois, j'aurais pu faire, c'est d'être subtil avec ça. Nous allons passer par ce que les ombres ont à offrir. L'ombre a essentiellement une position x et y. L'exposition est donc là où cette ombre tombe par rapport à ce rectangle. Si nous changeons cela par, disons que 20 ou l'ombre se déplacera de 20 pixels vers la droite. Et si c'est le cas, disons la même chose pour le y. Vous verrez que notre ombre se déplace complètement de 20 pixels vers la droite et de 20 pixels vers le bas en tant qu'effet. Et c'est ici, semblable aux effets de flou, que notre ombre est floue. Si nous changeons cela par 20 ou si l' ombre devient plus mélangée a. Oui. Et s'il avait dit ça à 0, ce sera très dur et juste une ligne droite. Encore une fois, les ombres intérieures, pas tellement ce que nous recherchons, mais nous recherchons une ombre portée, plus généralement utilisée dans la conception de l'interface utilisateur. Donc, si l'ombre portée est activée, elle créera une ombre en dehors de ce rectangle ici, ce que nous recherchons. Par défaut, Xd est défini sur 0, x, trois pixels pour le y et six pixels pour le flou lui-même. Mais il peut jouer avec ces chiffres. Donc, juste pour voir à quoi cela ressemblerait, vous pouvez revenir à vos créations. Nous pouvons maintenant voir à quoi ressemblera cette ombre. Je pense que ce que j' aimerais faire, c'est créer un flou plus important autour cette ombre et peut-être la faire baisser quelques pixels supplémentaires. Juste pour appliquer ces effets, nous allons cliquer deux fois dessus, sélectionner le rectangle, changer ce blanc et peut-être six, et changer ce flou à 15. Essayons cela et voyons ce qui se passe. Ça a l'air un peu mieux. Retournez ici. Une chose que je tiens à noter, c'est que vous pouvez modifier la couleur de l'ombre en cliquant sur cette icône de sélection de couleurs ici. Bien sûr, vous pouvez appliquer une couleur à vos ombres. Nous pouvons faire une ombre rouge ou nous pouvons faire cette ombre verte. Mais généralement, vous voudriez aller avec une ombre noire. C'est plus couramment utilisé. Et tu veux y retourner, très subtil avec ça. Vous ne voulez pas une ombre forte où l'OPCD est beaucoup trop haut. Vous voulez quelque chose où l'opacité se situe entre cinq et 30 %, je dirai peut-être 20 à 30 %. Mais cela varie bien sûr en fonction de ce qui se passe dans le reste de votre page. J'aime utiliser 10% ici ou même moins de lipides, peut-être 8 % parce que je veux qu' il soit très subtil. Mais comme vous pouvez le constater, c'est toujours un effet qui montre cet effet. C'est quand même que vous pouvez toujours voir l'effet de cette ombre ici. Nous pouvons faire la même chose avec notre TextField ici. Nous pouvons donc sélectionner l'arrière-plan des champs de texte une ombre portée et faire les mêmes cinq pixels, 15 pixels et définir l'opacité à 8 %. Maintenant, si je vais ici, vous verrez mes champs ont également une ombre maintenant. Mais comme vous pouvez le constater, c'est un peu fort qui m'a volé. Donc, ce que je vais faire, c'est que je vais retourner ici, sélectionner ça et le modifier un peu. Je veux donc réduire un peu le flou et modifier l'opacité à, faisons 4%. Je pense que c'est un peu mieux, plus subtil. Nous ne voulons pas qu'il sorte vraiment trop de la page. Nous voulons qu'il soit subtil. Je pense donc que c' est plutôt bien. D'autres choses auxquelles nous pouvons appliquer des ombres dans notre conception incluent ces cartes ici. En général, nous voyons que les conceptions de cartes ou interfaces utilisateur de cartes ont une ombre subtile, juste séparée du reste de la page. Ce que je vais faire, c'est que je vais laisser ça comme un exercice à faire. Allez-y et ajoutez une ombre à notre carte ici et la cour ici et assurez-vous qu'elle est un composant pour l'appliquer au composant principal. Et encore une fois, restez subtil. Effectuez une ombre portée avec une opacité de 8 %. Et vous pouvez laisser le XY tel qu'il est 03, puis vous pouvez appliquer un flou de dix pixels. Je vais donc vous laisser ça et nous le ferons ensemble lors de la prochaine conférence. 57. Exercice d'ombre: J'espère donc que vous avez pu appliquer cette ombre à nos cartes ici. Nous allons le faire ensemble lors de la prochaine conférence si vous ne l'avez pas fait. Donc, pas de soucis du tout. Les effets que nous voulons ajouter interface utilisateur de ces cartes sont ici, celui-ci sur la page du restaurant et ceux de notre page de menu. Maintenant, la beauté des deux est que parce que nous utilisons ici une grille de répétition, suffit de l'appliquer à celle-ci. Et cela s'appliquera à toutes les autres interfaces utilisateur difficiles. De même ici, parce que nous utilisons des instances d'un composant, nous n'avons besoin que d'appliquer en une seule fois et il est appliqué dans le reste de nos conceptions. C'est donc une autre raison pour laquelle composants et les grilles de répétition sont si utiles, car cela réduit vraiment le travail de répéter le même motif, répondre à la même ombre encore et encore et encore Encore une fois. Commençons par la page du restaurant. Zoomez ici, sélectionnez notre carte. Ce que vous voulez faire, c'est de sélectionner à nouveau le calque d'arrière-plan, puis nous ferons une ombre portée. Gardez les x et y sauf si c'est le cas. Nous allons cliquer sur la ville de police, ce qui la ramenera à 8 %. Je pense que c'est subtil et propre. Et puis nous en ferons dix pour le flou. Cool, je pense que ça a l'air plutôt bien. Maintenant, bien sûr, vous pouvez jouer. n'y a pas de bien ou de mal en ce qui concerne les chiffres que vous restez ici tant que cela semble bon. Si vous voulez ajouter plus de flou, vous pouvez certainement aller de l'avant et le faire. Ou si vous voulez le rendre plus visible, votre ombre, elle le fait totalement tant que vous la garderez. Assez subtil. Alors, en allant à cette interface utilisateur de la carte, revenons à la page de nos composants et appliquons simplement ici. Il est plus facile de sélectionner ce calque d'arrière-plan. Et je double-clique simplement pour accéder à ce composant MainComponent, sélectionnez mon calque rectangle ici, celui qui couvre l'ensemble du composant. Et puis on va faire une ombre portée. Et la même chose. Dix pixels pour le flou et 8 % pour mon opacité. Je vois que ça a l'air plutôt bien, plutôt propre, très joli. Maintenant, vous pouvez voir que nous ajoutons ces détails subtils qui font vraiment ressortir notre design une belle apparence et une finition professionnelle. C'est très important lorsqu'il s'agit de mettre en place des maquettes que les clients laquent. Ainsi, comme vous pouvez le constater, nous commençons vraiment à peaufiner nos créations, commençant à être très bien maintenant, vraiment comme ce que nous avons fait jusqu'ici. Ainsi, lorsque nous reviendrons dans la prochaine conférence et continuons travailler sur notre page de menu oblique de profil. 58. Page de profil: Très bien, nous sommes enfin prêts à commencer notre prochain design, qui est notre page de profil. Pour une page de profil, si je viens de remonter nos filaires que nous avons assemblés, nous voyons que nous voulons avoir un arrière-plan simple et ensuite avoir une photo de l'utilisateur ici avec le prénom et nom, petit X. Pour fermer la fenêtre ici ou fermer le menu ou le profil. Quelques boutons pour qu'ils parcourent différentes pages. De la page Count à l'historique des ordres de paiement, mettant à jour leur robe et enfin à la loi Yacc depuis l'application. Nous voulons donc aller de l'avant et assembler une photo de profil, une petite zone de texte ici, petite icône de près ici, puis le reste des boutons ici, nous allons les placer. Et je sais que dans mon filaire ici, nous n'avons pas mis icônes sur le côté gauche pour ces options. Mais ce que je veux faire, c'est aller de l'avant et y ajouter des icônes au fur et à mesure que nous concevons cette page. Revenons à XD et configurons cela ici sur notre page de profil. Déjà prêt à aller avec notre page de profil sélectionnée ou le tableau d'art lui-même. Je vais aller de l'avant et ouvrir nos bibliothèques , puis sélectionner l' axone one couleur pour l'arrière-plan. instant, le problème que nous avons est que notre barre d'état est maintenant la version sombre. Nous voulons donc vraiment que la version légère soit un petit conseil ici. Bien sûr, nous pouvons revenir à nos fichiers Apple et extraire cette version blanche ou la version légère de cette barre d'état. Mais il y a un moyen facile de contourner cela. Et c'est pour sélectionner notre barre d'état ici. Et je vais juste passer par le panneau de deux calques et m'assurer que je l' ai sélectionné. Ensuite, allez-y et donnez-lui un remplissage blanc qui fera la même chose ici. C'est beaucoup mieux. Nous voulons une petite icône X fermer ici, c'est concevoir cela en créant deux lignes. Je vais donc aller de l'avant et zoomer sur cette zone ici. Il suffit de créer deux lignes. Je vais leur faire 35 pixels de largeur. Et je vais aller de l'avant et changer la couleur de la bordure à quatre pixels et faire un capuchon arrondi et une couleur blanche. Je vais reproduire ça en appuyant sur la commande D. Pour l'un d'entre eux, on va définir un angle de 45 degrés. Et pour l'autre, nous allons faire un angle négatif de 45 degrés. Cela va aller de l'avant et créer une sorte d'icône en forme de x, je suppose, pour notre bouton de fermeture. Et je vais les sélectionner tous les deux ensemble. Et peut-être que plus tard, nous voudrions l'utiliser ailleurs. Allons de l'avant et créons un composant en appuyant sur la commande K. Ensuite, c'est le composant principal et nous allons simplement faire glisser celui-ci, car c'est un composant moyen ici vers mes composants . Mettez-le ici pour l'instant. Ensuite, je vais revenir à notre page de profil et à partir de nos bibliothèques, allons-y et faites-le glisser ici. Nous n'avons pas de nom pour cela. Allons de l'avant et renommons ça. Bouton Fermer. C'est juste pour qu'il soit un peu plus organisé ici. Je vais le placer quelque part ici. Nous ne voulons pas l'être, nous ne voulons pas qu'il soit trop près du sommet et nous ne voulons pas être trop bas non plus. C'est ça. Maintenant, nous avons besoin d'une petite ellipse. Nous allons donc faire E sur notre clavier et faire glisser une petite ellipse ici pour voir notre photo de profil. Ensuite, nous allons appuyer sur la touche T de notre clavier et créer une petite zone de texte ici, juste en premier et en dernier ici. Pour l'instant, nous n'allons pas mettre d'échantillons de données qui reviendront plus tard pour le faire. Mais pour l'instant, je ne fais que créer les champs dont nous avons besoin. Et je vais créer celui-ci, laisser un espacement de 20 pixels. Je pense que mon icône de profil est un peu trop grande, donc je vais aller de l'avant et la réduire à 80 pixels en largeur et en hauteur. Allez-y et alignez cela au milieu de cela. On y va. Pour ma police ici, je vais choisir. Revenons à nos ensembles de types. Sélectionnons l'en-tête h3. Troisième tête, ça a l'air bien. Et je vais changer le remplissage en blanc. Allons de l'avant et créons. Voyons combien de boutons avons-nous besoin ? 12345. Allons de l'avant et créons cinq boutons ou incidences, nos boutons ici, puis nous reviendrons dans la prochaine conférence. Pour compléter cette page. Nous allons sélectionner le bouton que nous avons ici. Allons de l'avant et retrouvons le bouton effectué ici. Nous allons aller de l'avant et centrer ça le long de notre page. Et je vais aller de l'avant et les amener pour qu'ils correspondent au même type de pixels du côté gauche ici. Et je vais aller de l'avant et dupliquer cela plusieurs fois et utiliser Maj et les touches fléchées vers le bas pour les faire descendre. Nous avons donc besoin de cinq boutons ici, 12345. Et puis je vais aller de l'avant et les sélectionner tous et les faire baisser un peu. Je vais les regrouper pour pouvoir utiliser des piles. Allons de l'avant et activons les piles juste pour que nous puissions facilement définir l'espacement entre elles. Je veux donc définir un espacement de, je pense que 15 pixels avaient l'air bien. Et bien sûr, nous voulons qu'il soit vertical et non horizontal. Allons de l'avant et faisons cela et laissons-le tel quel. Je pense que c'est bon pour l'instant. Ensuite, nous reviendrons dans la prochaine conférence pour attribuer ces boutons, leur titre et créer une version différente une icône. 59. Ajouter des icônes: Il est temps d'ajouter quelques icônes à nos boutons , puis de récapituler une page de profil. Personnellement, j'adore utiliser ce site Web appelé flat icon.com qui vous permet d'accéder à des millions d' icônes vectorielles et d'autocollants que vous pouvez utiliser gratuitement. Tant que vous attribuez la bonne attribution aux auteurs ou aux créateurs de ces icônes. Et c'est génial car on peut chercher des choses. Imaginons que vous travailliez sur une icône de profil. Vous pouvez rechercher un profil et vous serez frappé par des tonnes d'icônes de profil et de vecteurs, etc. Ils peuvent facilement le télécharger et l'utiliser dans votre projet. J'ai déjà téléchargé les icônes dont nous avons besoin pour notre page de profil. Et je les ai placés dans le dossier Icones pour les ressources de cette conférence ou de ce projet. Sous la page de profil devrait pouvoir trouver ces cinq icônes SVG que nous pouvons utiliser pour nos boutons de page de profil. Mais tout d' abord, allons d'abord mettre place une nouvelle étape pour nos boutons afin que nous puissions utiliser cet état ou quatre icônes. De cette façon, nous avons des boutons qui permettent de créer des icônes. Je vais donc aller de l'avant et passer en revue mon composant ici. Ensuite, je vais le sélectionner et créer un nouvel état. Comme ça. Et nous allons appeler cette version allégée parce que nous allons en faire une version légère et l' appeler Icone à gauche. Donc, dans cette version, je vais d'abord sélectionner notre arrière-plan ici tout en maintenant la commande. Parcourez notre bibliothèque et sélectionnez cette couleur d'accent pour notre bouton. Et nous allons sélectionner l'accent à la couleur. Et je vais aller de l'avant et l'amener à l'oreille gauche quelque part ici pour l'instant. Ensuite, nous allons faire glisser l'une de ces icônes. Faisons le comptage un ici et apportons ça, on va l'amener à l'extérieur d'ici. Ensuite, je vais aller de l'avant et simplement déplacer celui-ci. Déplacez-le à l'intérieur du bouton ici. Nous allons aller de l'avant et sélectionner à la fois le rectangle et l'icône. Alignez-le au milieu verticalement. Et je ferai la même chose avec les textes des boutons, mais cela devrait déjà être centré. Je veux donc que celui-ci soit à 15 pixels à partir de la gauche. Et je veux que les textes de mon bouton soient à 15 pixels de l'icône. Ça a l'air bien. Maintenant, pour l'icône, nous allons aller de l'avant et changer également le remplissage à cet accent. Comme il s'agit d'une icône SVG, nous pouvons facilement modifier la couleur. Ce n'est pas le cas pour l'icône PNG. Par conséquent, lorsque vous utilisez des icônes, il est préférable d'utiliser SVG pour cette raison. Une dernière chose pendant que nous sommes ici, allons nous assurer que notre texte ici est également aligné à gauche. Ensuite, nous pourrons revenir en arrière, et revenons à notre page de profil. Je vais sélectionner chacun d'eux et sélectionner la version légère avec une icône à gauche. La même chose ici. Jusqu'à ce qu'ils aient tous cette version. Et je vais aller de l'avant et changer le bouton de ce bouton textos ici pour rendre compte. Nous allons changer cela en paiement, suivi de l'historique des commandes, de l' adresse, suivi d'un dernier avocat, mais non le moindre. Alors que nous avons sélectionné ce bouton de paiement, je vais sélectionner l'icône du compte ici. Tandis que vous avez sélectionné cette option, faisons glisser la carte de crédit SVG et ici. Alors maintenant, ce Dieu a séché dans le bouton lui-même, c'est ce que nous voulons. Et je vais le placer directement sur icône du profil, c'est ce que nous devrions avoir. Ensuite, supprimez le profil ou l'icône du compte. Enfin, nous allons aller de l'avant et lui attribuer cet accent à la couleur. On y va. Maintenant, pour l' historique des commandes, la même chose. Allez-y et sélectionnez l'icône du compte, assurez-vous qu'elle est sélectionnée dans le panneau Calques. Et puis faites glisser ce point de temps SVG et ici, déplacez-le à l'intérieur. Je suis très satisfait de la taille de l'icône, alors assurez-vous d'avoir une taille similaire pour vos icônes. Celui-ci est 22 sur 20 pour aller de l'avant et supprimer l'autre. Et bien sûr sélectionné, allez dans Couleurs, sélectionnez x et deux. Nous avons presque fini ici, deux autres boutons et nous sommes prêts à y aller. Nous allons donc sélectionner l'icône du compte ici. Allez dans notre dossier et faites glisser le point SVG. Faites-le glisser dessus. Vous pouvez maintenant effectuer un zoom avant pour faciliter le déplacement des objets. Nous allons celui-là, sélectionnez-le et lui attribuons un accident à la couleur. Et enfin, j'ai aimé l'icône de votre compte ici. Faites glisser le SVG de déconnexion. Quoi ? Celui-ci a, collez-le comme une énorme icône. Allons de l'avant et verrouillons les proportions ici et modifions la largeur à 22 pixels. Et nous le déplaçons ici. Ça a l'air bien. Maintenant, modifiez les frappes et accédez au panneau Calques, compte et supprimez. Je vais juste m'assurer que celui-ci est centré parce qu'il semble un peu décalé en ce moment. Un peu, je pense que c'est un centre ou aussi aligné sur le milieu que possible. Voilà, c'est nos boutons pour la page de profil. Je pense que ça a l'air bien. Nous pouvons aller de l'avant et les réduire un peu plus. Je pense que quelque part ici va bien paraître. Peut-être qu'en deuxième pensée, je peux ajouter plus d'espacement, peut-être faire 20 pixels entre eux. Je pense que c'est plutôt bien. Maintenant, une chose à noter est que parce que nous avons apporté des modifications à ces boutons et qu'il y avait des instances de composants, nous les avons tous remplacés. Alors que les icônes elles-mêmes ne changeront pas entre elles, si nous revenons toujours à nos états pour cette icône de version légère à gauche, nous pouvons tout de même changer les choses. Par exemple, nous pouvons modifier l'emplacement du bouton. Et cela va encore changer dans ce cas également. Si, à un moment donné, supposons que nous décidions de changer l'arrière-plan du bouton ici afin que nous puissions toujours revenir à notre bouton ici et continuer à modifier ce changement, car nous n'avons pas remplacé la couleur de chaque bouton. instance. Cela va toujours aller de l'avant et l' appliquer à ma page ici. N'hésitez donc pas à jouer et utiliser la couleur que vous aimez. Je pense que j'aime cette couleur ici. Je vais donc m'en tenir à celle-ci au lieu de la version légère. De cette façon, je peux aller de l'avant et même prendre mes textes ici pour supprimer cette version légère et simplement dire l'icône à gauche. C'est donc mon type de bouton par défaut avec une icône à gauche. Ça a l'air bien. Nous allons revenir à la prochaine conférence et travailler sur notre page de paiement. 60. Page de paiement: Il est temps de travailler sur notre page de paiement. Et je vais juste aller de l'avant et faire remonter nos maquettes ou les filaires pour voir ce que nous avons. Ce que j'avais en tête pour cette page, c'est permettre à l'utilisateur de voir ses options de paiement ou leurs cartes premium qu'il a ajoutées, avec la possibilité de choisir celle qui est la principale, comme illustré. avec cette petite coche ici. Vous pouvez choisir entre les différentes options de paiement ou elles peuvent aller de l'avant et en ajouter une nouvelle. Et si vous vous souvenez, en tant qu'exercice, d'une affectation pour vous, je veux que vous ayez conçu cette page de paiement où l'utilisateur ira de l'avant et saisira les informations de carte de crédit sur cette page. Et maintenant, je vais vous donner plus de détails sur ce dont vous avez besoin pour cette mission. Mais avant d'en arriver là, concevons ensemble cette page de paiement. Ce que nous voulons ici, c'est simplement un rectangle montrant les quatre derniers chiffres de cette carte. Et puis une petite coche pour indiquer qu'il s' agit de la carte principale sélectionnée. Nous avons besoin d'un plus ici, icône arrière et d'un bouton Ajouter en bas. Alors, allons-y. Ouvrons XD. Nous avons notre page de paiement. Allons de l'avant et débarrassons de ce titre ici et changeons notre gros titre en paiement. Pour le bouton Retour ici, on va juste écrire. Nous avons déjà une icône plus ici, ce qui est génial. Et maintenant, nous allons concevoir un rectangle ici. Et je vais faire de celle-ci une hauteur d' environ 65 pixels. Si vous n'avez pas exactement 65 pixels, vous pouvez aller de l'avant et lâcher prise à n'importe quel moment et utiliser la commande et les touches fléchées pour raccourcir ou agrandir votre rectangle. Je peux faire la même chose avec une flèche droite rendre plus longue ou la flèche gauche pour le raccourcir. Cela dit, nous allons faire ce rectangle à 29 pixels de chaque côté. Nous allons donc utiliser à nouveau les touches fléchées de commande pour déplacer cela jusqu'à ce que nous ayons la partie que nous voulons. Ça a l'air bien. Je vais donc aller de l'avant et contourner les frontières et régler le rayon du coin de la frontière à dix. Je vais donner une couleur à l'arrière-plan, à l'accident. Et puis je vais ajouter un texte ici en utilisant l'Alt et le huitième Here. Je vais générer ces points, icônes et ensuite taper 1234. Cela représente donc en quelque sorte les quatre derniers chiffres de la carte. C'est généralement comme ça qu'il est affiché dans les applications. Nous pouvons donc aller de l'avant et y donner notre texte. Faisons le corps d'un support et modifions la couleur de la police à suivante. Et trois. Je vais aller de l'avant et mettre celui-ci du côté droit ici et l' aligner à droite comme il est. Je vais reproduire ce texte, le mettre à gauche. Et pour celui-là, on va aller de l'avant et l'aligner à gauche. Et on va juste écrire ce qu'est cette carte. On va faire un visa. Et au lieu d'une petite coche, je pense en fait que nous pouvons aller de l'avant et simplement écrire si c'est la carte principale ici. Pourquoi ne pas déplacer cela vers le haut, dupliquer ce texte, le baisser et utiliser le textile de légende ici. Nous allons aller de l'avant et changer la couleur en axone trois. Et ici, nous allons écrire le primaire en majuscules. Comme ça. Je vais juste aller de l'avant et les aligner au milieu et avoir 25 pixels du côté gauche ici. Je pense que ça a l'air bien. Nous allons aller de l'avant et les regrouper en faisant glisser et en sélectionnant la commande G. Allons-y et remontons un peu ici. Dupliquez ça. Apportez-le ici. Pour celui-là, nous allons aller de l'avant et retirer cette primaire et faire baisser le visa. De cette façon, l'utilisateur sait quelles sont les cartes principales. Et s'ils veulent faire de cette carte principale ou une autre carte principale, ils peuvent choisir celle-ci. Et dans la page détaillée du trottoir , ils peuvent aller de l'avant et faire comme cet aliment primaire ou nous pouvons même faire quelque chose où ils peuvent sélectionner la carte et une feuille d'action comme celle-ci peut apparaître leur demandant s'ils veulent remplacer cette option comme mode de paiement par défaut. Il y a vraiment une infinité. Avant maintenant. Notre page de paiement est en quelque sorte complétée ici. Nous avons juste besoin d'un bouton en bas pour qu'ils ajoutent une nouvelle carte. Allons donc chercher le bouton. Faites glisser un à travers le milieu et alignez-le vers le bas avec 35 pixels du bas et modifiez-le. Mais dans le texte pour ajouter une carte. Ajout d'une carte en cliquant sur celle-ci. Maintenant, je vais vous donner cette mission sur la mise en place de la page de paiement. Je vous suggère de jeter un coup d'œil à quelques exemples ou inspirations différents pour créer cette page de paiement. Un que nous avons ouvert ici depuis la livraison sur mobile. Vous pouvez donc voir ici que nous avons un numéro de carte et, bien sûr, vous pouvez ajouter d'autres champs tels que le nom du titulaire la carte, la date d'expiration, le CVE, etc. Alors faites une pause ici, Google, quelques pages de paiement, de paiement mobile pour vous inspirer. Cela dit, je vous laisserai cette page et si vous voulez mes commentaires et je l'enverrai à bonjour intelligent sur gmail.com. Et je vous ferai également part de vos commentaires et vous pourrez télécharger votre projet. Et j'aimerais y jeter un coup d'œil, mais oui, n'hésitez pas à faire une pause ici, travailler sur cette page. Vous pouvez continuer et dupliquer votre tableau d'art ici et le placer peut-être ailleurs, peut-être ici ou ailleurs. Une fois que vous en aurez fini, nous allons aller de l'avant et passer à notre page de localisation. 61. Page de localisation: Nous sommes prêts à travailler sur notre page de localisation. Allez-y et ouvrez nos filaires pour voir ce que nous avons ici. Bien sûr, nous avons la recherche de l'adresse ici. Ce que nous pouvons faire ici, c'est que nous pouvons changer cette barre de navigation contre l' une de ces barres de recherche. Ensuite, nous allons utiliser nos plug-ins pour créer une carte dans les conférences suivantes. Ensuite, nous avons besoin d'un stylo pour afficher leur adresse sur la carte elle-même, ainsi qu' un petit rectangle pour leur montrer l' adresse exacte qu'ils ont saisie, ainsi qu'un petit bouton pour qu'ils puissent trouver leur position actuelle sur la carte. Un petit bouton de sauvegarde ici. Pour la carte elle-même, nous allons utiliser des plugins et les conférences suivantes pour générer une carte en arrière-plan ici. Mais pour l'instant, allons de l'avant et placons ces éléments à l'écran. Et ensuite, nous partirons de là. Tout d'abord, allons-y et échangeons cette barre de navigation que nous avons. Quatre. Celui-là, juste ici. Allons de l'avant et supprimons celui-ci et placons celui-ci à la place. Vous remarquerez que nous avons placé cette barre de navigation dans notre panneau Calques au-dessus de la barre d'état. Il couvre actuellement la barre d'état. Nous pouvons également le voir dans notre panneau Calques. Vous pouvez également réorganiser calques autrement que de les faire glisser ici. Vous pouvez en fait aller de l'avant et cliquer avec le bouton droit de la souris et cliquer sur Envoyer en arrière, ce que nous allons aller de l'avant et lui renvoyer un calque ou l' envoyer en arrière. Nous allons aller de l'avant et envoyer cet objet jusqu' au calque le plus bas de ce tableau. Ensuite, il peut aller de l'avant et faire le contraire en faisant avancer les choses et en mettant les choses au premier plan. En tant que raccourci, vous pouvez effectuer un crochet d'ouverture de commande pour abaisser les calques ou un crochet de fermeture de commande pour faire remonter les calques. Je vais aller de l'avant et utiliser le support ouvert de commande, prendre cette couche jusqu'au bas. Ensuite, nous allons changer le titre en adresse. On y va. Voyons voir. Nous n'avons pas vraiment besoin de l'arrière ici. Allons de l'avant et débarrassons-nous de cela et il suffit de changer ce bouton d'action ici pour faire. On y va. Nous pouvons rechercher leur adresse ici. Ils peuvent cliquer sur Terminé une fois qu'ils sont terminés. Ensuite, faisons glisser le bouton de mes bibliothèques ici avec 35 pixels en bas, puis modifions le titre pour enregistrer l'adresse. Très vas-y. Ensuite, à partir de vos ressources, dans le dossier Icones, vous pouvez trouver le dossier d'emplacement lequel vous pouvez l' ouvrir et faire glisser dans lequel vous pouvez l' ouvrir et faire glisser ces deux icônes sur notre écran. Parfait. Celui-là. Nous allons aller de l'avant et le placer quelque part ici et lui donner un espacement généreux depuis le bouton. Ce bouton permet à l'utilisateur de se retrouver sur la carte. Ensuite, nous allons donner une couleur secondaire à ce bouton ou à cette icône de localisation. Essayons le premier accident. Même chose pour ce stylo ici. Nous allons utiliser celui-ci pour montrer à l' utilisateur la robe qu'il regarde sur la carte. Nous allons donc juste mettre au centre et lui donner aussi les actes et une couleur. Voyons de quoi d'autre avons-nous besoin ? On a presque fini ici. Nous avons juste besoin de notre rectangle avec notre adresse ici. Alors pourquoi ne pas aller de l'avant et créer un rectangle ? Et je vais juste aller de l'avant et l' aligner en quelque sorte sur mon bouton en bas. On y va. Je vais aller de l'avant et sortir de là. Je vais donner à cela un rayon de dix pixels. En plus de mon accident, une couleur remplace très près de l'épingle ici. Ensuite, nous allons créer une zone de texte. Et ici, pour celui-ci, allons faire glisser un texte ici, car il peut s'agir de plusieurs lignes. On va donc y entrer une fausse adresse aléatoire. Mais dans un format complet. Nous allons donc faire la City Postal. Ça devrait être bien. Je vais laisser aligner ça ici. Et définissons cela comme la légende illustrée. Rien de trop petit. Faisons donc Body One. Peut-être que le support Body One fonctionnerait encore. Et puis, pour le remplissage, faisons l'accident trois. On va aller de l'avant et juste centrer ça ici et l'étirer au cas où il y aurait une deuxième ligne. Je pense que c'est bon pour l'instant. Pourquoi ne pas revenir dans la prochaine conférence pour créer une carte à l'aide de plugins pour cette page. 62. Utiliser des plugins: Il a brièvement mentionné les plugins et comment ils peuvent nous aider dans nos conceptions et rendre notre processus de conception beaucoup plus rapide. Dans cette conférence, nous allons vraiment voir la puissance de cela et utiliser les plug-ins disponibles pour générer une carte pour notre page de localisation ici. Pour accéder aux plugins dans soit, allez la barre de menus ici et cliquez sur plugins et accédez à une fois que vous les avez installés, gérés ou parcourus. Bien sûr, cela peut se trouver sous un menu de hamburgers si vous êtes sous Windows. Sinon, vous pouvez également accéder à son panneau Plugins ici ou cliquer sur Maj Command P. Et nous allons aller de l'avant et ouvrir la même chose. Vous pouvez ensuite cliquer sur Discover plugins pour découvrir les plug-ins disponibles sur le marché. Des tonnes de développeurs ont mis à disposition tous ces plugins que vous pouvez utiliser pour générer des icônes pour vos conceptions et accéder à une tonne de plug-ins utiles pour différents cas d'utilisation. Que vous souhaitiez automatiser quelque chose ou que vous souhaitiez trouver des plugins à publier pour suspendre vos projets. Il existe des tonnes de plug-ins disponibles que vous pouvez parcourir. Allez-y et parcourez tous les plugins disponibles à partir d'ici, et parcourez vraiment ce que chacun peut faire. Par exemple, celui-ci ici. Vous pouvez l'utiliser pour générer des avatars pour une icône de profil, ou vous pouvez obtenir des plugins en cliquant sur. Venez ici une fois que vous l'avez ouvert, comme ça. Une fois que vous avez installé, il peut vous demander votre mot de passe. Alors allez-y et saisissez cela et cela ira l'avant et commencera à installer ce plugin. Vous pouvez accéder à ce plugin en étendant le profil utilisateur. Je suis ici sous les plugins en vedette. Et dans cette barre de recherche, nous voulons l'installer une fois que nous pourrons l'utiliser dans notre page de profil. Mais pour l'instant, allons chercher des cartes. Je pense que je veux essayer cette carte chic et voir pour pire pour nous, allons-y et installons ce plug-in de carte chic. Et si vous ne trouvez pas celle-ci, allez-y et recherchez des cartes fantaisistes et vous pouvez même rechercher le nom de l'auteur et cela devrait apparaître. On dirait qu'il y a aussi des notes décentes , ce qui est génial. Vous pouvez voir les évaluations des différents plugins laissés par les utilisateurs. Ceci est donc installé ici. Maintenant, nous pouvons revenir à notre XD. Nous entrons des trucs ici. Et maintenant, sous les plugins, vous pouvez le voir, les plug-ins que nous n'avons pas installés. Allons de l'avant et cliquons sur ce plugin de cartes fantaisie. Pour que ce plugin fonctionne, il suffit d'aller de l'avant et de créer un compte Mapbox, qui est gratuit. Ensuite, vous entrerez votre jeton d'accès ici. Ce plug-in nécessite cela pour générer une carte pour vous. Une fois que vous avez fait cela, il chargera cette page. Continuez et remplissez ce formulaire pour créer un compte. Une fois que vous avez fait cela sous votre compte, vous devriez être en mesure de trouver des jetons d'accès pour aller de l'avant et de copier ce jeton public par défaut dans lequel vous pouvez utiliser pour générer des cartes à l'aide de ce plugin. Donc, une fois que vous avez copié cela, allez-y et collez-le ici dans XD. Et une fois que vous avez terminé, vous pouvez parcourir différentes villes à partir d' ici que vous pouvez entrer. Vous pouvez créer une destination surprise, mais pour l'instant, il suffit de sélectionner New York. Ensuite, il va générer cette carte pour nous. Il nous indiquera quel niveau de zoom nous voulons. Nous voulons donc le type de niveau de zoom rapproché quelque part ici. Peut-être que nous pouvons même avoir un marqueur de générateur, mais nous l'avons déjà ici. Et nous pouvons choisir un type de carte satellite, différents types de cartes en fonction de ce que nous recherchons. Passons simplement à une valeur par défaut ici. Ensuite, il faudra créer un rectangle pour que la carte puisse entrer. Alors, allons de l'avant et créons un rectangle ici depuis le haut jusqu'ici. Il sort de là , puis cliquez sur Appliquer la carte. On y va. Nous avons donc généré la carte. Maintenant, je veux utiliser Command Shift et le crochet ouvert pour l' envoyer jusqu' à l'arrière des calques. Parfait. Nous avons juste besoin de quelques dernières touches et cette page devrait être prête à partir. Pourquoi ne pas revenir à la prochaine conférence pour peaufiner cette page et partir de là. 63. Finir notre page de localisation: Nous sommes prêts à compléter notre page de localisation. Il suffit donc d'ajouter quelques ombres ici pour séparer le premier plan de l'arrière-plan ici. Et nous devrions être bons pour commencer les choses en premier, je vais aller de l'avant et juste sortir des plugins là-bas et zoomer. Accédez à notre panneau Calques ici. On y va. Je vais commencer par ce stylo et double-cliquer dessus pour pouvoir sélectionner mes deux formes ici. Et tout en maintenant la touche Maj, j'ai sélectionné les deux lignes ici ou les formes. Je vais aller de l'avant et activer l'ombre portée. Pour l'ombre portée, faisons un flou de dix et un y de cinq. Et peut-être le faire, il est légèrement plus sombre. Je pense donc que quelque 20 % devrait fonctionner. Allons de l'avant et appliquons la même chose à l'arrière-plan de cette zone de texte ici. Effectuez une ombre portée avec y de cinq et un flou de 10, 20 % d'opacité. Ça a l'air bien. Maintenant, j'ai remarqué que ce rectangle a une bordure, donc je vais aller de l'avant et simplement enlever ça. Nous n'en avons pas vraiment besoin. Ensuite, appliquons la même ombre à cette icône de curseur ici. Je vais donc double-cliquer pour sélectionner l' ombre portée de ma forme avec cinq pour expliquer pourquoi, dix comme flou et 20% comme opacité. Je pense que ça a l'air bien. Il est légèrement séparé des objets ici sont légèrement séparés de l'arrière-plan, ce qui est exactement ce que nous voulons. Maintenant, cette page étant terminée, nous sommes prêts à passer à notre page d'historique des commandes, que si vous vous en souvenez, pendant les filaires, j'ai donné cette page comme un exercice que vous pouvez effectuer. Alors allez-y et travaillez sur cette page. Donc, pour vous donner une idée de ce dont vous avez besoin sur cette page, nous voulons essentiellement une liste des commandes passées par les utilisateurs . Ce que vous devez donc faire est de créer une nouvelle conception de carte d'interface utilisateur. Dans celui-ci, vous allez aller de l'avant et inclure certaines informations de commande. Vous pouvez inclure des éléments tels que le total, le restaurant dans lequel ils ont commandé et peut-être combien d'articles se trouvaient dans cet ordre. Et bien sûr, la date et heure auxquelles ils ont passé cette commande. Donc, si vous placez ces quatre jeux de données dans une interface utilisateur de carte comme ceux-ci ici, vous pouvez même dupliquer cette interface utilisateur de carte et en créer un composant, et l' utiliser dans votre page d'historique des commandes. L'idée est donc que les utilisateurs peuvent voir leurs commandes précédentes à partir ici avec ces quatre jeux de données importants dans l'interface utilisateur de cette carte. Encore une fois, les quatre jeux de données que vous souhaitez correspondent au nom du restaurant, commandé à partir du montant total en dollars de leur commande. Peut-être combien d'articles se trouvaient dans leur commande, et quelle date et quelle heure, le lieu de cette commande. Nous allons donc faire une pause ici et je vous laisserai le faire vous-même. Et ensuite, lors de la prochaine conférence, nous le ferons également ensemble. 64. Page de commandes: Il est temps de créer notre page d'historique des commandes. J'espère que vous avez eu l'occasion de préparer quelque chose pour cela aussi. Si ce n'est pas le cas, pas de souci, nous le ferons ensemble dans cette conférence. Et cela devrait à peu près terminer notre maquette pour ce projet de conception mobile. Ensuite, nous sommes prêts à progresser lentement exportation, l'applaudissement et le prototypage. Mais avant de le faire, nous allons travailler sur notre page d'historique des commandes. Et ce que je veux faire, c'est me débarrasser de ce petit titre ici et changer le gros titre en histoire, ou nous pouvons faire des commandes passées. Je pense que ça sonne mieux. Avec cela, je vais aller de l'avant et modifier cet historique des commandes pour passer également les commandes. Je pense que ça sonne mieux. Allons de l'avant et modifions ce bouton d'action pour revenir en arrière. Nous pouvons supprimer cette icône Plus ou nous pouvons les laisser créer une nouvelle commande en appuyant sur cette icône plus. Donc je pense que nous allons simplement laisser ça là au cas où ils le souhaitent, disons commencer une nouvelle commande à partir de cette page. Maintenant, je vais aller de l'avant et copier l' une des cartes du restaurant ici. Je vais l'utiliser pour créer un nouveau composant et entrer les quatre points de données dont nous avons parlé lors de la conférence précédente. Assurez-vous que nous sélectionnons tous les calques ici dans votre panneau Calques. Ensuite, nous allons en copier un ici et nous allons utiliser la commande K pour transformer cela en composants. Renommons cela pour commander un panier. Nous savons que c'est la carte pour les commandes. Au lieu de cette image, je veux aller de l'avant et créer un rectangle au-dessus de celle-ci. Et demandez-lui de prendre la même largeur et hauteur, puis de le donner en maintenant Alt, je vais lui donner le même rayon d'angle de, je crois qu'il était de 12 pixels. Nous allons donc nous assurer que ce point est de 12 pixels ainsi que celui-ci ici. Parfait. Retirons la bordure et donnons un remplissage de cette couleur grise. Vous pouvez entrer ce code hexadécimal en tant qu'espace réservé pour nos images. Avec cela, nous pouvons aller de l'avant et nous débarrasser de ce calque d'image ici. Nous avons maintenant un espace réservé pour l'image de notre restaurant. Ce n'est pas nécessairement dans la page de l'historique des commandes, vous pouvez totalement supprimer cela à partir de là. Mais je pense que c'est agréable pour eux de voir dans quel restaurant ils ont commandé la nourriture. C'est vraiment votre choix. laisserai là où il se trouve, le nom du restaurant. Nous allons simplement double-cliquer et supprimer le groupe de notation ici et modifier ce signe en dollars par les montants totaux. Donc, on va faire 1$. Au lieu de cet italien, j'ai voulu que je sache combien d' articles ils ont commandés. Par exemple, je vais écrire un article. Enfin, nous avons besoin de la date et de l' heure auxquelles ils ont passé cette commande. Alors pourquoi ne pas déplacer ces deux-là, s' assurer qu'ils sont alignés à gauche, puis continuons-nous s' assurer qu'ils sont alignés à gauche, et dupliquerions cela. Et nous allons aller de l'avant et nous assurer que l'espacement est le même, 14 pixels et que celui-ci sera bien aligné et nous allons écrire le mois, le jour, le mois et l'année. Ensuite, l'heure ici, juste comme espace réservé, afin que l'utilisateur puisse voir quand il a passé cette commande. Je pense que ça a l'air plutôt bien. Nous avons encore de l'espace si vous voulez ajouter quelqu'un d'autre ici, un autre point de données, mais je pense que c' est plutôt bon pour l'instant. Maintenant, pour l'image du restaurant, je pense que nous pouvons le rendre un peu plus petit, car ce n'est pas vraiment aussi important ici. Ensuite, nous pourrons aller de l'avant et déplacer ces objets. Je tiens juste Shift. On y va. Allons de l'avant et réduisons le rectangle entier ici aussi. Ça a l'air bien, plutôt propre. Nous pouvons maintenant l'utiliser dans notre page d'historique des commandes. Revenons à notre page d'historique des commandes. Cliquez sur l'historique des commandes. Et ensuite, allons dans nos bibliothèques d'ici et constatons qu'il semble que je n'ai pas correctement nommé ni composants. Allons donc nommer cette carte de commande. On y va. Maintenant, dans notre historique des commandes, je vais faire glisser ce panier de commande ici. Parfait. Ensuite, nous pouvons aller de l'avant et simplement utiliser la grille de répétition ici pour répéter cela plusieurs fois. Et je vais supprimer cet espacement entre 0 car je pense que l'espacement, nous l'avons déjà assez bien. Je pense que nous pouvons même ajouter un nouveau bouton ici, ici. Et pour celui-là, nous allons commencer un nouveau trimestre. On y va. S'ils veulent commencer une nouvelle commande, ils peuvent également le faire à partir d'ici. Maintenant, si vous utilisez cette grille de répétition pour créer de nouvelles cartes, ce bouton entrera en collision avec la vue. Je vais donc créer un petit arrière-plan dégradé ici pour effacer toutes les cartes. Et nous pouvons le faire en créant un rectangle à partir du bas de l'écran. Ce genre de bouton couvre le bouton jusqu'ici. Et nous allons enlever ce calque pour que le bouton soit au-dessus. Nous allons d' abord supprimer la bordure et changer le remplissage par, au lieu d'une couleur unie, être un dégradé linéaire. Maintenant, pour cette couleur ici, le nœud inférieur, nous allons la définir en blanc. Pour l'autre nœud, nous allons le régler. Nous allons le laisser au poids et nous allons ramener l'OPCD jusqu' à 0. Je vais aller de l'avant et essayer ça un peu plus haut. Je pense que c'est plutôt bien. Maintenant, comme vous pouvez le voir, derrière ce bouton, toute carte qui apparaît s' estompera , ce que nous voulons. Nous ne voulons pas que ce bouton entre en collision avec cette carte. Je pense donc que c' est plutôt bien. Et maintenant, pour nos données, revenons dans la prochaine conférence ou deux entrées, quelques exemples de données ici. Une chose que je vais faire, c'est que je vais revenir à la carte ici et remplacer par un nom générique de restaurant. Nous allons simplement faire le nom du restaurant parce qu'il s'agit d'un composant. Nous ne voulons pas vraiment un nom de restaurant spécifique là-dedans. Je pense donc que ça a l'air bien. Nous allons maintenant revenir dans la prochaine conférence pour entrer des exemples de données ici. 65. Ajouter des données d'échantillon avec Google Sheets: Il est temps de saisir certaines données dans notre page de commande précédente. Vous pouvez remplir chaque carte avec des exemples de données exécutées et ajouter des images aléatoires pour différents restaurants. Mais dans cette conférence, je veux vous montrer quelque chose de vraiment cool qu'ils peuvent faire avec les plugins fournis par ECC. Et nous allons utiliser un plugin spécifique appelé Google Sheets, qui vous permettra de saisir des données d' une feuille Google dans votre conception. Et vous verrez à quel point cela peut être intéressant et utile pour saisir des exemples de données dans vos projets. Ici, j'ai préparé une feuille avec cinq restaurants et des ensembles de données, y compris la journée, le prix total, et même l' image et le nom du restaurant ici. Nous allons utiliser cette feuille pour entrer des exemples de données dans notre conception. Et pour utiliser cette feuille, vous allez aller de l'avant et je vais copier ce lien ici, qui est également fourni dans le cadre des ressources de ce projet. Si vous passez sous des données échantillonnées, vous devriez être en mesure de trouver un historique des commandes, lien Google Sheets, un fichier dxdy. Si vous ouvrez cela, vous pouvez copier ce lien. Nous devrions ouvrir cette feuille de calcul pour vous. Et nous allons utiliser cela pour générer les données échantillonnées. Allons de l'avant et minimisons cela et revenons dans XD. Maintenant, pour que ce plugin fonctionne, avant d'aller de l'avant et de l'installer, nous aurions besoin d' apporter un petit changement, devrons réellement aller de l'avant et convertir notre composant en groupe au lieu de cela que ce plugin fonctionne réellement et utilise Repeat Grid. Tout d'abord, j'ai cinq données échantillonnées là-dedans. Et ici, nous n'en avons que trois avec un quatrième derrière cet écran ici. Donc, ce que je vais faire, c'est que je vais aller de l'avant et simplement remonter cette page un peu et l'étirer. Ensuite, allons de l'avant et les amener au calque rectangle avec le dégradé et le bouton jusqu' au bas de la page. Ensuite, nous allons utiliser la grille de répétition pour nous assurer que nous avons cinq éléments ici. 12345, parfait. Cela devrait être bon pour l'instant. Parfait. Donc, l'autre chose que nous voulons faire est d'aller notre composant pour cette carte de commande, qui se trouve juste ici. Et ce que nous allons faire, c'est que nous allons cliquer avec le bouton droit de la souris et dissocier le composant que nous allons aller avant et faire essentiellement l'inverse de créer les mêmes composants. Maintenant, ce n'est plus un composant. Et ce que nous allons faire, c'est que nous allons aller de l'avant et faire glisser ça ici au lieu de celui que nous avons ici. Allez-y et supprimons celui-ci ici. Et nous allons aller de l'avant et traîner celui-ci à la place. Mais d'abord, nous allons aller de l'avant et regrouper cela et y entrer ici. Il suffit d'aller de l'avant et de maintenir l'espacement 25 pixels du haut et de s'assurer que nous sommes également au centre. Parfait. Et maintenant, nous allons utiliser Repeat Grid et le faire encore une fois. Mais cette fois, je vais juste aller de l'avant et m' assurer que nous réduisons également votre espace à 0 ici. Parfait. Nous pouvons maintenant utiliser ce plug-in. Et pour l'installer, nous allons ouvrir des plugins. En bas, ici. Vous allez aller de l'avant et cliquer sur le signe plus. Et nous allons chercher Google Sheets. Appuyez sur Entrée. Et le premier ici, par imperméable, devrait être celui que nous allons utiliser pour aller avant et cliquer sur le bouton Obtenir pendant un an pour l'installer. Je l'ai déjà installé, donc je vais aller de l'avant et sauter cette étape. Une autre chose que je veux faire est d'aller de l'avant et de double-cliquer pour sélectionner ce rectangle et renommer ce calque notre restaurant d'images. S'il vous plaît, tenez-la juste pour qu' on sache à quoi cela sert. Maintenant, prêt à saisir ces exemples de données. Nous allons donc sélectionner l'ensemble du groupe Repeat Grid ici. Je ne sais pas où sont les plug-ins du panneau des plugins. Continuons et cliquons sur le panneau Google Sheets. Et ensuite, ici, il nous demandera une source de fichier afin que vous puissiez télécharger un fichier CSV ou vous connecter à Google Sheets ce que nous allons faire coller un lien URL parce que nous travaillons avec un fichier public là. Alors allez-y et copiez ce lien disponible dans les ressources pour les données échantillonnées de cette page semble avoir problème avec mes grilles de répétition. Je suis donc revenu en arrière et je l'ai relu cette partie. Si vous voyez quelque chose qui se trouve là-bas, prenez une seconde pour le réparer vous-même. Mais pour une raison quelconque, ma grille de répétition utilisait le même chariot que celui ici, ce qui n'est pas ce que nous voulons. Nous voulons cette carte pour les commandes passées. Assurez-vous donc de répéter les grilles correctement, puis cliquez dessus. Et sous les plug-ins de nouveau, vous vouliez coller le lien URL et cliquer sur Importer. Cela peut prendre une seconde car le plugin importe tous ces champs. Ce que nous voulons faire, c'est d' aller de l'avant et mapper chaque ensemble de données sur le champ approprié ou les angles droits appropriés. Le premier rectangle est donc 17. Nous n'avons vraiment besoin de rien là-dedans comme arrière-plan pour le nom du restaurant. Nous allons aller de l'avant et le mapper au nom du restaurant dans les Google Sheets pour 0$, nous voulons aller de l'avant et le faire correspondre au prix total. Il indique donc le prix total de l'article, qui est celui ici. Nous allons aller de l'avant et faire correspondre cela à nos objets. Et ce champ de date ici. Nous allons aller de l'avant et le cartographier à la date. Et enfin, pour l'espace réservé au restaurant d'images, qui est ici tel que nous l'avons renommé. Nous allons aller de l'avant et cliquer sur l'image du restaurant. Nous n'avons pas vraiment besoin de sélectionner du contenu randomisé, sinon il serait placé dans un ordre aléatoire. Nous allons garder le même ordre et cliquer simplement sur Appliquer et cliquer simplement sur Appliquer et assurer que vous avez sélectionné l' intégralité de votre grille de répétition pendant que vous effectuez cette opération. Le plugin fonctionnera donc correctement. Cela peut prendre un certain temps, mais wallah, il va entrer les données comme on s'y attendrait. Et je pense que c'est génial. Bien plus rapide que la saisie manuelle de données. Et comme vous pouvez le voir, les URL de l'image ont fini par fonctionner assez bien aussi. Je vais aller de l'avant et simplement sélectionner mes calques ici et les afficher à l'aide de la commande et des crochets fermés. Et il suffit de rendre cette page un peu plus petite. En termes de hauteur. Nous n'avons pas vraiment besoin que ce soit aussi long. Assurez-vous simplement que mon poutine a 35 pixels du bas et c'est le cas. Parfait. Nous avons donc maintenant notre page d'historique des commandes prête à être utilisée. Je vais juste aller de l'avant et réorganiser certains trucs en déplaçant un peu ces tableaux d'art ici. On y va. J'ai inclus ces étiquettes, cette feuille d'action ici juste pour garder nos créations organisées. Et c'est là que nous l'avons. C'est ainsi que vous saisissez des exemples de données à l'aide de Google Sheets. Et cela dit, nos créations sont presque prêtes à être utilisées. Nous allons revenir dans la prochaine conférence et jeter un coup d'œil à tout et faire une dernière retouche d' un petit détail que nous avons peut-être oublié. À partir de là, nous allons continuer à exporter ce projet et à le partager avec membres de notre équipe, nos collègues ou nos clients, etc. Revenons dans la prochaine conférence pour polir et terminer cette maquette. 66. Polissage de nos conceptions: À la fin de chaque projet, j'aime jeter un coup d'œil à l'ensemble du projet, organiser les choses s'ils ne sont pas à leur place ou polir chaque page un peu de là où je vois qu'il pourrait y avoir des améliorations. Et c'est seulement cette bonne pratique, mais vous permet également d'obtenir un regard sur les détails de vos créations. Nous allons passer par là et voir où nous pouvons apporter de petites améliorations. Cette conférence ensemble. En ce qui concerne l'organisation, je pense que nous avons fait du bon travail. Tout est en quelque sorte là où nous voulons qu'il soit, juste pour garder les choses organisées. Je vais aller de l'avant et amener ces ressources Apple du bon côté de mes composants. Juste pour les garder ensemble. Notre palette de couleurs, nos ensembles de types, tout a fière allure. Voici les composants qui sont tous organisés ici. Nous avons un logo supplémentaire ici, donc nous allons le supprimer. Maintenant. Nous allons nous frayer un chemin depuis l'écran de démarrage jusqu'à la droite. Et puis, en haut, nous allons aller la page de profil jusqu'à droite. Donc, en commençant par l'écran de démarrage, je pense que les choses ont fière allure ici. page de connexion a l'air bien. Assurez-vous simplement que l'espacement ou tout est correct et que les choses semblent plutôt bonnes. Je vais juste aller de l' avant et espacer un peu mon mot de passe oublié, peut-être 15 pixels du terrain et abaisser un peu ce bouton aussi. Et faites-le 30 pixels à partir du mot de passe oublié. Par ici. Nous allons simplement aller de l'avant et définir la politique de confidentialité sur semi-audacieuse, ainsi que nos conditions d'utilisation. On y va. Notre vérification téléphonique est plutôt bonne. Il suffit de baisser ça. Tout est correctement aligné. Nous pouvons aller de l'avant et simplement vérifier cela également. Vérifiez l'alignement de tout ici. Une chose que je voulais faire, c'est que je vais copier ce bouton Menu et le placer dans mes autres barres de navigation. À partir de là, vous pourrez également accéder au menu. Le discours me paraît bien. En ce qui concerne notre page de menu, la seule chose que je veux faire est espacer un peu plus les choses. Donc, nous allons aller de l'avant et espacer les choses aussi. 25 pixels. Par ici. Je vais aller de l'avant et simplement sélectionner la pile entière ici et changer cet espacement à 25 à partir d'ici. Même chose pour ma pile de déserts. Faites 25 au lieu de 15. La raison en est que nous voulons plus d'espace de respiration. Nous voulons plus d'espaces blancs. Nous ne voulons pas que les choses soient trop entassées ici. Allons de l'avant et étirons un peu plus cette page de menu pour qu'elle s'adapte parfaitement à tout. Allons de l'avant et modifions le nombre de commandes de cet article à un seul. Et la même chose ici. Nous avons oublié de le faire lors de la conférence précédente, alors nous allons simplement le faire ici et vérifier l' espacement de tout. Et la même chose ici. Je vais y aller de l'avant et faire baisser ça un peu. Il y a donc 25 pixels dans l'espacement. Cela me semble plutôt bien. Ou la page Progression de la commande est bonne aussi. Je vais peut-être les faire baisser un peu plus, peu plus espacées. Et tout le reste semble bien. Nous reviendrons et ajouterons une petite animation ici plus tard. Allons-y bien. Et au sommet ici, au lieu d'avoir la première et l'année dernière, nous allons simplement entrer un nom aléatoire. Donc, on va d'abord à gauche, l'aligner, à droite. John Doe. Pour accéder à l'icône de profil ici. Je vais utiliser ce plugin qu'il a installé plus tôt sur le profil utilisateur appelé. Si vous ne l'avez pas, Ticket pause ici pour installer ce plug-in, mais cela nous permet d' insérer une photo aléatoire ici et nous pouvons aller de l'avant et même isoler le genre. Maintenant, nous pouvons aller de l'avant et sélectionner l'ellipse ici et cliquer sur insérer une photo aléatoire. Si vous n'aimez pas la photo, vous pouvez aller de l'avant et continuer à appuyer jusqu'à ce que vous en ayez quatre. Vous aimez l'utiliser. Le plugin ici générera autant de photos que vous le souhaitez. Je vais le laisser juste comme ça. Et puis le bouton R ici a l'air bien. Tout le reste semble bien sur cette page est une page de paiement qui a fière allure. Ou la page d'adresse est également bonne. Et notre dernière page Commandes a l'air bien aussi. Sinon, ça a l'air bien ici. Et je pense que c'est plutôt bon pour notre projet ici. C'est plutôt poli et assez joli. Je ne pense pas qu'il y ait autre chose à ajouter à ce stade. Nous allons maintenant revenir dans la prochaine conférence pour parler du redimensionnement réactif, qui permet à votre conception répondre aux différentes tailles d' appareils. Nous allons le faire ensemble et ensuite la prochaine conférence. 67. Redimensionnement réactif: Pendant que nous nous préparons à passer à l' exportation de notre projet et de notre prototypage. Je veux également vous montrer une autre fonctionnalité intéressante d' Adobe XD. Cela est très utile lorsqu' il s'agit de travailler avec plusieurs tailles d'écran et tailles d'appareils, et surtout lorsque vous travaillez sur un projet Web. Mais ce que cela, ce que cette fonctionnalité a appelé le redimensionnement réactif, permet à vos conceptions de fonctionner sur plusieurs tailles d'écran plutôt que sur celle d'ici. instant, nous avons configuré la taille d'écran de cet iPhone pour nos œuvres d'art, et elles sont toutes les mêmes en termes de largeur. Suggérez en particulier à titre d'exemple, si nos appareils fonctionnent un peu plus gros, vous voyez maintenant que nos conceptions, un certain type de s'effondrer, ne remplissaient pas vraiment toute la section. Donc, si vous commencez à étirer la largeur de nos appareils en fonction de l'appareil que vous regardez. Ce design est activé. La conception peut ne pas commencer à fonctionner. C'est pourquoi Adobe a mis en place cette fonctionnalité appelée « responsive resize ». Et ce que j'ai vraiment aimé chez XD, c'est qu'il fait beaucoup de travail pour vous en utilisant le mode de redimensionnement réactif automatique. Donc essentiellement, avec un redimensionnement réactif, vous pouvez permettre à vos éléments à l'intérieur de l' écran de pouvoir, comme son nom l'indique, redimensionner fonction de la taille d'affichage. titre d'exemple, dans sa page de menu de profil, nous allons aller de l'avant et activer le redimensionnement réactif. Et ce qui va se passer, c'est que maintenant nos objets dans ce tableau d'art, nous allons redimensionner comme un rétrécissement ou agrandir la taille de mon écran. Et comme vous pouvez le constater, le mode automatique fait du bon travail. Certaines choses pourraient être améliorées, mais dans l'ensemble, c'est plutôt bien fait en ce qui être améliorées, mais dans l'ensemble, concerne la façon dont il gère la réponse du redimensionnement. Mais quand il s'agit de certains éléments tels que ce nom ici et le texte de ces boutons. Nous pouvons aller de l'avant et les réparer pour que cela fonctionne parfaitement. La façon de le faire est d'aller de l'avant et de cliquer sur un certain élément de ce tableau d'art. Et puis ici, comme nous pouvons le voir, pour chaque élément, nous ajoutons une option automatique en termes de redimensionnement réactif n'importe quelle option manuelle ou nous pouvons aller l'avant et tout à fait désactiver cela. Mais par défaut, toutes les tailles réactives sont activées et en mode automatique pour chaque objet à l'intérieur de votre tableau d'art. Mais si vous cliquez sur cette option manuelle, tout d'un coup, vous obtenez certaines options pour votre objet ici afin d'être redimensionné manuellement selon vos besoins. Et en utilisant ces options ici, nous pouvons aller de l'avant et réparer cet objet sur certains sites sous forme d'écran. Donc, essentiellement si nous faisons cette option ici, quand elle devient bleue, cela signifie que maintenant cet objet sera fixé à gauche. Et bien sûr, nous pouvons combiner plusieurs correctifs, tels que la gauche et la partie supérieure. Maintenant, ce qui va se passer, c'est que cette zone de texte quelle que soit la largeur et la hauteur de ce plan de travail, conservera toujours ce pixel du côté gauche à ce certain pixel. depuis le haut du design. ces options sont activées. Maintenant, si nous allons de l'avant et que nous développons ou concevons, vous verrez que cette zone de texte ne bougera pas car elle maintient cet espacement à partir de la gauche et du haut. De même, si vous réduisez le design, comme vous pouvez le constater, la zone de texte ne se déplacera plus. Nous allons continuer et maintenir où il se trouve en termes d' espacement par rapport au sommet. Mais si vous allez de l'avant et désactivez cela maintenant et faites simplement réparer à gauche. Maintenant, comme vous pouvez le voir, la zone de texte commencera se déplacer quel que soit leur espacement depuis le haut. Par exemple, pour ce bouton ici. Encore une fois, la plupart des choses que nous ferons manuellement par XD, vous n'avez donc pas besoin de faire beaucoup de réglages. Mais nous pouvons aller de l'avant et appliquer redimensionnements réactifs manuels à certains endroits. Et si vous voulez garder les éléments ensemble, comme ces boutons ici. Lorsque vous groupez quelque chose ensemble, il maintiendra cet espacement ou la proportion entre ces boutons. Donc, dans ce cas, si nous réduisons, par exemple, la taille du tableau d'art, le groupe sera intact et il ne gâchera pas l' espacement entre eux. Maintenant, que se passerait-il si nous sélectionnons cette image, par exemple, effectuons un redimensionnement manuel et que nous désactivons la largeur fixe et la hauteur fixe. Que se passera-t-il alors ? Eh bien, vous remarquerez maintenant que lorsque le tableau d'art se rétrécit ou s'agrandit, cette image va de l' avant et redimensionnera en fonction de la taille de l'appareil. Alors que si nous allons de l'avant et annulons cela et continuons réellement et fixons sa largeur et sa hauteur. Peu importe à quel point nous étirons cette planche d'art, la taille de cette image ne changera pas. C'est ce que la largeur fixe et une hauteur fixe deux. Encore une fois, nous pouvons aller de l'avant et activer le redimensionnement réactif et plusieurs tableaux artistiques et voir comment l'entraînement dans certains tableaux artistiques est presque impeccable et vous n' avez pas besoin d'apporter de modifications. . Alors que dans d'autres tableaux d'art, il se peut que vous deviez faire quelques ajustements, comme celui-ci ici pour l'adresse. Nous pouvons aller de l'avant et regrouper ces deux-là ensemble. Ensuite, ensemble de réponse manuelle, ensemble de redimensionnement manuel et fixez la largeur. Mais un problème sera que maintenant il est aligné sur le côté gauche parce qu'il sera toujours fixé le côté gauche car comme vous pouvez le voir, nous avons la gauche fixe. Nous allons donc l' éteindre pour qu'il soit centré sur l'écran, sur l'écran, c'est ce que nous voulons. Maintenant, c'est beaucoup mieux. En tant qu'exercice, vous pouvez totalement passer par le design. Allez-y et activez redimensionnement réactif sur n'importe quel plan de travail de votre choix. Et allez-y et jouez avec ça jusqu'à ce que ça paraisse juste. Ils obtiennent des pages incertaines dans certains designs dont vous devrez peut-être faire des ajustements et les modifier, alors que sur d'autres, cela fonctionnera comme prévu. Par exemple, nous pouvions voir sur un écran iPad quelque chose comme ça ressemblerait bien à la page Commandes précédente. C'est donc l'une des raisons pour lesquelles le redimensionnement réactif est si puissant. Alors allez-y et prenez ce temps pour faire une pause et explorer plus de plans de travail et essayez d'appliquer réactif, redimensionner jusqu'à ce que les choses soient bonnes. N'ayez pas peur de sauter et d'apporter certains ajustements à vos objets. Par exemple, dans cette page de menu, vous verrez que les choses commencent s'effondrer avec ces textes ici. Bien sûr, ce que vous voudriez faire est d'appliquer manuellement une gauche fixe à toutes ces zones de texte. Par conséquent, en tant qu'exercice, je vais laisser cette page sur cette page de menu pour que vous puissiez le faire. Et n'oubliez pas que vous pouvez appliquer le composant ennemi réactif de redimensionnement lui-même. Vous pouvez donc entrer ici et modifier le redimensionnement réactif de chaque élément de votre composant. Et cela s'appliquera comme tout le reste avec composants à toutes vos instances de ce composant. En tant qu'exercice, faites une pause ici, allez de l'avant et appliquez un redimensionnement réactif à la page de menu et aux paniers ici spécifiquement. Ensuite, nous le ferons ensemble lors de la prochaine conférence. 68. Exercice de redimensionnement réactif: Très bien, j'espère que vous avez pu appliquer ce redimensionnement réactif pour la page de menu. Et nous allons le faire ensemble cette conférence. Si vous allez de l'avant et activez ce redimensionnement réactif pour le tableau d'art, ce que j'ai déjà fait. Alors allez-y et développez cette conception et nous pouvons en quelque sorte voir quels éléments doivent être réparés. Et en particulier, ce sont ces textes ici. Nous voulons donc nous assurer que ces textes restent sur le côté gauche de cette carte et qu'ils ne se redimensionnent pas avec la taille de l'écran. Pour ce faire, nous devons passer à la composante principale de ces cartes. Nous pouvons aller de l'avant et modifier MainComponent, et cela nous amènera au composant lui-même expliqué par défaut, vos composants auront un redimensionnement réactif. Mais si vous le souhaitez, comme n'importe quel autre tableau d'art ou objets à l'intérieur de nos tableaux d'art, vous pouvez cliquer sur des objets à l'intérieur d'un composant et le modifier, redimensionner vous-même. Maintenant, ce que nous voulons faire, c'est que nous voulons aller de l'avant et fixer cet élément en haut et à gauche afin qu' au fur et à mesure que le composant s'étire, il continue et conserve ses pixels, autant de pixels, 145 pixels depuis le côté gauche de la vue de votre carte. Nous voulons faire la même chose avec cette description ici. Comme vous pouvez le constater par défaut, il s'agissait d'un taux fixe, ce qui n'est pas juste. Ensuite, nous allons choisir ces deux-là en maintenant le quart de travail possible. Allez-y et définissez le même pour les deux, qui est fixe à gauche et fixe en bas. Pour cela ici, il est déjà correctement réglé à fois sur le haut et bas fixe ainsi qu'à taux fixe ce que nous sommes ici, nous pourrions faire deux autres choses pour ces éléments ici, nous pouvons y aller et retirez la largeur fixe. Maintenant, dans notre page de menu, nous pouvons aller de l'avant et agrandir ou réduire. Ce design va fonctionner, presque s'endormir, mais je vais aller de l' avant et remettre la largeur à ma largeur d'origine ici, 390 et la laisser comme ça. C'est notre exercice de redimensionnement réactif. Et cela complète à peu près la partie design de notre application mobile. Nous reviendrons donc dans une conférence suivante pour apprendre comment exporter nos conceptions et les partager avec les membres de l'équipe dans XD. 69. Sélectionnez Exporter: Nous avons donc fait un excellent travail la conception de notre maquette mobile ici. Les choses ont vraiment l'air bien et je suis plutôt contente de ce qui s'est passé. C'est la partie où nous avons demandé, d'accord, alors quelle est la suite ? Que pouvons-nous faire à partir d'ici ? Quelles sont les options en termes d' exportation de nos actifs hors d'ici, de nos tableaux d'art, ou de les partager avec d'autres personnes et de créer des prototypes à partir de ceux-ci. C'est ce que nous allons explorer ensemble dans les conférences suivantes. commençant par l'exportation d' articles et de tableaux d'art de notre XD. Xd vous offre des options pour exporter des éléments individuels ou des éléments à partir de vos conceptions, ainsi que pour exporter un lot d' articles tout en vous permettant d'exporter des tableaux d'art entiers. Nous allons donc passer en revue ces trois un par un. Le premier est une option Export sélectionnée, qui vous permet d'exporter un seul objet ou peut-être un groupe hors de vos conceptions. Ainsi, à titre d'exemple, si je zoome avant et que je veux exporter un certain objet ici, c'est s' il s' agit du logo ou disons cette image ici pour que les développeurs puissent l'utiliser dans leur développement. travail. Nous pouvons l'exporter individuellement. Par exemple, allons maintenant exporter l' une de ces cartes de menu XD dans nos fichiers plus tôt. Pour ce faire, vous pouvez choisir ce que vous souhaitez exporter. Et je me souviens de quoi que vous exportiez, cette chose exacte sera exportée. Donc, si je sélectionne l' ensemble du groupe ici, tous ces éléments seront exportés dans un seul fichier. Mais si vous souhaitez exporter une chose spécifique, qu'il s'agisse d'un texte ici ou affichage complet de la carte d'article ici, c'est ce que nous voulons. Alors allez-y et assurez-vous que vous avez sélectionné ce que vous voulez, car seule cette couche sera exploitée. Pour exporter cela hors d'ici, nous pouvons aller de l'avant et aller dans Fichier, Exporter et faire sélectionné, ou en tant que raccourci, vous pouvez appuyer sur Commande E ou Contrôle E sous Windows. Et XD va maintenant demander où le fichier doit être exporté. Et si vous voyez quelque chose comme celui-ci et un Mac, vous pouvez cliquer sur cette petite flèche pouvoir choisir exactement où vous voulez l'enregistrer et vous pouvez également le renommer si vous le souhaitez. Une fois que vous êtes prêt, vous pouvez continuer et cliquer sur Exporter par. Prenez une seconde ici en fonction de ce que vous exportez. Mais une fois que vous l'avez exporté, si vous ouvrez cet emplacement ou le dossier où se trouve votre article, vous pouvez voir le mari de la vue carte exporté comme vous le verriez. Maintenant, une chose que je tiens à noter est que XD va aller de l'avant et exporter exactement à cette résolution parce que cet accord était à l'origine de la taille. Si je vais de l'avant et que j' étire l'image, elle perdra la qualité. Par conséquent, une chose que vous pouvez faire est que lorsque vous exportez, vous pouvez modifier la taille de votre exportation afin qu'elle ait une résolution plus élevée. Si je fais un a3x maintenant et allez-y et économisez la même chose. Mais je vais le faire à A3x dans le nom. Ce qui va se passer, c'est que XD va de l'avant et exportera le même article, mais maintenant à trois fois la résolution de ce que vous voyez ici. Maintenant, si vous regardez la vue de la carte article d'origine et la vue de la carte article au format A3x, résolution est beaucoup plus élevée. En règle générale, vous souhaitez partager quelque chose de haute résolution avec les développeurs afin qu'ils n'aient pas à le regarder à cette taille. Bien sûr, gardez à l'esprit que la taille de votre fichier sera également plus grande si vous définissez une résolution plus élevée. Il existe également d'autres options disponibles pour exporter pour le Web, iOS et Android. C'est ainsi que vous exportez des articles uniques hors d'ici, vous pouvez faire la même chose. Supposons donc que vous exportiez un seul objet élément ou groupe depuis XD. Maintenant, rappelez-vous que vous pouvez refaire ça avec n'importe quoi. Donc, si je sélectionne juste comme exemple, tout ce groupe de texte ici et je l'exporte simplement. Vous verrez que XD va simplement exporter ces calques de texte avec la même police, la même couleur qu'un PNG ici, et il n'y a pas d' arrière-plan ici car mes textes ici n'ont pas vraiment d'arrière-plan informatique. C'est ainsi que vous exportez des éléments uniques depuis XD. Nous allons revenir dans la conférence suivante et apprendre comment exporter plusieurs objets en même temps à l'aide de l'exportation par lots. 70. Exportation par lots: Maintenant que nous savons comment exporter des articles uniques depuis XD, que se passe-t-il si vous souhaitez sélectionner plusieurs articles à exporter depuis XD ? Maintenant, bien sûr, vous pouvez choisir un certain élément, disons ce bouton ici, puis maintenez la touche Maj enfoncée et sélectionnez un autre élément. Et ensuite, allez de l'avant et exportez-les ensemble. Cela fonctionnera aussi comme prévu. Mais l'autre option ici, qui rend la tâche beaucoup plus facile, surtout si vous effectuez ce processus encore et encore s'appelle l'exportation par lots. L'exportation par lots vous permet d'exporter plusieurs éléments ensemble en marquant certains objets à exporter. Alors que nous parcourons nos conceptions, supposons que nous choisissons d'exporter un certain objet, cette image qui dit que vous pouvez aller de l'avant et cliquer sur ce peu marqué pour l'exporter dans le panneau Propriétés. objet. Encore une fois, même chose qu'une seule exportation. Assurez-vous que le bon article est sélectionné. Nous pouvons aller de l'avant et marquer cela pour l'exportation, puis passer à autre chose et sélectionner autre chose comme indiqué pour l'exportation. Et au fur et à mesure que nous grandissons à travers nos conceptions, nous pouvons sélectionner plusieurs éléments. Supposons que nous voulions exporter ce bouton de menu ici. Nous pouvons aller de l'avant et sélectionner à nouveau cette icône de menu de hamburger pour nous assurer que vous avez sélectionné cette chose, puis faire une marque pour exportation, etc. Maintenant, une fois que plusieurs objets sont sélectionnés, vous pouvez simplement aller de l'avant et appuyer sur Maj Commande E, ou vous pouvez aller de l'avant et sélectionner Fichier, Exporter et exporter par lots. Exportation par lots. Vous obtenez les mêmes options. Nous allons vous demander de choisir PNG comme format, ou vous pouvez aller de l' avant et les modifier en SVG, PDF ou JPEG. Maintenant, j'aime généralement utiliser SVG pour que notre icône ici puisse être redimensionnée sans gâcher sa qualité. Et je vais créer un autre dossier ici appelé articles d'exportation par lots, afin que je sache exactement où je l'enregistre , puis cliquez sur Exporter. Et comme prévu, ces articles ont maintenant été exportés en SVG. Et c'est pourquoi ils ressemblent à ceci dans l'aperçu sur Mac. Mais comme prévu, il est important de revenir dans XD et un fonctionne parfaitement. La qualité ne sera pas massacrée en fonction de la taille ou du redimensionnement ici. C'est ainsi que vous pouvez exporter plusieurs objets en même temps à l'aide de XD. N'oubliez pas que parce que nous avons sélectionné ces éléments comme marque pour l'exportation, ils n'ont pas vraiment été sélectionnés. Alors que nous continuons à ajouter des articles à notre exportation par lots, ces articles seront exportés encore et encore. Cela peut donc être utile pour quelque chose que vous souhaitez modifier une exportation de différentes versions de celui-ci et l'envoyer aux membres de votre équipe ou à vos collègues pour obtenir des commentaires. Mais si vous souhaitez annuler cela, vous pouvez simplement ignorer les éléments à exporter. Et maintenant, seuls les objets sélectionnés pour l'exportation seront exportés hors de votre XD. C'est ainsi que vous utilisez l'exportation par lots dans XD. Maintenant, que se passe-t-il si vous souhaitez exporter l'intégralité du plan de travail ici ? Eh bien, nous allons revenir au cours de la prochaine conférence et explorer cela ensemble. 71. Exporter nos tableaux: Nous savons maintenant comment exporter des articles individuels depuis XD, comment exporter plusieurs articles à l'aide de l'exportation par lots. Mais que se passe-t-il si vous voulez vraiment aller de l'avant et partager intégralité de nos créations de tableaux d'art pour quelqu'un d'autre ? L'exportation de plans de travail est aussi simple que l'exportation d'objets. Il suffit de sélectionner le plan de travail qu'il souhaite exporter. Et bien sûr, vous pouvez continuer en maintenant la touche Maj enfoncée et sélectionner plusieurs tableaux d'art. Et allez-y et cliquez sur Commande E pour l' enregistrer au format PNG, ce qui va créer un dossier appelé plans de travail. Ici, vous pouvez aller de l'avant et cliquer sur Exporter. Et maintenant, XD va exporter vos tableaux artistiques dans ce dossier. J'ai choisi la résolution a3x, et c'est pourquoi elle est si haute qualité. C'est ainsi que vous exportez plusieurs ou si vous voulez des tableaux d'art individuels et vous pouvez aller de l'avant et simplement le faire sur ce que notre tableau. Maintenant, que se passe-t-il si vous souhaitez exporter tous les tableaux artistiques de nos créations ? Eh bien, XD vous facilite la tâche car vous pouvez simplement vous rendre à Export de fichiers et faire tous les tableaux d'art ici. En exportant tous les tableaux d'art. Parce que nous avons déjà ces trois tableaux artistiques. Xd va nous demander : Voulez-vous les remplacer ? Êtes-vous sûr qu'il va les écraser ? Mais nous allons continuer et cliquer sur Remplacer. Donc maintenant, XD est allé de l'avant et a exporté tous les tableaux d'art ici dans ce dossier que nous avons sélectionné, ce qui est parfait, a fière allure. Et ces plans de travail ne peuvent être partagés avec personne. Vous pouvez les envoyer à vos développeurs, à vos collègues designers ou clients ou à toute personne laquelle vous travaillez sur ce projet. Mais bien sûr, il existe un moyen beaucoup plus facile de partager des plans de travail. Vous n'avez pas besoin de continuer à leur envoyer des fichiers PNG mis à jour encore et encore, car ce processus peut devenir vraiment fastidieux. Et vous allez vous retrouver avec de nombreux noms de versions tels que VU sur V1, T1, T2. Mais le logiciel de conception nous permet de partager facilement des projets avec des clients ou d'autres membres de l'équipe sans avoir à exporter des choses depuis XD. Donc, essentiellement si vous souhaitez exporter vos tableaux artistiques, surtout si vous savez qu'il s'agit la version finale de vos tableaux artistiques, vous pouvez le faire comme ça dans XD. Mais si vous voulez réellement partager vos tableaux artistiques au sein de XD, nous allons le faire ensemble lors de la prochaine conférence. Et je pense que c'est l'une des fonctionnalités vraiment intéressantes que XD offre que nous ne voyons pas vraiment et beaucoup d'autres logiciels de conception. Mais je pense que XD fait bon travail pour vous permettre de partager des tableaux d'art ou partager des ressources avec d'autres concepteurs développeurs ou clients. Nous allons donc le faire ensemble lors de la prochaine conférence. 72. Partager des tableaux de travail: Nous savons maintenant comment exporter plusieurs éléments, y compris tableaux artistiques, de nos conceptions et les envoyer à des membres de l'équipe ou à des clients. Mais existe-t-il un moyen plus facile de partager nos tableaux d'art avec d'autres personnes et peut-être d'obtenir leurs commentaires ou de demander comment nous pouvons améliorer nos projets à partir d'eux ? Que ce soit leurs clients ou les membres de l'équipe. Xd nous donne cette capacité en utilisant l'onglet Partager ici. Donc, si vous vous demandez depuis tout ce temps ce que fait ce t-shirt, nous allons l'explorer ensemble dans cette conférence. En vous dirigeant vers l'onglet Partager ici. Xd nous permettra de partager nos tableaux artistiques avec d'autres personnes au sein de XD lui-même. Ce que je veux dire par là, c'est qu'il va créer un lien pour vous où vous pourrez partager ce lien avec d'autres personnes. Vous pouvez obtenir leurs commentaires à leur sujet. Vous pouvez leur demander de laisser des commentaires en fonction du paramètre de vue dont vous disposez. Et nous allons explorer ces paramètres de vues en une seconde. Avant de le faire, explorons ce que nous avons ici dans notre onglet de cisaillement. Dans le panneau des propriétés, XD va choisir un flux ou un nom flottant. À partir de là, vous pouvez aller de l'avant et renommer cela où bon vous semble. Disons donc que nous faisons des maquettes de morsures saines. Et maintenant, ce lien s'appellera des maquettes de morsures saines. Et nous pouvons continuer à gérer nos liens en cliquant sur ce lien géré ici. À partir de là, XD nous emmènera le site Web Creative Cloud où sur le site Web Creative Cloud où nous pourrons supprimer flux que nous ne voulons plus et afficher tous les fichiers ou les liens publiés que nous possédons. C'est ainsi que vous pouvez gérer vos liens à partir de là. Mais ce qui nous intéresse vraiment, c'est d' explorer ce que cette fonctionnalité fait réellement. C'est donc le nom du lien. Nous pouvons aller de l'avant et définir le réglage de la vue. Si vous vouliez simplement obtenir des commentaires sur nos conceptions, nous pouvons aller de l'avant et utiliser l'option par défaut, la révision de la conception. Si vous souhaitez partager cette conception ou notre prototype avec le développeur, nous pouvons choisir cette option, que nous allons explorer dans la conférence suivante. Si vous souhaitez simplement présenter notre projet et le garder aussi simple que possible. C'est le mieux pour la présentation. Les tests utilisateur sont parfaits lorsque vous testez votre prototype, sur lequel nous travaillerons également lors de futures conférences. Nous pouvons également définir une expérience de visionnage personnalisée dans laquelle vous pouvez aller de l'avant et choisir exactement ce que vous voulez. Que vous souhaitiez autoriser les commentaires ou que vous souhaitiez que le fichier s' ouvre en plein écran, incluez les spécifications de conception, etc. Pour plus de simplicité, allons de l'avant et choisissons une revue de conception et explorons ce que cela fait. Vous pouvez choisir qui a accès à ce lien. Vous pouvez donc soit inviter des personnes spécifiques à ce projet, écrire une adresse e-mail et inviter cette personne à consulter ce fichier si je veux simplement le partager avec une personne spécifique. Donc, dans ce cas, je peux aller de l'avant et définir l'accès au lien uniquement aux personnes invitées. Mais si nous voulons que quelqu'un avec ce lien puisse voir mes tableaux d'art et je peux choisir n'importe qui avec un lien. Chaque fois que vous apportez des modifications ici, vous pouvez continuer et cliquer sur Mettre à jour le lien, et XD générera un lien que vous pourrez partager avec vos collègues. Une fois que c'est fait, vous pouvez simplement cliquer sur ce lien Copier où nous allons copier ce lien dans votre presse-papiers. Et maintenant, si je vais de l'avant et ouvrez une fenêtre de navigateur et saisissez cette URL là-dedans. Nous mettrons nos créations sur leur site Web ici, où, encore une fois, seules les personnes disposant de ce lien peuvent y accéder. Si vous avez sélectionné cette personne disposant d'une option de lien. Et maintenant, ils peuvent parcourir vos créations toutes les pages et laisser des commentaires ici s'ils le souhaitent. Bien sûr, s'ils le souhaitent, ils peuvent continuer en tant qu' invité ou se connecter avec un compte Adobe. Vous pouvez aller de l'avant et simplement continuer en tant qu' invités et laisser des commentaires sur ces conceptions. Et allez-y et parcourez vraiment tous ces tableaux d'art. La beauté de cela est que si vous apportez des modifications de conception et revenez à votre partage, vous pouvez mettre à jour ce lien en effectuant une simple actualisation. Maintenant que cette mise à jour a également été appliquée à nos ressources partagées, je vais aller de l'avant et simplement annuler cela et je laisserai le lien ici. Mais maintenant, vous pouvez vraiment voir le pouvoir de partager des tableaux d'art plutôt que de les exporter et de les envoyer à d'autres personnes pour obtenir des commentaires. Maintenant, si je suis connecté, je peux aller l'avant et voir tous mes commentaires concernant mon projet et y laisser des réponses. C'est plutôt cool. Pendant que vous êtes ici, vous pouvez également parcourir toutes les ressources partagées avec vous. Nous sommes ce lien. Vous pouvez accéder à une page spécifique si vous le souhaitez. Et ce qui est cool, c'est qu'il peut même partager des prototypes. Ainsi, une fois que nous commençons le prototypage, ces pages vont de l'avant et deviendront même interactives afin qu'elles puissent réellement l' utiliser comme une application. Mais nous allons explorer cela dans les prochaines conférences. Pour l'instant. Nous voulons simplement apprendre comment partager nos tableaux d'art avec d'autres personnes. Et si je veux simplement partager des plans de travail spécifiques et non tous mes tableaux d'art. Vous pouvez également le faire en vous dirigeant simplement vers l'onglet Création, en sélectionnant les tableaux d'art que vous souhaitez partager. Disons donc que je veux simplement partager la mon restaurant et la page du menu et rien d'autre. Ensuite, vous pouvez continuer en maintenant la touche Maj enfoncée, sélectionner ces tableaux, puis continuer et cliquer sur cette petite icône Partager ici. Et XD encore une fois, nous allons aller l'avant et vous emmener à cette chemise. Mais maintenant, en vous laissant seulement ces deux tableaux d'art, rien d'autre n'est sélectionné, ce qui signifie que rien d'autre ne sera partagé via ce lien. Maintenant, le seul problème ici est que , comme j'ai déjà créé un lien, je ne peux pas créer un autre lien. Parce que XD, avec un compte de base ne vous permettra de partager qu' un seul lien à la fois. Si vous souhaitez davantage de partage de liens, vous devez passer au niveau suivant. Vous devez mettre à niveau votre compte. Mais nous allons aller de l'avant et simplement nous en débarrasser. Je vais aller de l'avant et simplement supprimer définitivement ce lien ici pour pouvoir créer de nouveaux liens. Maintenant, je peux revenir en arrière, sélectionner à nouveau ces deux pages. XD va maintenant me permettre de créer un lien pour ces pages et de le renommer comme nous le souhaiterions. Si vous avez créé un lien maintenant et ensuite, copiez ce lien et partagez-le avec d'autres personnes. Allez-y et entrez à nouveau cette URL, entrez cette URL dans. Maintenant, comme vous pouvez le constater, nous n'avons que deux pages ici, les deux que nous exportons. C'est ainsi que vous pouvez partager des tableaux d'art spécifiques. Au lieu de tous vos tableaux artistiques avec d'autres personnes. Nous allons juste aller de l'avant et supprimer ça aussi. Nous n'en avons pas vraiment besoin. Allez-y et annulez cela aussi. C'est ainsi que vous pouvez partager vos tableaux artistiques à l'aide de XD. Il y a encore une chose que je veux vous montrer concernant le partage de tableaux d'art, et c'est le transfert des développeurs dont nous avons parlé. Alors pourquoi ne pas revenir à la prochaine conférence pour explorer cela également. 73. Transfert des développeurs: Que transmet le développeur et comment pouvons-nous faciliter la vie d' un développeur en tant que concepteur lorsque nous partageons des ressources avec eux ? Eh bien, nous allons explorer cela ensemble dans cette conférence parce que je pense que c'est une fonctionnalité super cool que XD possède. C'est vraiment génial avec ses autres capacités de partage. Donc, pour passer par là, nous allons aller de l'avant et revenir à notre onglet Partager. Ensuite, au lieu de la révision de la conception dans le paramètre de vue, nous allons aller de l'avant et sélectionner le développement. Une fois cela fait, XD va vous demander il s'agit d'un projet Web, d'un projet iOS ou d'un projet Android ? Ainsi, il vous donnera le développeur ou les bons actifs ou le bon code pour certaines plateformes, et cliquez sur les ressources téléchargeables. Donc, s'il y a des ressources que vous pouvez télécharger, ils peuvent le faire à partir de là. Tous ceux qui ont le lien. Nous allons laisser ça tel quel et créer le lien ici une seconde. Et une fois ces liens générés, nous allons le copier. On y va. Maintenant, dans mon navigateur, je vais y entrer. Et maintenant, nous allons voir quelles sont les différences entre le simple partage de la critique de conception et celui d'un développeur. Maintenant, XD va vous montrer que vous avez ce mode de spécifications ici, nous pouvons aller l'avant et basculer et voir les choses utiles en tant que développeur lorsque vous travaillez avec un design. Je peux bien sûr aller de l'avant et laisser un commentaire comme d'habitude. Et je peux aller de l'avant et même placer une épingle sur une partie spécifique du design où je peux laisser des commentaires sur cette partie spécifique. Bien sûr, nous avons cette option comme nous l'avons fait auparavant. Mais maintenant, nous avons ce petit onglet ici et nous pouvons aller de l'avant et consulter les spécifications de cette page. Nous allons donc nous montrer les détails de l'écran tels que la taille, les couleurs disponibles sur cette page. Et nous pouvons aller de l'avant et cliquer dessus pour copier cette couleur dans notre presse-papiers. Nous pouvons voir quelles tailles de police sont utilisées et quelles polices sont utilisées. Nous pouvons aller de l'avant et même changer ces valeurs d'hexadécimal à RGBA et ainsi de suite. Et encore plus frais, nous pouvons aller de l'avant et sélectionner des articles individuels dans notre conception et voir même le composant et à quoi il ressemble dans différents états. Nous pouvons aller de l'avant et voir plus d'informations concernant ce texte mais ou ce texte. Pour cette image, nous pouvons vraiment aller de l'avant et sélectionner n'importe quoi et elle nous donnera cette propriété. Nous pouvons aller de l'avant et bien sûr aller différentes pages et voir différentes propriétés basées sur cet écran et quelqu'un d'autre, c'est cool. Si je retourne à mon XD, supposons que nous le concevons pour un projet Web. Je vais donc changer ça en Web et mettre à jour le lien. Quelque chose de cool. Que s'est-il passé ? Parce que XD a des capacités CSS et que pour aller de l'avant et rafraîchir cela maintenant, il va aller de l'avant et me donner un code CSS ici. Si je travaille sur un projet Web plutôt qu'un projet iOS, je peux copier le code CSS et l'utiliser dans mes projets de développement Web en tant que développeur. Cela apparaîtra sur toutes les pages. Et vous obtenez même ce nouvel onglet ici lorsque vous travaillez avec un projet Web appelé variables, auquel nous allons vous permettre d'accéder aux variables que nous avons créées dans nos bibliothèques, telles que les couleurs d'accentuation , les couleurs primaires, etc. Les tailles de police. Je peux aller de l'avant et le télécharger ici. En tant que projet CSS. C'est vraiment la différence entre la conception et la revue de développement. En mode développement, nous avons accès à beaucoup plus de choses. Nous pouvons même aller de l'avant et accéder à nos ressources et télécharger, par exemple, des images, qui est génial car de cette façon, vous n'avez pas vraiment à envoyer des images et des éléments entre vos développeurs. C'est vraiment ce qui rend les fonctionnalités de partage XDS si utiles. Cela dit, nous allons revenir lors des prochaines conférences et apprendre comment nous pouvons réellement travailler sur projets XD avec un membre de l'équipe ou avec plusieurs membres de l'équipe qui travaillent dessus avec nous. Faites donc une pause rapide ici et apprenez ensemble lors de la prochaine conférence. 74. Inviter des rédacteurs: Donc, si nous travaillons sur un projet de conception avec d'autres personnes, voyons des collègues ou des membres de l'équipe sur ce projet. Comment pouvons-nous partager notre projet et collaborer avec lui en même temps ? Eh bien, il existe en fait une fonctionnalité d'invitation où vous pouvez continuer et partager votre projet, votre fichier XD avec d'autres concepteurs. Ils peuvent en fait aller de l'avant et se joindre à vous et coéditer ce projet avec vous. Puisque vos fichiers sont enregistrés sur le Cloud, vous pouvez simplement inviter des personnes à accéder à vos documents afin qu'ils puissent également vous aider à les modifier. Erreur pour cela, vous pouvez simplement aller de l'avant et cliquer sur ce petit bouton Partager ici ou sur le bouton Inviter ici. Xd va de l'avant et vous permettra de saisir une adresse e-mail ici. Nous pouvons aller de l'avant et inviter vos collègues ou membres de votre équipe à ce projet. Vous pouvez ensuite écrire un petit message si vous le souhaitez, ou vous pouvez simplement aller de l'avant et les inviter à le modifier. Une fois cela fait, la mutation sera envoyée à cet utilisateur. Et ils recevront un e-mail à ce sujet où ils vont ouvrir ce projet et avoir la possibilité de co-éditer ce projet avec vous. Si, à un moment donné, vous souhaitez supprimer cette personne de votre document, vous pouvez aller de l'avant et simplement cliquer sur Supprimer ici. Et il sera supprimé du projet. C'est ainsi que vous pouvez inviter les membres de l'équipe à travailler avec vous et à coéditer des projets avec vous dans XD. 75. Historique des documents: Lorsque vous travaillez sur votre projet et que vous apportez des modifications à vos conceptions. Xd va suivre les différentes versions de vos conceptions. Imaginons donc si vous souhaitez comparer deux versions différentes que vous possédez ou revenez à une certaine étape de votre conception. Vous pouvez le faire à l'aide de la fonctionnalité Historique des documents dont elle dispose. Si vous montez ici dans la barre où il affiche votre nom de fichier et que vous survolez cette flèche, vous verrez que vous avez accès à l'historique des documents, où vous pouvez accéder enregistrement automatique et au signet versions de votre document. Donc, l'équilibre qui va aller de l'avant et vous montrera les différentes versions à différents moments de votre projet. Étant donné que votre projet est enregistré automatiquement, XD va de l'avant et enregistrera automatiquement votre projet et vous donnera certains projets auxquels vous pouvez revenir. Vous pouvez même aller jusqu' aux dix derniers jours. Et si vous souhaitez conserver certaines versions, vous pouvez aller de l'avant et les marquer, les ajouter à vos signets et y accéder à tout moment. Par exemple, si je revenais simplement à l'une de mes versions ici, pouvoir continuer et cliquer sur ces trois petits points pour ouvrir cette version dans une nouvelle fenêtre, je peux nommer cette version que je veux. Je peux aller de l'avant et le marquer à l'aide de ce bouton ici. Allez-y et ouvrez-le dans une nouvelle fenêtre. Xd va aller de l'avant et ouvrir ça. À ce moment-là, qui se trouve désormais également dans le nom du fichier. Vous pouvez voir que c'est le moment où nous avons travaillé sur notre page d'historique des commandes. Nous sommes donc remontés dans le temps avec ce projet en ce moment. C'est vraiment le cas d'utilisation de cette fonctionnalité d'historique des documents. Vous pouvez remonter encore plus loin. Si vous ne voulez pas aller de l'avant et renommer cette version, vous pouvez citer cette version en travaillant sur l'historique des commandes à titre d'exemple. Ils peuvent même aller de l'avant et mettre la date ici si vous le souhaitez. Allez-y et cliquez sur le bouton OK ici, et il enregistrera cette version pour vous. Ou si vous souhaitez simplement enregistrer n'importe quelle version sans les renommer, vous pouvez le faire en cliquant sur le signet ici. Vous pouvez également accéder à vos versions marquées à partir ici afin d'y accéder plus facilement. C'est l'un des avantages de l'enregistrement de votre fichier dans le Cloud, plutôt que de l'enregistrer quelque part localement sur votre machine. Xd vous donnera accès à cet historique de documents, qui s'est avéré très utile, surtout si, supposons que vous commettiez de grosses erreurs sur votre conception que vous souhaitez revenir à une certaine version du passé, ou vous souhaitez enregistrer différentes versions pour différentes parties du processus de conception. Imaginons que vous puissiez utiliser un historique de documents dans XD. 76. Partager les bibliothèques: Au fur et à mesure que nous avons suivi le cours et que nous avons commencé à rassembler les choses dans nos bibliothèques ici. Nous sommes en mesure de voir à quel point ce panneau Bibliothèques B. Et nous pouvons vraiment aller de l'avant et profiter de ces bibliothèques et l'utiliser dans plusieurs projets. Une chose que vous pouvez faire est que vous pouvez continuer à partager vos bibliothèques ou à publier vos bibliothèques dans un actif de document Cloud. Nous pouvons les utiliser dans plusieurs projets ou avec plusieurs personnes. Si vous mettez en place un système de conception que vous souhaitez partager à travers la mer, plusieurs projets pour votre entreprise ou pour vos clients. Vous pouvez continuer à publier cette bibliothèque en cliquant ici et en cliquant sur cette petite icône ici. Ensuite, nous allons aller de l'avant et en fait, nous allons ouvrir vos bibliothèques d' où vous pourrez publier votre bibliothèque. Maintenant, une chose est qu'il s'agit d'une fonctionnalité que vous devez mettre à niveau pour pouvoir l'utiliser. Xd vous demandera de mettre à niveau si vous souhaitez avoir accès aux bibliothèques de publication et les utiliser entre les projets et avec Teams. Parallèlement à quelques autres fonctionnalités telles que le fait d' avoir un nombre illimité d' éditeurs partagés de documents, de broyer des liens, etc. Si vous possédez le compte mis à niveau en cliquant sur Publier, vous pourrez publier cette bibliothèque et même y inviter des utilisateurs. Allez-y et invitez une certaine personne. Je peux aller de l'avant et leur donner des autorisations d' affichage ou de modification si je voulais pouvoir modifier cette bibliothèque. Sinon, en les invitant, ils auront accès à la bibliothèque ici dans l'ensemble de vos projets. Et ils recevront un e-mail d'où ils vont aller de l'avant et auront accès à cette bibliothèque. C'est ainsi que vous pouvez publier des bibliothèques à l'aide XD et les partager avec d'autres membres de l'équipe. 77. Importer des fichiers croquis: Maintenant, si vous avez travaillé avec d'autres logiciels de conception comme auparavant, vous pouvez les importer dans XD à tout moment. Si vous êtes dans votre navigateur de fichiers comme moi ici, vous pouvez bien sûr créer de nouveaux fichiers, mais vous pouvez en fait ouvrir d'autres fichiers, y compris les fichiers Photoshop ou Illustrator, les fichiers esquisse ou d'autres fichiers XD. Si vous travaillez sur un projet d'esquisse dans lequel vous avez un projet d'esquisse que vous apportez à XD. Vous pouvez simplement aller de l'avant et cliquer sur cette option d'esquisse. Et XD vous demandera ensuite de localiser ce fichier. Et une fois que vous l'avez fait, vous pouvez continuer et cliquer sur Ouvrir. À partir de là, en fonction de la taille du fichier, cela peut prendre une minute ici pour EC2, l' importer, mais comme vous pouvez le constater, nous allons importer votre projet dans un projet XD. Vous pouvez aller de l'avant et l'utiliser comme prévu. Xd ira de l'avant et passera même vos composants de l'esquisse aux composants XD. Et il allait modifier ces composants comme vous vous y attendiez. C'est ainsi que vous pouvez importer des fichiers d'esquisse dans Adobe XD et les utiliser comme vous le souhaitez. Maintenant, vous remarquerez peut-être que les choses se trouvent dans des pages différentes. Dans Sketch. Ils peuvent apparaître sous la forme de différentes sections à l'intérieur de votre canevas que vous avez ici. C'est pourquoi les choses sont divisées en différentes sections, mais tout le reste doit être identique. Une chose que je tiens à remarquer que si vous n'avez pas les bonnes polices installées, elles risquent de ne pas fonctionner correctement. Vous voudrez peut-être aller de l'avant et vous assurer que toutes les polices ce fichier d'esquisse sont installées avant de l'importer dans votre XD. Supposons que vous puissiez importer des fichiers d' esquisse dans XD. 78. Qu'est-ce que la prototypage ?: Nous avons brièvement mentionné le prototypage. Ensuite, lors des conférences précédentes nous avons parlé de revenir à nos conceptions et mettre en place votre prototype afin que nous puissions réellement utiliser un prototype dans un logiciel de conception ? Que fait-il ? À quoi sert-il ? Et pourquoi devrions-nous créer des prototypes à partir de nos maquettes ? Eh bien, comme tout simplement, un prototype est essentiellement un échantillon ou un modèle de produit créé pour tester à quoi ressemblera le processus de ce produit lorsqu'il est réellement programmé et construit. Nous avons mis ces modèles ensemble, mais ils n'ont pas vraiment de rapport les uns avec les autres. Ils ne sont pas encore vraiment un produit. À l'aide d'un prototype, nous pouvons réellement aller de l'avant et créer ou imiter ce à quoi ressemblerait un produit réel développé de cette conception et ressemblerait à n'importe quoi, de la création de connexions. entre les boutons des différentes pages, jusqu'à montrer quels types d' animations apparaissent sur nos conceptions ou en ouvrant des superpositions sur le design et ainsi de suite font partie du prototypage. Mais il a utilisé des prototypes pour partager notre vision de ce produit ou de ce design, qui serait ensuite transformé en produit réel avec l'aide d'un développeur de logiciels. La raison pour laquelle le prototypage est si important, c'est qu'il coûte beaucoup moins cher de créer un prototype à l'aide d'un logiciel de conception tel que XD, plutôt que d'aller de l'avant et de le développer réellement application ou produit, au lieu de coder réellement ce produit. Et puis en réalisant quels changements doivent être apportés. Et alors que nous envoyons ce prototype pour commentaires, nous pouvons aller de l'avant et l'améliorer avant de le remettre à un développeur potentiel pour le mettre en place en utilisant du code. Nous allons donc aller de l'avant et relier ces pages ensemble lors de la prochaine conférence et créer un prototype à partir de nos conceptions. 79. Créer une transition: Comment créer un prototype et créer des connexions entre nos pages dans XD ? Eh bien, il suffit d' aller de l'avant et de passer à l'onglet Prototype ici. Maintenant, une fois que vous êtes dans l'onglet Prototype, comme vous pouvez le constater, le panneau des propriétés va complètement changer. Et maintenant, vous pouvez créer des interactions entre différentes pages, différents boutons, etc. Et nous allons le faire ensemble dans cette conférence. Et la façon dont nous allons travailler à travers cela , c'est de nous frayer un chemin de gauche à droite, qui est essentiellement l' ordre des pages que nous nous attendons à parcourir ou que nous attendons à ce que l' utilisateur traverse. Ce que nous essayons de faire ici, c'est créer un flux qui emmène l'utilisateur des pages initiales de l'application jusqu'aux dernières pages, qui dans ce cas affichera la progression de l'ordre, puis avoir la possibilité d'ouvrir le menu et d' accéder également à ces différentes pages. Nous allons donc prendre notre temps, parcourir soigneusement chaque page et ajouter des connexions appropriées entre les boutons et les pages. Je veux aller de l'avant et simplement appuyer dessus et zoomer sur cette section ici et travailler à partir d'ici. Maintenant, dans un prototype, il y a toujours un écran d'accueil que vous pouvez choisir. Cela signifie donc que lorsque vous ouvrez votre prototype, s'agit de la première page dans laquelle le prototype démarrera. Dans notre cas, nous voulons faire de l' écran de démarrage, la page d'accueil. Nous allons donc cliquer sur le plan de travail pour l'écran de démarrage, puis cliquer sur cette page d'accueil. Nous avons maintenant créé un flux. La première connexion que nous allons établir est de cette page ici, l'écran de démarrage vers notre page de connexion en faisant simplement glisser ce nœud ici de la page et en le faisant glisser vers la page que nous voulons l'utilisateur doit passer par une fois qu'il a vu cet écran de démarrage. Maintenant ou du côté droit ici, nous avons un tas d'options sur la façon dont nous voulons que cette transition se produise. Donc, un par un, nous allons passer en revue les types d'action que nous avons ici. La première est la transition, qui, comme son nom l'indique, fera passer l'utilisateur d' une page à une autre. Nous avons l'animation automatique, qui essaie essentiellement de faire la même chose, mais anime cette transition. Donc, s'il y a quelque chose de similaire entre les deux pages, l'animation automatique vers l'avant et crée une transition en douceur qui semble avoir une animation argentée entre ces pages. Et parce que ces pages ne sont pas liées, je n'ai pas d'éléments partagés. Nous ne voulons pas vraiment l'animer automatiquement. Nous pouvons choisir d' ouvrir une superposition, ce qui, pour l'essentiel c'est ouvrir la page vers laquelle nous pointons, qui est ici en haut de cette page, par opposition à  : plutôt que de faire passer l'utilisateur d'une page à une autre. Encore une fois, la page s' ouvrira en haut de cette page. Et généralement, nous voyons des superpositions utilisées dans des feuilles d'action et des vues d'alerte et des écrans plus petits qui apparaissaient temporairement et disparaissaient temporairement. Nous explorerons cela également lorsque nous ajouterons une superposition pour notre feuille d'action. plan de travail précédent ramènera l'utilisateur au plan de travail précédent des prototypes ou où qu'il se trouvait auparavant. Nous les reprendrons, leur lecture audio, comme son nom l'indique, joue un son. Bien sûr, lorsque nous le sélectionnons, nous pouvons choisir un fichier audio et une lecture vocale. Nous allons aller de l' avant et lire un discours comme son nom l'indique. Et vous pouvez aller de l'avant et écrire ce discours et ici. Donc c'est cool si vous avez besoin de lire son discours, mais nous n'avons pas vraiment besoin de ça en ce moment. Nous voulons simplement en faire une transition ici. Avec chacune de ces options, vous obtiendrez un ensemble d'options différent juste en dessous ou des propriétés juste en dessous. Pour le modifier, nous allons les examiner plus en profondeur. Pour l'instant. Nous voulons simplement créer une connexion de symbole depuis notre écran de démarrage vers une page de connexion après une certaine durée. Nous voyons donc que notre destination est la page de connexion, comme nous en avons déjà pointé deux. Maintenant, si à un moment donné nous voulons modifier cette connexion, nous pouvons aller de l'avant et la faire glisser vers une autre page que nous voulons en nommer deux. Mais pour l'instant, nous allons aller de l'avant et créer ces deux connexions. Bien sûr, vous pouvez créer plusieurs connexions si vous le souhaitez. Nous pouvons créer une connexion entre l'écran de démarrage et page de connexion et une autre entre les écrans de démarrage pour défendre la réplication suivante. Mais je vais simplement supprimer cette connexion en cliquant simplement sur Supprimer. Si, à un moment donné, vous ne souhaitez pas vous connecter et que vous souhaitez supprimer cette connexion, vous pouvez simplement sélectionner la connexion et cliquer sur Supprimer sur votre clavier. Pour cette transition, nous voulions nous connecter en tant que destination. Et pour l'animation, nous voulons avoir une dissolution. Il s'agit des animations disponibles pour la transition entre deux pages. Maintenant, certains d'entre eux seront appliqués à différents endroits de notre Apple pour cette page, dissoudre est la bonne, qui s'estompe essentiellement de cette page vers cette page. Maintenant, ici pour plus de facilité, nous avons différents types d'options d'accélération pour choisir à quoi ressemble notre animation. Généralement, nous voyons la facilité d'entrée ou de sortie excusée. Mais bien sûr, vous pouvez essayer les différents types d'animations, permet de voir facilement quelles sont les différences. Allons donc de l'avant et choisissons aisément l'entrée et la sortie. Pendant toute la durée, je veux aller de l'avant et sélectionner un point zéro quatre secondes. Donc, essentiellement, c'est le temps que prendra cette animation. vous le définissez longtemps, une seconde ou plus, il passera entre ces deux pages plus tard. Alors que si vous dites qu'il est plus court, cela arrivera plus rapidement. C'est essentiellement ce que fait cette région. Allons de l'avant et prévisualiserons nos prototypes jusqu'à présent, car notre déclencheur est un onglet, si je tape sur cette page, il ira de l'avant et s' animera sur cette autre page. Mais ce que je veux faire, c'est plutôt que de taper, nous voulons aller de l'avant et choisir l'heure. Nous voulions aller de l'avant et le faire passer automatiquement à cette page sans que l'utilisateur ait à appuyer dessus au bout de 0,6 seconde. Maintenant, si nous allons de l'avant et ouvrons l'aperçu du bureau une fois de plus, comme vous pouvez le voir, sans que je tape sur la transition se produisait automatiquement. C'est ce que fait le déclencheur ici. Ensuite, vous avez d'autres déclencheurs tels que la voix. Vous pouvez donc utiliser une demande vocale si vous le souhaitez. Vous pouvez utiliser des touches et des manettes de jeu. L'utilisateur appuie sur une touche spécifique, puis il s' animera ou un glisser-attaque. Nous utilisons donc généralement un onglet. Quelle heure est également utile dans un cas comme celui-ci, nous avons créé notre première connexion ici, ce qui est génial. Maintenant, nous allons revenir dans la prochaine conférence pour créer davantage de liens entre le reste de nos pages. 80. Connecter nos pages: Félicitations pour la création de votre première connexion pour le prototype dans notre application mobile. Je pense que ça a l'air plutôt bien, mais allez dans l' aperçu du bureau en haut, ici, vous pouvez aller de l'avant et prévisualiser l'animation que nous avons créée ou cette transition. Je pense que ça a l'air plutôt bien. À partir de là, nous voulons aller de l'avant et parcourir chaque page et voir quelles sont les connexions à établir entre les différentes pages. Maintenant, bien sûr, vous pouvez obtenir plus détails avec le type de reporter si vous le souhaitez. Par exemple, si vous souhaitez aller de l'avant et imiter l'utilisateur qui saisit une adresse e-mail ou un mot de passe, puis qu'un clavier apparaisse à l'aide des ressources Apple, vous obtiendrez plus de pages conçues ici, peut-être juste en dessous de cette page de connexion et avoir chacun de ces types de conceptions distinctes , puis faire la transition entre eux. Si vous voulez créer un prototype de prototype plus réaliste. Mais dans ce cours, nous allons rester simple et créer des liens entre les pages que nous avons déjà conçues. À partir de là, je veux aller de l'avant et créer une connexion à partir du bouton de connexion vers la page suivante de l'application, qui sera la vérification du téléphone. Nous allons donc supposer que c'est la première fois que les utilisateurs se connectent. Nous créditerons donc la connexion de la page de connexion à la page de vérification du téléphone. Une chose qui est cool, mais les prototypes, c'est que vous n'avez pas nécessairement besoin de créer des connexions entre les pages. Vous pouvez réellement créer des connexions entre n'importe quel élément de votre conception. De cette façon, vous pouvez aller de l'avant et brancher ce bouton avec cette page afin que lorsqu' un utilisateur appuie sur ce bouton, il parcourt l'utilisateur vers cette page. Et c'est ce que nous allons faire. Nous allons cliquer sur notre bouton de connexion. Assurez-vous que vous êtes dans l'onglet prototype ici et non dans la conception. Sinon, cela ne fonctionnerait pas. Ensuite, faites glisser un nœud pour créer une connexion entre ce bouton, le bouton Connexion et notre page de vérification téléphonique. Maintenant, nous pouvons voir la gâchette. Nous voulons que ce soit un robinet, cette affaire. Ainsi, lorsqu'un utilisateur appuie sur ce bouton, il déclenche cette transition. Et nous voulons aller de l'avant et laisser cela tel quel. Et pour l'animation, au lieu de se dissoudre, nous allons aller de l'avant et choisir la diapositive à gauche. Et vous verrez à quoi cela ressemblera en une seconde. Je veux laisser le reste car il est facile d'entrer et sortir à 0,4 seconde pendant toute la durée. Maintenant, si nous allons de l'avant et prévisualisez cela par Crick, en cliquant sur le login, allez-y et faites-nous passer pour vérification. Mais comme vous pouvez le constater ici, nous pouvons vraiment cliquer sur n'importe quoi d'autre, car nous devons maintenant créer des connexions dans notre page de vérification téléphonique. chose de génial dans l'aperçu du bureau que nous avons ouvert ici est que lorsque nous cliquons sur différentes pages, nous pouvons aller de l'avant et prévisualiser à quoi cela ressemblera dans notre prototype sans avoir besoin Fermez cette fenêtre et ouvrez un yen. C'est vraiment bien parce que vous pouvez aller sur différentes pages et répéter ce prototype si vous le souhaitez, ou répéter ces transitions si vous le souhaitez. Et c'est génial car vous n'avez pas besoin de recharger l'aperçu de votre bureau. Je vais juste aller de l' avant et minimiser cela. Bénissez notre aperçu et passez à autre chose. Et nous allons créer une connexion entre la page de réplication du téléphone dans notre page principale. Parce qu'une fois que l'utilisateur a ajouté un numéro de téléphone, il ouvrira la page principale de l'application. Et nous allons laisser cela de la même manière que la transition précédente, qui est légèrement à gauche. Il est à l'intérieur et à l'extérieur, 0,4 seconde et sur le robinet. À partir de là, parce que nous n'avons qu'un seul menu, nous ne pouvons vraiment créer un lien entre l'un de ces restaurants et le menu ici. Maintenant, si vous voulez encore une fois, vous compliquez avec cela, vous pouvez aller de l'avant et concevoir différents menus pour différents restaurants, mais il y aura un peu redondant, car encore une fois, quel est l'objectif de cette le prototype n'est pas de le rendre parfait et de ne pas faire fonctionner toutes les connexions. Le principal point du prototype est de faire connaître notre idée, notre point de vue en fonction de ce que nous avons. Dans ce cas, nous voulons aller de l'avant et sélectionner le restaurant italien ici, Frank est passé devant la Maison. La toute première option et la section critique de cette page ici. Et nous allons laisser tout le reste tel quel. À tout moment, vous pouvez également appuyer sur Commande Entrée pour ouvrir cet aperçu du bureau ou Contrôle Entrée sous Windows. Connexion. Prochaine. Ensuite, vous vous rendrez compte que si vous cliquez sur ces autres options, Rien n'apparaîtra. Mais si vous survolez celui-ci parce que nous avons créé une connexion pour celle-ci, mon curseur passera à ce type de curseur de lien. Nous savons donc qu'il y a un lien ici. Nous pouvons donc aller de l'avant et cliquer dessus. Ouvrez le menu pour nous, une belle partie car cette page est un peu plus longue. Les axes sont déjà allés de l'avant et ont créé ce défilement, défilement vertical pour nous, ce qui est incroyable. Mais le seul problème que vous remarquez est que la barre de navigation de la barre d' état fait également défiler, alors qu'elle devrait rester sur alors qu'elle devrait rester la même partie de la page. Peu importe combien nous faisons défiler vers le bas ou vers le haut. Nous reviendrons dans la prochaine conférence pour apprendre comment nous pouvons réellement aller de l'avant et verrouiller ces éléments dans la page. Ils ne bougent pas pendant que nous faisons défiler vers le haut et vers le bas. Une fois cela fait, nous allons continuer à créer des connexions dans notre prototype. 81. Défilement vertical: Ainsi, comme je l'ai mentionné précédemment, nous avons créé un défilement vertical pour nous. raison du fait que cette page ici, notre page de menu est trop longue en termes de hauteur. Maintenant, en utilisant cette option ici, lorsque je sélectionne notre page de menu, vous verrez qu'il s'agit en fait de la ligne d'affichage. En ajustant cela, nous pouvons réellement aller de l'avant et choisir la partie de notre page affichée dans notre prototype. Donc, si nous l' étendons, nous verrons de plus en plus sur une page. Ce que nous voulons faire, c'est que nous voulons aller de l'avant et définir la même hauteur que les sites d' appareils iPhone actuels sont notre étui. Ce serait juste là où c'était avant. C'est ce que montre cette ligne ici. Maintenant, un problème avec un défilement vertical, comme je l'ai mentionné, est le fait que notre barre de navigation et notre barre d'état ne devraient pas bouger pendant que nous défilons vers le haut et vers le bas. Alors, comment remédier à cela ? Eh bien, XD vous donne la possibilité de sélectionner certains éléments de la page, que vous ayez sélectionné l' onglet Design ou le prototype lorsque vous disposez la barre de navigation que nous sommes sélectionné, vous obtiendrez cette position fixe lorsque faites défiler sous la partie défilante. Ou si vous utilisez InDesign, vous verrez cette position fixe lors du défilement. Ils font tous les deux la même chose. Donc, si vous allez de l'avant et cliquez dessus, ce qui se passera maintenant, c'est que si je fais défiler notre prototype, la barre de navigation ou la laine restent là. Mais bien sûr, notre barre d'état doit encore être corrigée. Maintenant, la raison pour laquelle cette barre de navigation derrière toutes les autres cartes ici est que nous avons apprécié au début et dans notre panneau Calques, elle doit être inférieure à ces autres éléments. Et nous pouvons le confirmer en accédant à notre panneau Calques ici. Et comme je l'ai mentionné ici, comme vous pouvez le constater, sur la partie la plus basse des couches, alors que nous voulions être au sommet. Et comme vous pouvez le constater, nous allons maintenant aller de l'avant et couvrir notre prototype, ce qui est génial. Maintenant, une chose que nous voulons faire est de remonter la barre d'état car elle devrait se trouver au-dessus de la barre de navigation. Et faites la même chose. Effectuez une position fixe lors du défilement. Encore une fois, vous pouvez faire la même chose en mode prototype et cliquer sur position fixe et lors du défilement, et j'obtiendrai le même résultat pour vous. Parfait, c'est ainsi que vous fixez les objets. Alors, lorsque vous faites défiler et prototyper, maintenant de quelles connexions avons-nous besoin d'ici ? Nous avons besoin d'une connexion pour nous ramener à la page du restaurant ici. Et nous en avons besoin pour nous emmener à la page du panier ou à la page de commande , peut-être connecter l'une de ces cartes pour accéder à cette page de commande également. Maintenant que je pense qu' un bouton ici serait bien dans notre page de menu. Tellement semblable à celui que nous avons sur notre page d'historique des commandes. Ainsi, au lieu de commencer une nouvelle commande, ils peuvent aller dans leur panier ou ils peuvent aller de l'avant et terminer les commandes. Revenons donc à l'onglet Design. Encore une fois, le plus important dans le prototypage, c'est qu'au fur et prototypage, c'est qu'au fur vous parcourez le prototype, vous commencez à réaliser certains éléments d'expérience utilisateur qui vous manquent. De cette façon, vous pouvez copier ces éléments ou créer ces éléments dans vos conceptions au fur et copier ces éléments ou créer ces éléments dans vos conceptions à mesure que vous effectuez un prototypage. Nous allons donc copier ces deux calques de ce rectangle, c'est un dégradé ici et le bouton à l'aide de la commande C et revenons à la page de menu et copiez-les ou collez-les ici. Parce que c'est en dehors de notre port de vue ici, nous ne pouvons pas vraiment le voir. Nous voulons donc aller de l'avant et placer cela au-dessus de cette ligne vers la droite quand elle touche cette ligne. Et nous allons aller de l'avant et faire une position fixe lorsque vous défiler les deux pour qu'ils ne bougent pas de cette façon. Je pense que ça a l'air plutôt bien. Maintenant, au lieu de commencer, au lieu de commencer une nouvelle commande, cela devrait dire aller au panier ou passer à la commande. On y va. que vous puissiez aller de l'avant et appuyer sur ce trimestre ou un an pour passer à la même page. Créons ces connexions avec le bouton en bas et l' une des cartes ici. Pour ce faire, nous allons passer à l'option restaurant ici, passer par deux prototypages. N'oubliez pas que vous pouvez créer un autre type d'interaction au lieu de cela, c' est-à-dire créer cette interaction. Et au lieu de la transition, vous pouvez faire un plan de travail précédent qui fera la même chose. Cela ramènera l'utilisateur au plan de travail précédent d'où il venait. Dans ce cas, s'ils appuient sur ce bouton et qu'ils ont appuyé sur restaurant, il les ramènera à cette page. Ainsi, au lieu de créer une connexion à cette page, vous pouvez également le faire. C'est super cool. Créez également un lien entre nos cartes et la page de commande ou un tapis. Et ici et sur le bouton Commander ici, cliquez sur ce bouton de panier ici, faites glisser la connexion. Et je vais tout laisser comme il est ici. Pour la page de commande incontournable. Je vais faire la même chose. Nos connexions pour cette page doivent maintenant être terminées. Vous voyez, parfait. C'est plutôt bien. Revenons au cours de la prochaine conférence pour continuer à créer d'autres connexions. 82. Créer des liens de composants: Ainsi, avec les connexions créées entre le menu et la page de commande, maintenant incomplète ou la page de commande et les connexions en mode prototype. Continuons et cliquons dessus pour revenir au menu et cliquez sur ce bouton ici pour créer une connexion. Et nous allons aller de l'avant et cliquer sur le plan de travail précédent. Et pendant que nous sommes ici, pourquoi n' allez-vous pas connecter notre bouton de menu ici à ce profil barre oblique de menu ici. Allez-y et réduisez cela pour que nous puissions voir ici. Et nous allons faire une transition ici. Et on va le faire, au lieu de se dissoudre, on va glisser vers le haut. Il glisse donc vers le haut depuis l'écran. Maintenant que nous avons créé cette connexion, je peux bien sûr ajouter la même connexion entre notre bouton de menu sur cette page et le menu ici également. Mais une chose que nous pouvons faire parce que nous créons la même connexion entre ce bouton et la même page, c'est que nous allons de l'avant et créer un composant à partir de cette icône de menu. Depuis que nous l'avons utilisé à plusieurs endroits. Et puis ne créez la connexion qu'une seule fois et faites avec elle et toutes les autres pages. Pour ce faire, revenons à notre onglet Design. Nous allons ensuite copier l'un des boutons de menu sur nos composants ici. Nous allons aller de l'avant et appuyer sur la commande K pour en faire un composant. Et j'ai aimé le nom tel quel, l'icône du menu hamburger. Et maintenant, ici, nous allons aller de l'avant et maintenant nous allons faire glisser cette icône de menu de hamburgers ici. Et il suffit de le placer au-dessus de celui que nous avons. Et je vais d'abord copier celui-ci, puis revenir aux calques et supprimer cet autre groupe en dessous pour l'autre, pour celui qui n'est pas une instance. Et faisons la même chose pour notre page de commande. Allons de l'avant et supprimons cela et cliquons sur l'ensemble du plan de travail et appuyez sur Commande V. Même chose pour la commande Progression page Commande V, car nous avons supprimé cette connexion que nous avions sur il y a maintenant disparu. Mais ce que nous pouvons faire maintenant, c'est aller à notre composant, revenir au prototype et connecter ce bouton ou ce composant à cette page de profil. Nous allons laisser les options qui glissent vers le haut, facilitent l'entrée et la sortie et 0,4 seconde. Et maintenant, ce qui va se passer, c'est que partout où nous utilisons ce bouton aura cette connexion entre le bas et cette page de menu. Je viens de remarquer que je n'avais pas correctement copié l'instance sur ma page principale. Donc je vais aller de l'avant et simplement supprimer celui-ci ici et copier un d' ici sur notre page principale, donc c'est la bonne. Maintenant, si vous cliquez sur chacun de ces boutons de menu, vous verrez que la connexion a été copiée à partir de la connexion au composant que nous avons créée. Allez-y et déplacez cela ici avec mon autre bouton de fermeture , puis cliquez sur la page principale et cliquez sur l'aperçu du bureau. Je peux aller au menu à partir d'ici. Si je clique sur la page de commande, vous pouvez accéder à la connexion à partir de là. Même chose à partir de la page Progress de la commande , ce qui est génial. C'est ainsi que vous pouvez réellement utiliser composants pour créer une connexion et faire en sorte que toutes vos instances copient ou reportent cette interaction dans l'ensemble de vos conceptions. Nous allons maintenant compléter la page de commande et les connexions ici. Nous voulons aller de l'avant et relier l'ordre de police à la page Progression de la commande. Pour la transition, nous allons faire un peu à gauche. Conservez tout le reste tel quel sur notre page Progress de commande. Nous allons aller de l'avant et cliquer sur cette note et créer l'action précédente sur le plan de travail. Il s'agit donc des connexions pour notre page de commande. Revenons à la prochaine conférence pour travailler sur notre page Progress de commande et apprenons comment ouvrir des superpositions à l'aide de prototypes. 83. Créer des superpositions: Je pense qu'il est temps d'essayer la superposition car sur notre page Progress de commande ici, comme je l'ai mentionné lors des conférences précédentes, nous voulons aller de l'avant et créer un lien entre notre ordre de modification ici et cette fiche d'action de l'interface utilisateur ici. Pour ce faire. Au lieu de l' ouvrir sous forme de page séparée, ce qui ne serait pas correct. Ce que nous voulions faire, c'est que nous apparaissions en haut de cette page sous forme de superposition. Pour ce faire, nous pouvons simplement créer un lien dans notre onglet prototype entre notre ordre de modification et notre feuille d'action ici. Mais une chose que vous remarquerez peut-être, c'est que si vous essayez de créer une connexion en ce moment, cela ne fonctionnera pas car notre feuille d'action est en fait à la place de notre plaque de plâtre et qu'elle n'est pas dans un tableau d'art. Ainsi, chaque fois que vous souhaitez créer une connexion, vous devez disposer d'un tableau artistique autour de cet objet. Donc, pour résoudre ce problème, revenons sur notre onglet Design et cliquez sur. Allez-y et dessinez un tableau d'art autour de cette feuille d'action. Nous allons aller de l'avant et enlever le remplissage parce que nous ne voulons pas le ressentir. Je vais aller de l'avant et sortir de ce tableau d'art et m'assurer que nos feuilles d'action sont centrées sur un plan de travail plus long ici. Je pense que c'est plutôt bien ici. Allons de l'avant et renommons cette feuille d'action ou modifions la feuille d'action de commande. Et maintenant, nous pouvons créer cette connexion en mode prototype entre cet ordre d'édition et notre tableau de feuille d'action. Mais au lieu de la transition, nous allons aller de l'avant et cliquer sur la superposition. Et comme vous pouvez voir la ligne ici, elle est devenue une ligne pointillée pour l' afficher sous la forme d'une superposition et non d'une transition. Les options ici sont à peu près les mêmes. Il vous demande d'où voulez-vous animer ? Et généralement, les feuilles d'action s' animent à partir du bas de la page. Et puis ce qui se passera, c'est que vous obtiendrez cette petite fenêtre pop-up ici où elle ira et vous demandera où voulez-vous que cette superposition apparaisse pour que je puisse réellement aller de l'avant et choisir. Nous sommes exactement sur ma page. Est-ce que je veux que ça apparaisse ? Est-ce que je veux qu'il soit au centre, mais je voulais être au sommet ou je veux qu'il soit tout en bas. Je peux le déplacer comme je le souhaite. Généralement, nous l'avons en bas et comme vous pouvez le constater, cela créera ce genre d'effet de superposition. Donc ça me montrera à quoi ça ressemblerait même une fois qu'il sera légèrement dans ma page, je pense que c'est parfait ici. Maintenant, par défaut, vous obtiendrez cette connexion ici, qui, en haut, qui, en haut, nous vous emmènerons au plan de travail précédent. Donc, si vous cliquez sur n'importe où dans la feuille d'action, cela vous amènera essentiellement au plan de travail précédent, ce qui signifie que nous allons fermer cette superposition. Nous pouvons tester cette superposition en prévisualisant ici. Continuez et cliquez sur cette page. Nous accédons donc directement à cette page en cliquant sur Modifier l'ordre, cette feuille d'action apparaîtra et clique n'importe où. Nous allons y aller de l'avant et rejeter cela. Vous cliquez n'importe où à l'extérieur. Il va également rejeter cette feuille d'action. Donc, à ce stade, si vous allez de l'avant et attribuez les connexions que vous souhaitez, donc si vous souhaitez créer, disons une page leur permettant d'annuler leur commande ou de contacter le restaurant. Vous pouvez également le faire. Mais c'est essentiellement de cette façon que vous créez des superpositions sur vos conceptions. C'est une façon cool de faire des planches pop art unes sur les autres plutôt que de passer entre elles. Maintenant, dans la prochaine conférence, il va explorer animation automatique dans le prototypage. 84. Utiliser Auto-Animate: Dans le but de vous montrer comment fonctionne l'animation automatique dans un prototype. Parce que je pense que c'est super cool et qu'il peut être vraiment utile dans des interfaces utilisateur plus complexes. Ce que je veux faire, c'est d'aller de l'avant et dupliquer cette page Progression de la commande et créer un autre état de cette page Progression de la commande. Essentiellement, nous pouvons avoir une autre étape où la progression de cette commande pourrait être livrée ou peut-être en route vers le client. Nous allons donc aller de l'avant et faire deux petits changements et voir comment fonctionne l'animation automatique. Et pour ce faire, je vais aller de l'avant et déplacer cette feuille d'action ici. Allez-y et cliquez sur la page Progression de ma commande, passez à l'onglet Création et cliquez sur Commande D. Ce que je veux dans cette page, c'est d'aller de l'avant et déplacer le cercle vers quelque part ici, plus près de la livraison en utilisant Maj et les touches fléchées vers la droite. Et au lieu de dire que votre commande préparée par le restaurant ou nous allons aller l'avant et changer cela pour votre commande est livrée par Sam. Allez-y et sortez de là. Maintenant, le reste des choses ici, nous voulons aller de l'avant et garder la même chose que sur notre eau et notre page Progress de commande. Allons de l'avant et créons une connexion entre la commande RVU. Allez-y et cliquez sur le nœud ici et faites en haut. Allez-y et accédez au plan de travail précédent. Le menu est déjà connecté car il s'agit d'un composant. Et deux connexions que nous voulons créer ici sont d' aller de l'avant et de créer un lien entre l' adresse ici notre page de localisation ici. Et au lieu de la superposition, je voulais faire une transition, je voulais glisser vers le haut. Mais ce qui est génial avec les prototypes, si vous avez la même connexion entre les mêmes objets dans différentes pages, vous pouvez aller de l'avant et appuyer sur la commande C sur cette connexion. Cliquez sur votre autre tableau d'art où vous avez ce bouton et collez cette connexion là-dedans. Et allez-y et collez la même connexion entre toutes vos pages. Maintenant, ce bouton est connecté et il suffit de créer une connexion entre cette page Progression de la commande celle du tiret de progression de la commande. Nous allons aller de l'avant et renommer ça en dash livré. Maintenant, allons maintenant créer une connexion à partir de cette page vers cette page ici. Au lieu de taper, Allons de l'avant et faisons le temps. Et pour plus de retard, choisissons cinq secondes ici. Bien sûr, c'est une excellente vitesse de livraison si c'était en temps réel. Nous allons aller de l'avant et choisir le type d'animation automatique. C'est ce qui arrivera, c'est que XD va essayer d'animer tous les éléments et les objets de cette page vers les éléments de cette page. Donc, si les mêmes éléments sont présents, nous allons essayer de créer une animation entre ces éléments, positions ou texte, etc. Parce que nous déplaçons, par exemple, cette ellipse ici, XD va de l'avant et comprendra qu'il s'agit la même ellipse et nous allons animer entre ces pages. Allons donc fermer notre prototype ici. Sélectionnez la page Progression de la commande, puis cliquez sur cet aperçu. Et après cinq secondes, cette page devrait s'animer automatiquement vers cette autre page, ce qui est génial. Comme vous pouvez le voir, l' ellipse s'est déplacée ici et les textes se sont en quelque sorte estompés entre ces deux états différents. C'est plutôt cool. Vous pouvez vraiment jouer avec ça et déplacer des objets. Une chose à noter est que vous ne voulez pas lire les pages d' animation automatique qui n'ont rien à voir les unes avec les autres. Parce que cela va aller de l'avant et créer une animation étrange qui n'est pas vraiment réaliste. Vous souhaitez utiliser la fonction d' animation automatique entre pages similaires où la plupart des éléments sont partagés. C'est pourquoi ces deux pages ont du sens en termes d' utilisation de l'animation automatique. Mais ne me laisse-moi pas tellement. Les pages entre le restaurant et la page du menu. C'est essentiellement l' animation automatique et la façon dont nous pouvons créer des animations sympas avec l'aide de XD effectuant la majeure partie du travail en mode prototype. Lorsque nous reviendrons dans les prochaines conférences et terminerons les connexions ici. 85. Terminer notre prototype: Nous avons fait un travail incroyable. Donc, pour avoir assemblé le prototype nos maquettes mobiles saines mordues. Permettez-moi de terminer notre maquette en créant le reste des connexions dans nos autres pages. Allons ici pour voir ce qu'il nous reste d'autre, commençant par la page tout en haut à gauche ou dans le menu de profil. Nous allons aller de l'avant et relier chaque bouton au bon endroit. Tout d'abord, j'ai remarqué qu'il y a une erreur ici car un bouton de connexion de déconnexion devrait être en bas. Allons de l'avant et faites-le glisser jusqu'au bas. Une chose intéressante avec les piles, c'est que vous pouvez aller de l'avant et remplacer facilement vos boutons. Il s'enclenchera directement en place. Allons de l'avant et veillons à ce que ce soit au bon endroit. Allons donc maintenant et relions chaque bouton à l'endroit où ils devraient aller. Nous n'avons pas de page de compte sur laquelle nous allons laisser ce bouton seul pour notre paiement. Nous voulions aller sur la page de paiement et nous allons changer l'animation automatique en transition. Nous allons vous montrer l'animation à gauche pour nos commandes passées. Nous allons aller de l'avant et le lier à notre ancienne page Commandes. Et laissez tout ce qu'il y a pour adresse. Nous allons aller de l'avant et créer un lien vers notre page de localisation. Laissez tout tel quel, et notre déconnexion nous ramènera à la page de connexion ici. Au lieu de glisser vers la gauche. Et nous allons aller de l'avant et choisir dissoudre pour l'animation vers la page de déconnexion pour le x ici, nous allons continuer et cliquer. J'irais de l'avant et je sélectionnais. Au lieu de la transition, nous allons faire le plan de travail précédent. Nous allons donc fermer cette fenêtre et revenir d'où elle vient. Pour notre page de paiement, Allons de l'avant et connectons le bouton Précédent pour continuer et cliquer et faire. Saisissez également le plan de travail précédent pour ajouter une page de paiement. Si vous avez assemblé cette page de paiement qui a été donnée en tant que devoir, vous pouvez aller de l'avant et la lier à la page détaillée de votre paiement. Si ce n'est pas le cas, vous pouvez laisser cela comme c' est le cas avec la carte d'ajout. Nous allons aller de l'avant et passer à notre page de localisation et lier notre bouton Terminé pour ajouter une interaction ici et taper Plan de travail précédent. Même chose avec cette adresse ici. Nous allons ajouter une interaction et au plan de travail précédent. Tout le reste semble propre. Et pour notre ancienne page Commandes, la seule connexion est que nous voulons établir ici est le bouton de retour ici. Nous allons donc faire à nouveau taper et plan de travail précédent pour notre annonce. Nous voulions aller à la pâte du restaurant ils peuvent parcourir les restaurants et commencer une nouvelle commande. On va se dissoudre pour l'animation et commencer une nouvelle commande. Nous ferons également la même chose. Retournez à notre page principale se dissoudra comme l'animation. Allez-y et prévisualisez notre prototype en mode bureau et voyons simplement s'il manque quelque chose ici. Donc, ici, nous allons aller de l'avant et appuyer sur la connexion. Cliquez sur Suivant dans la vérification de notre téléphone. Maintenant, comme nous n' avons que trois options, il n'y a pas de défilement vertical ici. Nous pouvons aller de l'avant et cliquer sur le menu ici pour tester cela, fermer le menu. Allons de l'avant et cliquez sur cette première option, l'ordre du navigateur. Et je verrais que nous avons déjà un problème ici. Nous allons donc aller de l'avant et nous assurer que notre bouton Aller à la commande reste à la même position verticalement. Nous allons donc sélectionner le bouton et faire une position fixe lors du défilement. Et cela devrait arranger ça. On y va. Nous pouvons aller à la commande ou aux cartes pour aller sur la page de commande. À partir de là, nous pouvons cliquer sur l'adresse pour modifier l'adresse si vous le souhaitez ou cliquer sur Terminé. Voyons voir. Oui, pour enregistrer l'adresse, il trop de mots à partir d' ici pour être en place. Notre commande, notre commande CR progresse, puis après quelques secondes, elle devrait passer à un état différent, ce qui est génial. Utilisation de l'animation automatique. Cela devrait fonctionner trop parfaitement. Nous n'avons donc pas lié ni réordonné les boutons. Allons de l'avant et sélectionnez-le en type. Plan de travail précédent. Cela devrait aussi fonctionner. On y va. Passer les travaux de commande. Beaucoup de mots d'ici aussi. Nous n'avons pas de page de compte. Le paiement fonctionne comme prévu. Les commandes de passe fonctionnent comme prévu. La seule chose que nous devons faire est de les verrouiller, la barre de navigation et le bouton ici. Allons-y et faisons-le ici. Sélectionnons le bouton ici, maintenons la touche Maj enfoncée et sélectionnons le rectangle en dessous. Effectuez une position fixe lors du défilement. Et même chose avec notre barre de navigation et notre barre d'état ici. Et assurez-vous d' apporter ces deux-là tout au long de notre panneau de couches. Si vous le remarquez, nous devons apporter notre nouvelle commande Démarrer jusqu' ici pour qu'elle se trouve dans notre fenêtre d'affichage. On y va. Maintenant, ça devrait s'inquiéter. Nous pouvons commencer une nouvelle commande et toucher la page du restaurant et répéter ce processus à nouveau. Enfin, si vous vous déconnectez et nous allons nous ramener à cette page de connexion ici. Nous l'avons donc. C'est notre flux pour notre prototype. Nous avons mis sur pied un prototype très beau et nous reviendrons dans les conférences suivantes pour le tester sur notre propre appareil mobile. Ensuite, apprenez comment partager ce prototype avec d'autres personnes. 86. Aperçu de l'appareil mobile: Très bien, nous avons donc assemblé notre prototype et l'avons testé dans notre aperçu de bureau, et cela avait l'air plutôt bien. Maintenant, je veux aller de l'avant et vous montrer comment vous pouvez réellement prévisualiser vos prototypes sur votre appareil mobile réel. Si vous cliquez ici et que vous cliquez sur l'aperçu de l'appareil, XD vous demandera de connecter votre appareil iOS ou Android à XD à l'aide d'un câble USB afin de pouvoir prévisualiser vos conceptions dans temps réel. Pour ce faire, vous pouvez maintenant accéder à ce lien, ou dans votre App Store ou Google Play Store, vous pouvez rechercher Adobe XD. Et je vais rapidement passer à mon téléphone maintenant pour vous montrer comment cela fonctionne. Une fois que vous êtes dans votre App Store ou Google Play Store, effectuez une recherche dans Adobe XD. Ce devrait être celui que vous recherchez. Il s'agit de l'Adobe XD. Nous pouvons aller l'avant et prévisualiser vos prototypes. Allez-y et téléchargez ça. Une fois l'installation terminée, nous allons aller de l'avant et l'ouvrir. Maintenant peut vous demander des notifications et autres. Je vais juste aller de l'avant et sauter cette étape pour l'instant. Non, on vous demandera de vous connecter dans le compte. Je souhaite donc continuer avec Adobe et me connecter avec mon compte Adobe. Une fois connecté, vous serez suivi par le didacticiel ici où vous pourrez aller de l'avant et apprendre comment utiliser cette application. Une chose importante est noter qu'à tout moment, vous pouvez toucher trois fois pour accéder au menu pendant que nous faisons des preuves ou des maquettes. Pendant que nous préparons notre prototype, vous pouvez cliquer trois fois pour accéder au menu. C'est donc une chose dont nous allons prendre note. Ensuite, nous allons cliquer sur OK, une fois que vous serez ici, nous allons cliquer sur ce petit onglet ici appelé Live Preview. Et puis je vais aller chercher mon câble USB. Vous faites de même. Connectez-le à votre ordinateur portable, puis connectez votre téléphone. Une fois qu'il est branché, x est automatiquement ouvert dans l' application comme vous pouvez le voir, et cela nous incite ici que je n'ai pas pointé. Nous pouvons toucher trois fois pour accéder au menu. Je vais aller de l'avant et cliquer loin. En ce moment, il nous a conduits directement à la page de connexion Healthy Bites. Bien sûr, comme avant, je peux choisir une autre page et voir ces pages sur mon appareil. Je peux aller de l'avant et même apporter des changements. Par exemple, je peux aller de l'avant et passer à mon onglet Création ici dans XD, déplacer les choses et en même temps voir ces changements en direct se produire dans notre application, ce qui est super cool parce que vous pouvez apporter de petites modifications et voir leur apparence sur un appareil réel plutôt que sur un ordinateur de bureau. Cela vous donne vraiment la représentation visuelle de ce que l'utilisateur verra et ressentira pendant qu'il utilise cette application mobile. Puisqu'il est destiné à un appareil mobile. À partir de là, vous pouvez aller de l'avant et interagir avec votre prototype. Comme vous le faites normalement. Allez dans le menu, parcourez différentes pages comme vous vous y attendez, deux choses à noter, c'est que si vous faites défiler vers la gauche et la droite, cela vous montrera différentes pages. Vous pouvez donc le faire aussi ou passer par le prototype réel comme vous le feriez. Il se peut que vous remarquiez certains boutons ici et que des choses semblables risquent de ne pas s'afficher correctement. Si vous voyez ce bouton de point d' interrogation, cela signifie généralement que l' icône n'était pas importante correctement ou s'affichait correctement ici, l' une des autres choses intéressantes est que si vous cliquez n'importe où au hasard, XD vous montrera ou mettra en évidence exactement où vous devez cliquer pour interagir avec le prototype ici. Donc, si je clique sur n'importe où en dehors de ça, ça va me montrer. Vous ne pouvez taper que sur ces zones pour interagir avec son prototype sur ce tableau d'art spécifique, ce qui est super cool. Ensuite, si je vais de l' avant et que je tape trois fois sur l'écran, vais me donner quelques options. Nous pouvons aller de l'avant et partager ce vert comme image de sa vie. Il existe quelques autres options pour masquer les points d' accès dont nous venons de parler ou désactivé le site pour les navigateurs afin que vous puissiez balayer pour naviguer dans ce prototype, vous devez interagissent réellement avec elle. Vous pouvez aller de l'avant et jouer avec ces options ou ajouter n'importe quel point, il suffit d'aller de l'avant et de quitter le prototype. C'est ainsi que vous pouvez prévisualiser votre prototype sur un appareil réel. Revenons à la prochaine conférence pour apprendre comment partager ce prototype avec d'autres personnes. Ils peuvent donc également le prévisualiser. 87. Partage de prototypes: Nous avons créé ce super prototype interactif et il fonctionne très bien avec cela. Asseyez-vous sur l' aperçu de notre ordinateur de bureau et également sur nos appareils mobiles. Alors, comment partager ce prototype avec quelqu'un d'autre ? Ils peuvent également explorer et voir comment ce produit fonctionne, qu'il s'agisse d'un client ou d'un membre de l'équipe. Comment partager réellement ce prototype avec eux ? En fait, c'est super simple. Accédez à l'onglet Partager. Et à partir d'ici, si vous créez simplement un lien pour votre étage ici. Donc, parce que nous avons déjà ce flux que nous avons créé en appuyant sur créer un lien, non seulement nous transportons les dessins et les tableaux d' art ici, mais aussi cette interactivité entre tous les pages que nous avons créées. Donc, une fois ce lien généré, je vais copier ce lien vers votre navigateur à partir duquel vous pouvez entrer cette URL. Et maintenant, cette fois-ci, comme vous pouvez le constater, cette conception fonctionne désormais comme un prototype, semblable à l'aperçu de notre bureau. Si vous touchez n'importe où à l'extérieur, cela nous indiquera exactement où se trouve ce point d'accès, où nous pouvons toucher et interagir avec notre prototype. C'est super cool, c'est exactement ce que nous voulons pour partager avec quelqu'un. Et ils peuvent encore laisser des commentaires comme ils le feraient avec les designers eux-mêmes. Mais maintenant, ce design est interactif et le prototype est également disponible via ce lien. Maintenant, rappelez-vous que nous avons créé un fluorure maintenant. Il s'agit donc du flux pour les utilisateurs qui débutent dans l'application. Mais nous pouvons également créer un autre flux, par exemple pour un utilisateur déjà connecté à l'application et qui n'a pas besoin de parcourir les pages d'inscription initiales. Au cours de la prochaine conférence, nous allons explorer comment créer un autre flux. Mais avant cela, je tiens également à mentionner que vous pouvez partager totalement ce lien avec quelqu'un qui utilise un navigateur sur votre appareil mobile et qu'il peut réellement prévisualiser cette application sur votre appareil. Maintenant, ils peuvent ne pas être aussi bons que l'avoir sur l'application Adobe XD sur votre téléphone ou sur le téléphone du client. Mais il en sera très proche en termes d' interactivité et d'ouverture des différents liens et autres choses en voyant les différentes connexions que nous avons établies et autres. C'est ainsi que vous partagez votre prototype avec quelqu'un d'autre. Et nous allons revenir à la prochaine conférence et créer un nouveau flux pour notre prototype. 88. Flux multiples: Nous avons appris comment créer un flux de prototype. Essentiellement, un flux nous permet de choisir où commence nos prototypes et où il se termine. Ce flux actuel, qui par défaut porte le nom d'un. L'utilisateur passe par l'écran de démarrage, se rend sur la page de connexion et ainsi de suite. Mais supposons que nous voulions créer un autre flux pour un utilisateur déjà connecté et que nous voulons qu'il aille directement sur la page principale. Comment faisons-nous cela ? Revenons à notre page prototype et nous allons cliquer sur cette page principale et cliquer sur cette petite icône d'accueil juste à côté de la page principale. Maintenant que nous avons créé un autre flux . À partir d'ici, nous pouvons réellement aller de l'avant et choisir où sera notre point de départ dans ce nouveau flux. Et si vous voulez aller de l'avant et prévisualiser ce flux, nous pouvons aller de l'avant et cliquer sur le flux. Et nous pouvons aller de l'avant et renommer le flux. Donc, au lieu de flotter vers, nous pourrions faire des utilisateurs connectés. Nous pouvons modifier ce flux vers de nouveaux utilisateurs. Maintenant, chez nos utilisateurs de connexion, nous pouvons aller de l'avant et prévisualiser à quoi cela ressemblerait. Comme vous pouvez le constater, nous sommes allés directement au restaurant par opposition au nouveau flux d'utilisateurs. Si vous cliquez sur le nouveau flux d'utilisateurs, nous guidera dans le flux d'inscription et toutes ces pages avant d' accéder à la page principale. Maintenant, nous pouvons même aller de l'avant et partager ce flux spécifique avec quelqu'un d'autre. En choisissant les utilisateurs de connexion, vous pouvez créer un lien et partager ce lien au lieu du nouveau lien de flux utilisateur. Maintenant, une chose que je tiens à noter est que si vous n'avez pas le compte mis à niveau, vous pourriez être limité à un seul flux. Vous pouvez donc aller de l'avant et accéder aux liens gérés ici et supprimer tout autre flux et vous assurer que vous n'avez qu'un seul étage pour pouvoir le partager ou le créer. lien sur Adobe XD pour cela. C'est ainsi que vous pouvez créer plusieurs étages pour votre prototype, en fonction de l'étape que les utilisateurs ajoutent ou du type d'utilisateur qu'ils sont, etc. C'est plutôt cool que nous puissions créer ces flux multiples. De cette façon, nous pouvons fournir à nos clients un accès à certains flux différents. Quelle pourrait être la différence entre chaque état. Avec notre prototype et balises pendant la période pressée, nous manquons juste quelques choses. Voici quelques retouches lesquelles j'ai promis de revenir et c'est une petite animation dans nos pages de progression de commande. Alors pourquoi ne pas revenir à la prochaine conférence et utiliser un plugin appelé Lottie pour y ajouter ces animations. 89. Animation Lottie: Ce sont nos prototypes qui ont fière allure. Je veux aller de l'avant et ajouter une petite animation à l' ordre de la page Progression. Si vous vous en souvenez. Pour la page Progression de la commande, j'ai laissé un peu d'espace ici pour montrer à l'utilisateur à quel stade il est commandé. L'ajout d'un peu d'animation à votre conception peut vraiment améliorer la qualité de l'expérience utilisateur et de l'ensemble du design. Et une excellente ressource pour ce faire est l'outil ici appelé fichiers Lottie. Vous pouvez accéder à lobby files.com, orthographié comme ceci. Une fois que vous y serez, nous allons ouvrir un compte. Une fois que vous serez connecté, nous allons continuer ici. Je peux sélectionner Designer. Allons-y. Maintenant, nous sommes connectés ici. Et maintenant, nous allons aller de l'avant et passer à l'onglet Plugins ici. Nous allons y ajouter un plugin et rechercher Lottie. Une fois que vous avez cherché que le premier devrait avancer les fichiers Lori, nous XD, allez-y et installez cela. Ça peut prendre une seconde ici. Une fois installé, vous pouvez cliquer sur Ouvrir XD et l'utiliser à partir d'ici. Nous allons maintenant vous demander de vous connecter via votre navigateur. Allez-y et cliquez sur Connexion. Et une fois que vous aurez cliqué dessus, il vous demandera d'accorder l'accès à vos fichiers. Pour aller de l'avant et cliquez sur Accorder l'accès. On y va. Nous sommes connectés à notre plug-in Adobe XD. Ce que nous sommes ici, continuons et cliquons sur le bouton Rechercher et rechercher la cuisine. En deuxième réflexion, je vais utiliser celui-ci ici ou la nourriture par ici. Alors, continuons et cliquons sur la progression de la commande et cliquons sur une petite animation. Certaines animations ont maintenant un fond blanc. Donc, celui-ci que j'ai trouvé ne l'a pas. Donc, c'est ce que j'aime. Allons de l'avant et insérons ça ici. Nous voulons l'insérer sous forme de latae, que nous allons aller de l'avant et être jouable. Je veux le rendre plus petit pour qu'il s'intègre ici. Nous pouvons maintenant prévisualiser cela pour voir à quoi cela ressemble en une seconde. Maintenant, comme il s'agit d'un média interactif, vous pouvez choisir lecture en boucle, ce que nous voulons. Puisque nous voulions continuer à jouer encore et encore et que nous voulions jouer automatiquement. Ensuite, nous pouvons aller de l'avant et même choisir d'éditer la lecture et d'ajouter n'importe quel délai, déclencheur ou quoi que ce soit de ce genre. Mais nous ne voulons pas vraiment changer cela. Alors, revenons à notre conception et choisissons la lecture automatique, puis continuons et prévisualiserons cette page sur notre, je vais revenir ici et prévisualiser cette page sur notre bureau. aperçu. Je pense que c'est plutôt cool. Nous le faisons paraître un peu plus petit afin qu'il n'interagisse pas ou ne se chevauche pas avec les autres parties de nos conceptions ici. Donc je pense que c'est mieux, donc oui, c'est beaucoup mieux. Parfait. Donc, je laisserai la page de progression de la commande livrée à vous comme un exercice pour le faire, allez-y et utilisez Lottie pour trouver une animation pour votre page de livraison, puis nous le ferons ensemble dans le prochain conférence. 90. Ajouter une animation de livraison: Voyons si nous pouvons également proposer une animation à utiliser dans notre page en cours de livraison. Allez-y et réduisez cela et revenez aux fichiers Lottie. Et je vais aller de l'avant et cliquer en arrière et cherchons la livraison. Voyons ce qui arrive là-haut. Celui-là a l'air cool. En fait. Lisez également la version ici. Nous allons donc choisir celui-ci ici et l'insérer dans notre page en cours de livraison en tant que Lawdy, pour aller de l'avant et le rendre un peu plus petit. Et placez-le au milieu de notre écran ici. Assurez-vous qu'il est centré. Parfait. Maintenant. Allons de l' avant et fermons ça. Et maintenant, le problème avec l'aperçu du bureau est que si nous faisons une boucle de cette animation, elle ne nous amènera pas à cette autre page après cinq secondes comme nous l'avions fait auparavant. Donc, une chose que je vais faire dans l'onglet Prototype, c'est que je vais aller de l'avant et changer cette fois pour toucher plutôt que lorsque nous toucherons la page, nous irons de l'avant et nous emmènerons à cette autre page. Comme pour les animations de l' époque, fonctionnalité de l'interaction prototype ne fonctionne pas aussi bien. Allez-y et testez ça. Maintenant, nous avons cette page et, si vous cliquez sur, nous avons la page de livraison. Je pense que ça a l'air plutôt bien. Comme vous pouvez le constater, l'animation pique vraiment nos créations. Et j'aime vraiment ce que nous avons fait jusqu'ici. Une chose que j'ai remarquée, c'est que notre ordre de vue ici ne fonctionne pas aussi bien parce qu'il est censé nous ramener à la page de commande, mais ce n'est pas le cas. Donc, au lieu de toucher le plan de travail précédent, nous allons réellement l' envoyer au tableau d'art de la commande. Au lieu de se dissoudre, nous allons faire un léger rythme. Essayons juste ça. Ok, ça a l'air juste. Maintenant, il fonctionne comme prévu. N'hésitez pas à parcourir vos conceptions et vos prototypes. Et s'il y a de petits changements que vous devez apporter en cours de route, veuillez les effectuer et assurez-vous que votre conception est peaufinée avant de l'envoyer à un client ou à un collègue. là que nous l'avons. C'est ainsi que vous pouvez utiliser animations Lottie pour créer belles petites animations à l'intérieur de vos prototypes avec une fausse bombe. Une autre chose intéressante que vous pouvez faire est d'importer des vidéos et d'utiliser des vidéos similaires à la façon dont nous utilisons ces animations dans vos créations. J'ai mis une vidéo dans les ressources ce projet comme un petit exercice, je veux que vous utilisiez cette vidéo comme arrière-plan dans cette page de connexion. Ensuite, allez-y et placez également une superposition dessus pour qu' elle ne se fonde pas avec notre premier plan ici, les champs, les boutons et le logo. Allez-y et prenez une seconde pour le faire. Et puis la prochaine conférence, nous allons également insérer cette vidéo ensemble. 91. Ajouter des vidéos: Très bien, nous allons donc insérer une vidéo sur notre page de connexion. Ainsi, dans les ressources ou les ressources de l'application pour ce projet, vous devriez trouver un tableau de bord de connexion, bord vidéo point mp4. Cette vidéo a été téléchargée avec l'aimable autorisation de Pexels.com. Ils fournissent d'excellentes ressources. Maintenant, je dois rendre hommage à pixels.com pour avoir fourni cette vidéo. Ils contiennent des tonnes de vidéos que vous pouvez rechercher pour vos projets et leur utilisation est totalement gratuite, ce qui est génial. Je vais donc vous laisser explorer cette ressource. Mais en attendant, allons-y et découvrons comment insérer cette vidéo dans notre page de connexion. Tout comme les images, l'importation de vidéos se fait simplement en faisant glisser une vidéo dans votre fichier XD. Maintenant, une chose à noter est que votre vidéo doit avoir une taille maximale de 15 mégaoctets. Vous devrez peut-être compresser vos vidéos si elles sont un peu plus grandes. Comme vous pouvez le constater, celui-ci est déjà énorme, vous devrez peut-être y aller et tout d'abord, assurons-nous que nous sommes sur notre onglet Design allons-y et réduisons ou filmez pour qu'il s'adapte à notre cadre par ici, puis allez-y et centrez-le. Assurez-vous qu'il couvre entièrement la hauteur. Nous voulons continuer et placer cette vidéo tout au bas de la page. C'est probablement le bon moment pour changer notre logo Healthy Bites. Accédez à la bibliothèque et définissez-la comme couleur d'accent. Et il en va de même pour notre mot de passe oublié ici. Nous ne voulons pas que cela se mélange et nous voulons créer ce contraste entre l' arrière-plan et le premier plan. Maintenant, si vous jouez à ce jeu, voyons à quoi cela ressemblerait dans notre aperçu pour ordinateur de bureau. Et encore une chose, nous voulons aller de l'avant et configurer Play on Top, qui diffuserait cette vidéo. Lorsque nous avons cliqué sur la vidéo, nous voulions la lire automatiquement. Je veux cliquer dessus. Et maintenant, à partir de là, vous pouvez réellement recouper la vidéo. Nous pouvons le raccourcir si vous le souhaitez. Choisissez exactement combien de temps nous voulons que cela dure. Et nous pouvons choisir de le mettre en boucle, et si nous voulons que le son soit lu ou non. Nous allons donc le désactiver. Nous pouvons même choisir la photo miniature à partir d'ici. Nous voulons donc boucler la lecture et nous pouvons même la tester pour voir à quoi elle ressemblera à partir de là. Ou nous pouvons aller de l'avant et simplement jouer notre nouveau flux d'utilisateurs et voir comment cela se passerait. Magnifique. Je trouve que ça a l'air incroyable. Il y a un peu de monde ici maintenant. Donc, si vous décidez d'utiliser la vidéo, je vous recommande de sortir ces deux images des bols de nourriture afin que nous puissions nous en débarrasser et les rendre un peu plus propres ici. On y va. Beaucoup plus agréable et beaucoup plus propre. Et si vous souhaitez ajouter une superposition à cette page, ou nous pouvons simplement créer une couche rectangulaire sur le dessus pour recouvrir l' ensemble du tableau d'art. Cliquez dessus et changez le remplissage en noir. Supprimez la bordure et définissez le rythme de la ville comme nous le souhaitons. Mais nous voulons aller de l'avant et nous assurer de placer cette couche rectangulaire au-dessus de la vidéo et en dessous de tout le reste. Nous pouvons donc continuer et contrôler cela en fonction obscurité que nous voulons que la superposition soit par rapport à la vidéo. Dans ce cas, nous pouvons même passer à barre d'état blanche. On y va. Je pense que ça a l'air beaucoup mieux. avons donc. C'est ainsi que nous pouvons ajouter des vidéos et des arrière-plans avec Adobe XD. Cela met fin à notre projet de conception mobile. Nous avons fait un travail incroyable et nous reviendrons dans les prochaines conférences pour travailler sur le site Web ou la page d'accueil pour des bouchées saines. 92. Exigences de la page Landing: Ou c'est ainsi que nous avons fait un travail incroyable avec notre application mobile, en élaborant un prototype et en apprenant comment le partager avec membres de notre équipe, nos collègues et nos clients, etc. Dans cette partie du cours, nous allons aller de l'avant et apprendre comment créer une page de destination l'aide d'Adobe XD pour le même client, des morsures saines. Dans cette conférence, nous allons rapidement passer en revue certaines des exigences que nous avons pour cette page de destination, qui est essentiellement un site Web pour entreprise qui permet aux utilisateurs de Apprenez-en plus sur ce que fait cette entreprise dans une sorte de conception de site Web d'une page. Ils peuvent donc en apprendre davantage sur les bouchées saines avant choisir de télécharger l'application, de s'inscrire et de l'utiliser. Nos clients nous ont donc demandé de créer quatre sections pour cette page de destination. Ainsi, le tout haut et la première section, qui est généralement ce que vous voyez sur les sites Web de nos jours, c'est une petite section d'en-tête, qui comprend généralement une sorte d' image ou de vidéo en arrière-plan, ou une sorte de design avec un logo, avec une barre de navigation qui permet de passer entre différentes parties de la page de destination et un slogan de petite entreprise, qui est fourni dans les ressources de la conférence. Allez-y et prenez une seconde pour télécharger cette ressource, qui inclut tous les éléments dont nous avons besoin pour la conception de notre page de destination. Nous voulons également une petite section Télécharger des applications. Dans cette section, nous aurons donc une petite capture d'écran de l'application avec badge de téléchargement pour l'App Store. Vous pouvez continuer et cliquer dessus pour télécharger l'application sur leur appareil. Et ensuite, ils veulent également que nous incluions d' autres restaurants populaires sous forme de petites cartes. Dans une section restaurant. Il y aura une petite section de restaurants où nous présenterons peut-être trois ou quatre de leurs restaurants et leur permettra de voir les restaurants ou les octets malsains dans une vue de carte un peu cool. Ensuite, nous aurons un petit formulaire Contactez-nous à la fin avec nom et un champ d'e-mail et une petite photo de leur équipe. Assez simple, assez simple pour la page de destination de la section. Ainsi, lorsque nous avons lancé notre projet de conception mobile, comme vous vous en souvenez, nous avons téléchargé l'ensemble des ressources de conception de l'application. Maintenant, pour ce projet Web, nous allons utiliser le modèle ou le kit de plateforme bootstrap pour XD. Si vous accédez à ce lien ici, ou si vous vous contentez de Google Bootstrap, Adobe XD, vous devriez pouvoir trouver cette page où vous pourrez obtenir les enfants d'ici. À partir de là, on va aller de l'avant et cliquer sur le kit. Je vais y aller et enregistrer ce fichier. Et cela devrait télécharger ce kit de bootstrap XD ici, dxdy. Vous pouvez donc continuer et double-cliquer pour l' ouvrir à l'aide d'Adobe XD. Une fois qu'il s'ouvrira, vous pourrez trouver ces ressources de framework bootstrap ici. Ils ont déjà rassemblé beaucoup de choses que nous allons utiliser sur nos sites Web, comme des carrousels ou des en-têtes, des pieds de page, des cartes d'images, etc. Nous reviendrons dans les prochaines conférences pour utiliser les ressources de ce cadre dans notre page de destination pour des bouchées saines. Bootstrap est un framework très populaire qui vous permet de concevoir des sites Web beaucoup plus facilement, car de nombreux composants sont déjà conçus et vous n'avez donc pas besoin de faire un travail redondant lorsque vous êtes conception. C'est là que nous utilisons Bootstrap dans ce projet. Revenons donc dans la prochaine conférence pour esquisser un peu de pain sur tout le type de filaire, à droite, avec un XD lui-même. Avant de continuer et de concevoir la vraie chose. 93. Wireframing page d'arrivée: Maintenant que nous savons qu'il y a des exigences pour ce projet et que nous avons téléchargé ce fichier Bootstrap XD. Nous allons aller de l'avant et mettre en place un filaire de faible fidélité pour notre projet, à droite, avec un XD lui-même. Bien sûr, vous pouvez aller de l'avant et esquisser le filaire comme nous l'avons fait pour la conception de l'application mobile. Mais vous pouvez également effectuer ce processus dans XD lui-même. Certaines personnes trouveront peut-être cela un peu plus facile, plutôt que de passer du stylo et du papier au numérique. Allons de l'avant et essayons cela ensemble dans cette conférence. Tout d'abord, je vais aller de l'avant et aller sur la page d'accueil ici. Et nous allons créer un nouveau fichier Web à partir d'ici. Et nous allons le conserver en 1920 par 1080, ce qui est généralement la taille par défaut d'un projet Web. Allons de l'avant et ouvrons cela et nous sommes déjà dans un nouveau projet. Parfait. Tout d'abord, allons de l'avant et cliquez sur ce sans titre ici pour changer le nom en santé par son site Web. Allez-y et sauvegardez-le. On y va. Nous avons maintenant renommé le fichier. Nous avons notre premier tableau web art ici, ce qui est parfait. Donc, en fonction des exigences de notre projet, nous savons que nous avons besoin de quatre sections sur notre site Web ici. Alors pourquoi ne pas aller de l'avant et fabriquer ce tableau d'art que nous avons assez de temps pour contenir quatre sections. Nous voulions essentiellement que quatre d'entre eux puissent s'intégrer dans cette page de destination. Donc, la hauteur ici, nous pouvons voir qu'elle est 1080, quelque chose que nous pouvons faire, ce qui est super cool. Et XD c'est que nous pouvons aller de l'avant et soit ajouter à cette hauteur en faisant plus. Je ne sais pas, disons dix pixels, ce qui va maintenant aller de l'avant et faire 1090. Nous pouvons aller de l'avant et même faire de la multiplication. Alors, qu'est-ce que nous multiplions cela par quatre ? Et je vais aller de l'avant et nous donner exactement la longueur du projet dont nous avons besoin. Cela va donc représenter notre page de destination avec quatre sections. Cerveau, bien sûr, n'est qu' une longue page ici. Nous allons créer un rectangle pour représenter chaque section. Alors pourquoi ne pas créer un rectangle ici, puis le redimensionner en 1920 par 1080, ce qui correspond à la bonne taille ici. Et nous allons aller de l'avant et juste baisser juste là. Allons de l'avant et dupliquons celui-là. Faites-en un pour représenter notre deuxième section. Encore une fois. Une dernière fois. On y va. Et maintenant, nous pouvons même voir les sections séparées par la limite ici, ce qui va se débarrasser de 0,1. Une autre chose que je vais faire, c'est que je vais aller de l'avant et activer une grille de mise en page. Et nous allons laisser ça tel quel pour 12 colonnes. Et ça a l'air plutôt bien. Et Bootstrap a tendance à utiliser le même type de mise en page pour ses grilles. La seule chose que je veux faire est d'aller de l'avant et d'amener l'opacité de cette grille de mise en page faible, donc elle est à peine visible. Juste assez pour que nous puissions le faire fonctionner sans que cela interfère avec notre design. Maintenant que nous avons cela, allons de l'avant et assemblons le filaire. Je vais utiliser des rectangles ici plusieurs fois pour assembler différentes parties du filaire que je veux. Et puis rappelez-vous, nous allons aller de l'avant et transformer cela en maquette un peu plus tard. Mais pour l'instant, allons de l'avant et créons un petit rectangle autour cette hauteur ici et reprenant toute la largeur. Ce sera donc notre barre de navigation. Je vais tirer ça, mettre ça tout en haut. Nous voulons que cette barre de navigation ait en quelque sorte ce bouton principal ici, ce qui, à partir de là, nous pourrons peut-être télécharger l'application. Et nous allons aller de l'avant et juste apporter ça ici. Je vais utiliser ma grille de mise en page pour tout espacer. Ensuite, nous voulons quelques autres boutons ici pour les différentes sections de l'application. Bien sûr, ces boutons peuvent être un peu plus petits que ceux-ci, mais ils se trouveront dans notre barre de navigation et c'est là que cela ira. On va avoir une image en arrière-plan ici. Et puis, du côté droit, je pense mettre le nom de l'entreprise ici, bouchées saines, ainsi que le slogan. Bien sûr, vous pouvez aller de l'avant et même ajouter un texte ici pour expliquer ce que nous voulons ici. Donc, ce que nous allons faire pour le nom de l'entreprise, sortir de là. Je vais reproduire ça et faire un slogan aux entreprises. N'oubliez pas que ce n'est pas forcément parfait. Nous ne faisons que mettre ça ensemble savoir ce qui va aller où. Et ensuite, nous aurons les différents boutons ici. Nous allons donc en avoir un qui va, Laissez-moi aller de l'avant et aligner au centre celui qui va dans les différents restaurants, puis un pour qu'ils nous contactent, puis un pour qu'ils puissent télécharger l'application. Comme ça, l' image sera en arrière-plan ici. Ceux-ci auraient fière allure ici. Et allons-y et dupliquons ces deux couches ici. Ce sera donc la section où va aller notre application. Donc, nous allons aller de l' avant et faire une ligne centrale et faire du texte pour le téléchargement. Et puis, ici, nous allons faire un petit bouton pour qu'ils téléchargent l'application, téléchargent quelque chose dans ce sens. Ensuite, nous allons créer un petit rectangle pour montrer où est l'appareil de notre application mobile. Aperçu. Nous allons reproduire l'un de ces textes ici. Retirez ce remplissage de là et faites une capture d'écran. Sachez exactement ce que c'est. Et ensuite, nous ferons notre section restaurants ici. Nous ferons peut-être un peu de titre ici qui dit restaurants populaires avec toutes les cartes ici. Pour notre carte ici, il va falloir que nous étendions ça. Apportez ça ici et peut-être le nom du restaurant. Et faites un autre rectangle pour l'image du restaurant. Retirez le remplissage d'ici et faites l'image du restaurant. On y va. Alors que nous le faisons, je tiens également à mentionner qu'il existe modèles que vous pouvez utiliser pour le cadrage filaire dans XD. Si vous effectuez une petite recherche Google pour kits de cadrage filaire ou des modèles pour XD, vous pourrez peut-être trouver des kits inutilisés. Nous allons reproduire ce type de carte quatre fois. Allons de l'avant et sélectionnons tout ici. Regroupez-les avec le Commandement G, je crois. On dirait que celui-ci ici n'a pas été ajouté au groupe. Allons de l'avant et passons dans le rectangle 19 dans ce groupe. Retirez n'importe quel remplissage. Encore une fois, nous allons aller de l'avant et espacer les choses pour qu'elles s'intègrent dans notre grille. chose comme ça aurait fière allure. Enfin, nous avons notre section Contactez-nous. Nous allons donc copier ça pour nous contacter. Texte ici. En plus, nous avons peut-être besoin de l' image de l'équipe ici. C'est ce que nous ferons, quand nous ferons une image à partir d'ici. L'équipe de l'image aura notre formulaire ici sur le côté gauche. Entrez en contact avec nous. Nous allons faire quelques types de champs de texte ici. Supprimez le remplissage ici, le nom, le champ de texte ici et l'e-mail. Petit bouton ici à soumettre. Ce sera une sorte de forme ici. Parallèlement à l'image de l'équipe. Mon filaire, nous allons sélectionner tous ces rectangles, ces calques et aller de l'avant et les verrouiller comme ça pour qu'ils ne bougent pas. C'est ça. Je peux aller de l'avant et ensuite les sélectionner les regrouper et les regrouper et les regrouper. Je pense que nous pouvons apporter celui-ci un peu de cette façon, laisser celui-ci et apporter celui-ci un peu plus. Ça pourrait paraître mieux. Nous allons donc aller de l'avant et centrer cela le long de la page. Assurez-vous que tout le reste est plutôt centré. Testez en quelque sorte l' espacement de tout ce que nous avons et voyez à quoi cela ressemblait. Donc maintenant, si nous allons de l'avant et que nous cliquons sur notre tableau d'art et enlevons, notre grille de mise en page sera en mesure de voir à quoi ressemblerait cette mise en page avec une image filaire ou à quoi ressemblerait ce site Web en fonction de ceci. filaire. Encore une fois, il s'agit d' une sorte de plan directeur pour votre projet. C'est juste pour nous donner une idée de ce qui devrait aller, où, pas exactement comment les choses devraient être ou des détails sur la couleur ou la nature des polices. s'agit simplement de nous dire où les choses devraient aller et ce qui devrait être là. Maintenant que nous avons une idée d'utiliser ce filaire, revenons à la prochaine conférence pour commencer la conception de notre page de destination. 94. Bar de navigation: Pour concevoir notre page de destination pourquoi ne pas y aller de l'avant et dupliquer ce tableau d'art ici en appuyant sur la commande D dessus. Ensuite, nous allons aller de l'avant et nous débarrasser de tout ce qui se trouve à l'intérieur. Nous allons donc aller de l'avant et sélectionner tous ces calques jusqu'aux rectangles de chaque section. Pour une section que nous avons. Allons de l'avant et cliquez sur Supprimer. Nous allons utiliser cela et placer nos créations ici. Nous allons utiliser le filaire de ce côté-ci pour générer le balisage ici. Allons de l'avant et renommons ce tableau d'art, notre page de destination. On y va. Et celui-là, notre filaire, laisse une référence. La première chose que je voulais mettre en place, c'est la barre de navigation ici. Une chose que je remarque qu'il me manque, c'est que généralement dans une barre de navigation, nous avons également un petit nom barre oblique locale de l' entreprise ici qui ramène l'utilisateur en haut de la page ou revient à l'écran d'accueil. C'est ce que nous voulons dans notre barre de navigation. Passons donc au kit d' interface utilisateur Bootstrap dans XD. Et si vous ne l'avez pas téléchargé, assurez-vous d'aller de l' avant et de suivre les cours précédents afin de savoir comment télécharger celle-ci. Une fois que vous l'avez téléchargé, vous devriez pouvoir trouver une barre de navigation ici, comme vous pouvez le voir comme un tableau d' art appelé barre de navigation, ce que nous recherchons. Bien sûr, ils ont différents types de barres de navigation que nous pouvons utiliser. Celui-ci serait suffisant ici. Allons de l'avant et copions-le. D'ici. Revenez sur notre site Web Healthy Bites et collez-le. Ici. J'ai été collé ici. Donc, nous allons aller de l'avant et juste en parler ici. Maintenant, parce que nous n' avons qu'une seule page ou ici, nous n'avons pas besoin d'en faire un composant. Allons donc simplement de l'avant et utilisons-le tel quel, étirez-le tout au long de notre projet. Et au lieu de 56, on va donner une hauteur de 70. Donc un peu plus grand. Allons de l'avant et centrons maintenant ces liens et déplacez-les jusqu'au bon côté ici. Allons de l'avant et activez notre grille de mise en page ici. Ce que je veux faire, c'est d'aller de l'avant et d'aligner ces quadrants, largeur ou la grille de disposition et ce texte de barre de navigation, que nous voulons en fait aller de l'avant et remplacer par des bouchées saines. On y va. Maintenant, les ressources de ce projet ont ici le logo. Nous allons en traîner un ici. Et on va y aller de l'avant et juste y arriver. Allons-y. Maintenant, allons de l'avant et verrouillons les proportions et faisons la largeur 45, frappez 35. Je pense que ça va mieux paraître. Ici, nous allons l'intégrer et faire glisser texte sur des bouchées saines par ici. Ça a l'air bien. Maintenant, rappelez-vous pour les polices , les couleurs et les choses comme ça, nous reviendrons les appliquer plus tard. Pour l'instant, nous allons nous concentrer sur le fait d'être les principales choses ensemble. Donc, ici, nous allons aller de l'avant et appliquer les mêmes restaurants, contactez-nous et téléchargez l'application. Allons de l'avant et supprimons celui-ci ici. Celui-là, on va faire des restaurants. Nous n'avons donc pas vraiment besoin de type déroulant ou de type désactivé pour l'instant. Nous allons y aller de l'avant et juste dupliquer cela deux fois et contactez-nous. Et maintenant, une chose est que c'est en fait un empilé, chose cool est que vous pouvez aller de l'avant et changer l'espacement entre ces boutons ici. Donc, vous pouvez aller de l'avant et faire, c'est aller de l'avant et faire 20 pixels entre eux. On y va. Celui-là a déjà 20 ans. Parfait. Donc, au lieu de ce restaurant, nous allons télécharger l'application, mais je vais aller de l'avant et revenir ici. Et nous allons faire glisser l'un de ces boutons, comme le bouton Rechercher ici depuis cette barre de navigation. Parce que je veux juste le bouton lui-même dans cette barre de navigation ici. Allez-y et essayez ça. Allez-y et dissociez le composant ici pour la barre de navigation. Et de cette façon, nous pouvons entrer et placer notre bouton de recherche dans la barre de navigation ici. Et nous allons le placer tout en bas, ce qui va le placer du côté droit ici. Obtenez un parcours, débarrassez-vous de ces restaurants supplémentaires et modifiez cette poussée pour télécharger l'application. Parfait. À partir d'ici, nous allions en fait aller l'avant et même modifier l'espacement. Allons de l'avant et augmentons l'espacement ici à 30. En fait. La même chose ici. Ensuite. Maintenant, si vous déplacez ça ici, ça devrait être mieux. Parfait. Maintenant, en désactivant la grille de mise en page, nous pouvons voir que notre barre de navigation est plutôt belle ici. Une fois cela terminé, revenons dans la prochaine conférence pour travailler sur le reste de notre section d'en-tête. 95. Section de l'en-tête: Ils ont tendance à concevoir le reste de notre page d'en-tête. Comme nous l'avons mentionné dans le cadrage, nous voulons une image en arrière-plan, mais avec le nom de l'entreprise et le slogan ici. Allons de l'avant et passons aux images dans les ressources de ce projet. Et nous allons faire glisser cette photo d'en-tête sur notre page de destination. La taille est beaucoup trop grande. Allons de l'avant et maintenons touche Maj et réduisons la proportion tout en maintenant la proportion. On va mettre ça juste ici. Agrandissez un peu en dehors de notre hauteur ici. Et ce que nous allons faire, c'est que nous allons aller l'avant et masquer cette photo sur notre rectangle un calque ici. Une fois que vous aurez cela ici, nous allons déverrouiller ce rectangle d'un calque. Allez-y et sélectionnez-les tous les deux et faites un clic droit sur Masque with Shape. Maintenant, cette image a été en quelque sorte recadrée en fonction des dimensions de ce rectangle et de tout. Allez-y et ramenez cette couche jusqu'au bas. Et ce groupe de masse. Maintenant, nous avons l'image. Allons de l'avant et ajoutons un peu trop. Et nous pouvons le faire en ajoutant un petit rectangle sur le dessus. Par ici. Amenez cela juste au-dessus de notre groupe de masse, réglez le champ au noir et notre opacité, essayons 30 %. Je pense que ça devrait être suffisant. Maintenant, allons-y et ajoutons quelques calques de textes ici. En fait, en réfléchissant , faisons un peu plus sombre, peut-être 38 %. Nous allons donc y ajouter quelques textes ici. Appuyez sur la touche T de notre clavier. Allez-y et tapez des bouchées saines, et nous pouvons à peine le voir ici. Allons donc avec une taille de police de 55. Essayons 75. Il peut y être un peu plus grand. Sortons de là. Remplissez le remplissage en blanc. Déplacez ça juste ici. Activons encore une fois notre grille de mise en page. Nous pouvons aligner correctement les choses. Parfait. Allons de l'avant et créons un texte pour le slogan en faisant glisser ici jusqu'à quelque part ici. Nous allons en faire 45 pour la taille de police et des aliments sains seront livrés directement à votre porte. Et en un clic, c'est là que le slogan pour l'entreprise ici. Une chose que je n'aime pas ici, c'est un espace entre les deux lignes ici. Je pense donc que nous pouvons passer de 54 à ce que nous devons faire. Essayons 85. C'est beaucoup trop. Allons en faire 65. Mieux. Maintenant, si nous désactivons la grille de mise en page, cela a l'air plutôt bien. La seule chose que je veux faire, c'est les réduire un peu plus. Par ici. Je pense que les choses vont bien. Je pense que je veux rendre ma superposition un peu plus sombre ici, donc je vais aller avec quarante-cinq pour cent à la place, juste pour que nous n'ayons pas beaucoup de fusion entre le premier plan et l'arrière-plan ici. Je pense que ça a l'air plutôt bien. Revenons dans la prochaine conférence pour travailler sur notre prochaine section. 96. Section de l'application mobile: Nous avons donc complété la première section d'en-tête de notre site Web ici, ce qui est génial. Je pense que ça a l'air plutôt bien. Et je me souviens que nous reviendrons lors futures conférences pour brosser notre design et rendre encore plus beau et lui donner plus de style. Pour l'instant, nous allons aller de l'avant et passer à notre section sur les applications mobiles. Il s'agit de la deuxième section de notre site Web où nous voulons aller de l'avant et mettre ici une petite capture d'écran de l'application, comme vous pouvez le voir dans nos filaires, ainsi que quelques textes à télécharger. l'application et un petit bouton de téléchargement pour l'application. Nous allons y aller de l'avant et assembler ça dans cette conférence ici. Nous allons donc ouvrir nos ressources pour ce projet ici. Et vous devriez être en mesure de trouver cette application mobile point PNG. Nous allons y aller de l'avant et le copier ou faire glisser sur notre site Web. Nous allons aller de l'avant et le rendre un peu plus petit et maintenir Shift pour maintenir ses proportions. Et les choses quelque part autour, peut-être un peu plus petites, donc c'est tout à fait approprié. En effet. La section ici. Un peu plus grand que ce genre de centre. On y va. Je pense que ça a l'air plutôt bien. Et ROS va de l'avant et activez notre grille de mise en page une fois de plus. Et utilisez-le à notre avantage lorsque nous alignons parfaitement les choses. Nous allons donc y insérer quelques textes sur le côté gauche ici. Si vous revenez aux ressources, vous pourrez trouver l'exemple de point de texte TXT. Et là, vous devriez trouver la section des applications de téléchargement. Et pour le texte ici, nous allons simplement télécharger l'application pour stocker votre commande aujourd'hui. Un peu de copie de ça. Pourquoi ne pas aller de l'avant et simplement faire glisser l'une des zones de texte, celle-ci ici, ici. Et au lieu du blanc, nous allons changer le remplissage en gris. Quelque chose dans ce sens fonctionnerait. Allons de l'avant, alignons cela et amenez-le quelque part ici. Et je vais double-cliquer et modifier le texte en fonction de ce que nous avons. Il y a nos textes, ou nous voulons aller de l'avant et entrer un bouton ici également. Alors que nous conduisons ce bouton ici, composants internes, nous devrions avoir un bouton ici. Il y a un bouton de succès par défaut, et nous pouvons simplement nous en occuper ici. C'est à partir du modèle Bootstrap que nous allons donc simplement modifier le texte de ce bouton pour le télécharger. L'application. Nous avons acheté ici, c'est un peu trop petit. Alors pourquoi ne pas modifier le rembourrage ici pour ajouter plus d'espace entre le texte et le rectangle. Donc, au lieu de neuf et faites 120. Même chose ici pour les 16, passons ça à 40. Ici. Ça a l'air mieux. Nous pouvons juste aligner cela ici. C'est bien. Allons de l'avant et désactivez notre grille de mise en page pour voir à quoi cela ressemblerait. Il se réunit lentement. C'est donc notre section sur les applications mobiles qui revient dans la prochaine conférence pour travailler sur notre populaire section restaurants ici. 97. Section des restaurants: Nous voulons aller de l'avant et passer à notre section restaurants ici. Donc, afin de travailler sur cette partie de l'application, nous allons ouvrir notre kit d' interface utilisateur Bootstrap une fois de plus. Si vous n'avez pas ce fichier à portée de main, vous devriez être en mesure de le trouver à partir de vos fichiers récemment ouverts, qui seraient disponibles sous File et Open Recent. Alors allez-y et trouvez le kit d'interface utilisateur Bootstrap que vous avez téléchargé. Ce que nous voulons maintenant, c'est utiliser l'interface utilisateur de la carte dont ils disposent. Alors pourquoi ne pas aller de l'avant et trouver une interface utilisateur de carte qui fonctionne pour nos cartes de restaurant. Si nous zoomons ici, nous trouverons un petit tableau d'art de cartes. Maintenant, j'aime bien celui-ci ici. Lorsque nous utiliserons celui-ci, double-cliquez pour le sélectionner et continuez et copiez cela. Passer à notre projet de page de destination. Et allez-y et collez ça ici. Allons de l'avant et rendons cela un peu plus grand. Il s'accroche donc à cette partie de la grille. Nous voulons apporter quelques petits changements à cela. Apportez le titre et la description ici. Pour le bouton ici, je veux aller de l'avant et le centrer. Et pour l'image. Revenons à notre panneau Calques. Pour notre image ici, je veux aller de l'avant et l'agrandir un peu. Juste ici. Parfait. Comme nous l'avons appris dans notre projet de conception mobile, nous pouvons soit utiliser des piles et faire une pile horizontale, soit utiliser la grille de répétition. C'est ce que je vais faire ici. Je veux faire Repeat Grid. Et au lieu de passer à la verticale, ce que nous faisions dans notre application mobile, nous allons passer à l' horizontale cette fois avec une grille de répétition jusqu'ici. avons donc quatre. Allons de l'avant et ajustons simplement le dimensionnement ici pour que tout corresponde à notre grille de mise en page. Et on y va. Maintenant, c'est corrigé. Allez-y et copions le texte. piqûres saines ici ou ici. Changez le remplissage cette couleur grise que j' ai pour le texte ici. Allez-y et sélectionnez cela et les commentaires qui prennent le relais ici et faites des restaurants de repos populaires. On y va. Désactivez notre grille de mise en page. ai encore besoin. Si ce n'était pas le cas, l'un des problèmes que nous avons rencontrés avec les grilles de répétition et les composants est que cela ne fonctionnerait pas correctement lorsque nous saisissons des données. Cliquons avec le bouton droit de la souris sur ce tout premier et dissocions le composant. Maintenant, si nous allons à nos ressources, je pourrai trouver cet exemple noms pointillés de restaurant pointillé point TXT. Nous pouvons aller de l'avant et le faire glisser sur le titre de la carte pour le nom du restaurant. Et nous avons également un pour l'exemple de description que le tableau de bord de restaurant point TXT. Allons de l'avant et faites-le glisser sur le texte de la description. Parfait. Double-cliquez sur l'image ici et dissocions également cette image en tant que composant. De cette façon, nous pouvons choisir toutes nos images, une à quatre ici pour les restaurants. Allez-y et copiez ça. Je devrais travailler. Nous n'avons pas vraiment besoin de cette forme ici. Donc, si nous allons de l'avant et supprimons cela à partir de là, cela aura l'air beaucoup mieux. C'est notre section restaurants. Je pense que ça a l'air plutôt bien. Et nous reviendrons les peaufiner dans les prochaines conférences. Donc, pour l'instant, ça pourrait paraître un peu plane. Mais l'idée est de rassembler les éléments dont nous avons besoin avant de revenir et d'y remédier. Enfin, nous avons la section Contactez-nous, donc nous reviendrons dans la prochaine conférence pour travailler là-dessus. 98. Section nous contactez: Passez à la dernière section de notre page de destination ici, la section Contactez-nous. On va y aller de l'avant et mettre ça ensemble. Et nous allons avoir besoin l'image de l'équipe du côté droit ici. Et ensuite, sur le côté gauche, un petit formulaire où nous pouvons mettre un e-mail ou un nom et un champ d' e-mail et un bouton d'ascension. Et ça devrait être assez simple à partir de là. La première chose est d' aller de l'avant et de sélectionner le tableau d'art ici et d' activer notre grille de mise en page. À quoi revenons-nous ? Kit d'interface utilisateur Bootstrap ? Dans cette section de formulaire de notre kit d'interface utilisateur Bootstrap, vous devriez être en mesure de trouver des groupes d'entrée formés. Nous allons donc aller de l'avant et zoomer là-dessus pour pouvoir utiliser un formulaire à partir d'ici. Nous n'avons besoin de rien compliqué, comme des déroulements déroulant ou des choses semblables, mais Bootstrap vous donne accès à ceux-ci. Vous pouvez aller de l'avant et placer des éléments tels que différents types de champs qui pourraient vous être utiles. N'hésitez donc pas à l'explorer. Mais pour l'instant, nous voulons aller de l'avant et trouver une simple saisie par e-mail ici. Allez-y et copiez celui-ci et un bouton en maintenant la touche Maj enfoncée tout en sélectionnant les deux. Nous allons le copier dans notre projet, sélectionner ce rectangle ici et le coller dessus. On va mettre ça quelque part ici. Nous allons aller de l'avant et étirer ça aussi, juste ici. Laissez-moi aller de l'avant et mettez ce bouton sur le côté gauche ici. Redoublons ça une fois de plus. Et au lieu d'envoyer un e-mail, nous allons faire le nom complet. Je vais supprimer ce petit texte de pied de page ici. Je veux aller de l'avant et utiliser taxe pour ce formulaire ici, je veux aller de l'avant et les sélectionner toutes pour utiliser des piles et utiliser la commande G pour les regrouper d' abord, puis faire une pile. Allons de l'avant et réduisons l'espacement entre le bouton d'envoi et continuons et échangeons le nom complet et l'e-mail. Ramenez cet espacement à 15 pixels. Mais allons de l'avant et augmentons cette distance, 250. On y va. Au lieu de l' entrée par défaut qui est placée en premier et en dernier. Et pour l'e-mail, prenons simplement l'exemple sur domain.com. On y va. C'est notre avant-bras. Et puis on va faire une petite image sur le côté droit. Allons de l'avant et revenons à nos ressources. Sous le dossier des images, vous devriez pouvoir trouver une photo d'équipe JPEG. Et ensuite, nous pourrons nous traîner ici. Assurez-vous que les proportions sont verrouillées et faites une largeur de 750. Nous avons rendu cela un peu plus petit pour qu'il s'adapte à notre grille. Centré le long. Retournez les deux éléments et centrez-les également le long de la page. Maintenons la touche Alt enfoncée et faites glisser une copie de ce texte, cet en-tête, et modifions cela pour nous contacter. Je pense que c'est à peu près ce que nous voulons. Si vous désactivez notre grille de mise en page, nous devrions avoir une meilleure idée de ce à quoi cela ressemblera, d'accord ? Pas mal. Une chose que nous pourrions faire est de mettre ce formulaire dans une boîte ou une carte. Allons donc réactiver notre grille de mise en page et travaillons sur cette boîte ici. Faisons donc du rectangle, et allons de l'avant et créons-le ici. Allez-y et trouvez ce groupe de couches depuis plus d'un an et placez-le sous notre groupe quatre. Alors, s'il vous plaît, ici. Nous allons aller de l'avant et dans notre pile et nous allons ajouter un peu de rembourrage de 20 pixels. Maintenant, réduisons cette pile pour qu'elle s'adapte à notre rectangle et amenons ce bouton dans ce coin ici. Et nous pouvons réduire la hauteur de cette boîte à quelque part ici. Maintenant, si nous désactivons notre grille de mise en page, nous pouvons voir que cela semble définitivement plus propre. Nous pouvons même aller de l'avant et faire correspondre la hauteur de ce formulaire à la hauteur de cette image. Pour rendre les choses un peu plus propres. Bien sûr, nous n'en avons pas encore fini. Nous allons revenir peaufiner toutes nos pages et ajouter le texte du bouton ici, puis appliquer le jeu de couleurs approprié et même une police personnalisée. Revenons donc à la prochaine conférence pour commencer à polir notre page de destination. 99. Appliquer notre schéma de couleurs: Allons de l'avant et appliquons le jeu de couleurs que nous avons pour également le jeu de couleurs que nous avons pour le projet à notre page de destination. Prenez donc une seconde ici pour ouvrir votre projet mobile que nous avons conçu. Et allez de l'avant et sélectionnez la section jeu de couleurs ici avec toutes les couleurs que nous avons. Et allez-y et copiez-le à l'aide de la commande C. Switch ici. l'autre côté, ici, dans la plaque de pâte, on va y aller et coller ça dedans. Je vais aller de l'avant et juste mettre ça ici. Et sélectionnons toutes ces couleurs ici si vous vous en souvenez, et cliquez sur l'icône Plus ici pour les transformer en jeu de couleurs pour le projet. Donc, si vous le souhaitez, vous pouvez les renommer. Par ici. Primaire, secondaire. J'ai dit 123. Nous allons le faire comme étant notre dégradé. Maintenant. De haut en bas, nous allons nous frayer un chemin tout au long du design et y appliquer un peu de couleur. Tout d'abord, notre bouton ici, nous allons choisir le remplissage de ce texte. Et dit que le principal pour le tableau de couleurs, nous devons aller de l'avant et copier ce code hexadécimal à partir d'ici. Et jusqu'à la frontière. On y va. Ce bouton a maintenant notre couleur. Ça a l'air bien. Allons de l'avant et sélectionnons le rectangle de ce bas ici, juste un calque rectangle lui-même et définissez-le sur primaire. Ce que nous sommes ici. Allons de l'avant et cliquez sur le bouton ici pour le stocker. Dans l'ordre. C'est remplacer ça au milieu. Et nous allons aller de l'avant et cliquer avec le bouton droit de la souris et dissocier composant pour que cela s'applique tout au long. En second lieu, je pense que c'est mieux sur le côté gauche que sur le côté droit. Peut-être baisser tout ce bouton un peu mieux. Regardons le calque à angle droit et le changeons en son accident une couleur à côté de ce texte ici, x et un. Pour ce texte, nous allons également faire un accident. Nous y allons, beaucoup mieux maintenant pour ce bouton Contactez-nous et changeons la sélection du rectangle et passons ce bouton Contactez-nous et changeons en primaire. Pour le Contact nous, nous allons faire un accident. Appliquons également un peu de couleur à nos arrière-plans. Allons de l'avant et déverrouillons ce rectangle ici. Essayons aussi d'accentuer cet arrière-plan ici. Et changez ce texte en blanc. On y va. Nous laisserons les restaurants populaires sont blancs pour le fond, puis pour le Contact Us déverrouillera la couche et fera l'accident trois. Une fois que vous avez fait cela, il a frappé Command élégant sur ce rectangle pour s'assurer verrouiller. La même chose ici. Parfait. Ça commence à mieux paraître. Revenons maintenant dans la prochaine conférence pour appliquer quelques polices personnalisées au projet ici. 100. 8: J'apprécie vraiment la part du projet dans n'importe quel projet de conception lorsque nous appliquons une police personnalisée au projet et que nous le rendons beaucoup meilleur, plus net et encore plus pertinent pour la marque. Personnellement, j'adore utiliser Google Fonts car c'est une ressource gratuite que vous pouvez utiliser pour trouver et télécharger des polices pour vos projets. Si vous passez à fonts.google.com sur votre navigateur, vous feriez un secondaire. Vous pouvez donc le charger. Vous pourrez accéder à des tonnes de polices à utiliser pour vos projets. Et alors que je traversais ça, la police Poppins ici a attiré mon attention. Si vous ne trouvez pas cette police, vous pouvez retourner à cette page ici et rechercher Poppins ici comme ça, avec un S à la fin. Allez-y et cliquez dessus et cliquez sur Télécharger la famille. Allez-y et enregistrez ce fichier. Une fois que vous l'avez enregistré, vous devriez pouvoir ouvrir ce dossier ici où vous pourrez sélectionner toutes les polices ici, puis double-cliquer pour l' installer sur Mac. Ce processus peut être différent sous Windows, mais sur un Mac, il suffit de double-cliquer pour installer la police. Une fois cela fait, vous pouvez aller de l'avant et simplement fermer ce dossier et ce site Web ici. Nous allons maintenant cliquer sur ces deux textes ici. Copiez-les. Ici. Mettons-les à l'accent de couleur. Sélectionnons-les deux et faisons Poppins ici. Si vous ne voyez pas ce chargement de police, il suffit de fermer votre XD et de l'ouvrir à nouveau, et cela devrait fonctionner pour l'en-tête ici, nous allons choisir un poids moyen. Et nous allons laisser celui-ci comme régulier. Nous allons utiliser celle-ci comme police d'en-tête et celle-ci a mes polices corporelles. Nous allons sélectionner les octets sains. Premièrement, remplacez-le en en-tête, en-tête H1 comme ça. Et utilisez-le comme notre corps. Je vais en faire un autre ici. Au cas où nous aurions besoin d'un en-tête H2 au lieu de 75, nous allons en faire 60 pour celui-ci. Allons de l'avant, sélectionnez-les et ajoutez-les en tant que style de personnage. Ici. On va faire Body Dash Poppins, H12, et renommer celui-ci en chacun. On y va. Sélectionnons maintenant ces octets sains, définissez-le notre H1 et remplacons le remplissage en blanc. Celui-là, on va faire corps change le remplissage en blanc. Et assurez-vous simplement que nos alignements sont corrects ici. On dirait que ces éléments ne sont pas correctement alignés. Utilisez cette grille de disposition à votre avantage. Allez-y et éteignez-le. Et nous allons faire du corps pour celui-là et le changer en blanc. Pour les boutons. Nous allons sélectionner les boutons , puis aller de l'avant et modifier manuellement ce texte ici pour apparaître. On y va. Avant d'oublier ici, nous voulons changer nos polices ici et ici. Parlons donc des octets ici, remplacez-les par Poppins. Et la même chose ici. Sélectionnez celui-ci, remplacez-le par Poppins. Maintenant, rappelez-vous comme raccourci vous pouvez simplement appuyer sur la commande C sur les restaurants et faire l'option V sur vos autres textes. Et cela appliquera la même police. Mais si vous le faites ici sur cette application de téléchargement, il vous suffit de la modifier par deux couleurs primaires car elle copie également sur ce Phil, pour ces textes. Je pense que ces derniers seraient plus beaux comme un poids moyen. Allons donc de l'avant et modifions ces caractères en polices moyennes. On entend supposé être moyen. On y va. Ça a l'air bien mieux. Faisons la même chose pour télécharger l'application, la régler sur moyenne pour qu'elle soit un peu plus épaisse. Nous pouvons le lire plus facilement. Cette page a l'air bien. En allant ici, faisons-en un. Allons sélectionner le texte et le centrer horizontalement. Ici. Allons de l'avant et maintenons la touche Maj et légèrement alt-text ici et remplacez-les Poppins parce que vous pouvez le faire. Vous pouvez modifier plusieurs polices en même temps en maintenant la touche Maj enfoncée et en les sélectionnant. La seule chose que nous avons eu à réparer notre bouton, étendant un peu plus, en nous assurant qu'il est centré. On y va. Lorsque vous modifiez votre police, vous remarquerez peut-être que l'espacement et l'alignement peuvent changer entre vos éléments. Il suffit donc de faire attention à cela et de vérifier tout nous a toujours attaqués. Ça a l'air bien. Notre formulaire. Allons-y un par un. Nom complet. Changez-le pour qu'il apparaisse. Premier dernier e-mail. Sélectionnez ce premier contrôle C. Option Control V. Changez également celui-ci par Poppins. Enfin, ou le bouton Soumettre doit également être Poppins. Et au lieu d'un poids régulier, nous allons faire de la moyenne. On y va. Cela devrait être à peu près polices Oliver dans la page d'apprentissage, ce que je pense que c'est tellement bon jusqu'ici. C'est ainsi que nous appliquons des polices personnalisées qui sont des projets ? Pourquoi ne reviendrons-nous pas lors la prochaine conférence pour peaufiner le reste de notre design et compléter notre page de destination. 101. Ajouter des blobs et des illustrations: J'ai l'impression que nous pouvons en ajouter davantage à notre page de destination. C'est un peu avion en ce moment et je pense que vous pourriez utiliser plus de lipides. Et nous pouvons aller de l'avant et utiliser des plug-ins sympas pour nous aider. J'ai donc deux plug-ins vraiment intéressants à l'esprit que nous pouvons utiliser. Et vous verrez comment ils peuvent nous aider à peaufiner notre design et à le rendre encore meilleur. Sans plus tarder. Revenons à notre onglet Plugins ici. Une fois que vous l'avez sélectionné, cliquez sur l'icône Plus. Et nous allons chercher deux plugins. Le premier, nous allons chercher des gens. Le premier ici, cette illustration humaine. On va aller de l'avant et on va prendre une seconde pour y installer. Laissez-le prendre son temps. Et nous allons aller de l'avant et revenir aux plugins de fonctionnalités aussi recherche blob, Il y a un plug-in globulaire qui devrait apparaître. Allez-y et installez celui-ci pour retourner à notre XD et vous verrez ce que vous verrez tout en haut et en bas. Utilisons donc le plugin populaire ici, qui nous aide à générer ces blobs cool et à recommencer et à réinitialiser. Et il va continuer à générer des blogueurs et vous donner un petit aperçu de ce à quoi il ressemblera. Allez-y et augmentez la complexité. Ou allez-y et rendez-le plus unique ou moins unique que vous le souhaitez. Vous pouvez même aller de l'avant et définir la teinte à partir d'ici. Bien sûr, nous allons changer cela dans une seconde. Allons de l'avant et insérons simplement ce blob. vôtre peut être différente, bien sûr, mais c'est tout à fait très bien. Vraiment non, bon ou faux blob ici, si vous avez tous un blob inséré, allons-y et revenons à notre bibliothèque. Et je veux faire l'accent trois couleurs pour celui-ci. Revenons maintenant à notre onglet plugins et revenons arrière et insérons l'illustration humaine. De là, nous avons accès à de nombreuses illustrations plutôt intéressantes à utiliser pour nos projets et tout ce qui utiliser pour nos projets et est pertinent pourrait s'appliquer. Vous pouvez même aller de l'avant et faire preuve de créativité et ajouter différentes parties ensemble. Une sorte de Lego pour l' illustration ici. Ou vous pouvez simplement choisir ce que vous voulez. Nous allons rester simple et sélectionner celui-ci ici. Nous garderons les choses simples et sélectionnerons celui-ci ici. Il a été copié dans le presse-papiers afin que nous puissions appuyer sur Commande V. Collez cela ici, agrandissez un peu ou maintenez la touche Maj enfoncée. Je vais revenir à l' illustration humaine une fois de plus. Glissons cette petite table ici. Encore une fois. Cette fois, on va faire la lampe. Et il suffit d'apporter ça ici. Pour ce dernier ici, je vais aller de l'avant et double-cliquer dessus et rendre celui-ci un peu plus court ici. Je pense donc que c' est plutôt cool. Nous pouvons venir ici et en ajouter une derrière notre application si vous le souhaitez. Plugins lobulaires. veux le réinitialiser jusqu'à ce que je reçoive quelque chose que j'aime. Allez-y et insérez-le à l'arrière et utilisez la commande et le support ouvert jusqu'à ce que je l'ai sous l'application ou l'appareil mobile. Et maintenant, nous avons du mal à le sélectionner. Nous devons donc revenir aux couches et sélectionner ce chemin acheter vers des bibliothèques et définir le bloc sur. Essayons la couleur dégradée. Ça a l'air plutôt cool. Nous pouvons le faire une fois de plus pour photo de notre équipe ici. Et même insérez cette photo d'équipe en tant que blob pour que nous puissions le masquer. Alors allons de l'avant et sélectionnons les plugins, réinitialisez-les plusieurs fois jusqu'à ce que nous ayons quelqu'un qui a regardé, qui aurait fière allure pour la photo de notre équipe. Je veux quelque chose qui continue de le réinitialiser jusqu'à ce que je trouve quelque chose que j'aime. Réduisons le caractère unique et voyons ce que nous obtenons. Je suis un peu trop difficile ici. Je pense que tout cela devrait vraiment fonctionner aussi bien. Allez-y et créez, allez de l'avant et utilisez-le ici. Et allez-y et zoomez. Donc, il prend en quelque sorte le contrôle de la photo. Et nous allons aller de l'avant et sélectionner la fois le calque d'image en dessous et blob et faire Masque avec forme. Nous devons simplement agrandir cette image un peu , comme celle-ci. Ensuite, nous allons de l'avant et veillez simplement ce qu'il soit bien ajusté. Maintenant, nous pouvons rendre cela un peu plus petit. Ça correspond bien à notre forme ici. Encore une fois. Activons cette grille de mise en page et les éléments correctement alignés ici. Et assurez-vous que nous avons utilisé cet alignement ici. Ou la forme a l'air bien aussi, donc c'est plutôt bon. Désactivez la grille de disposition et nous l'avons. C'est ainsi que nous pouvons utiliser certains blobs pour créer des effets cool. Les nausées peuvent voir lentement nos pages de destination devenir plus raffinées et paraître plus intéressantes lorsque nous reviendrons dans la prochaine conférence pour faire un dernier polissage. Et juste après, nous allons exporter notre page de destination. 102. Polissage de notre page d'accueil: Que pensez-vous avoir fini avec le projet ? C'est donc toujours une bonne idée de parcourir rapidement tout le design de haut en bas ou de gauche à droite en fonction de l' endroit où vous travaillez et de faire un peu de polissage de tout ce qui s'y trouve. Donc, lorsque nous partons de la barre de navigation en haut, qui me semble plutôt bonne, nous pouvons sélectionner ces champs ici pour le restaurant et nous contacter et enthousiasmer l'accident d'une couleur. Tout le reste ici semble bien. S'assurer qu' ils sont en quelque sorte centrés le long de notre page, ce qui est maintenant. Je veux m'assurer qu'ils sont également centraux ici. Parfait. Allons de l'avant et retirons cette bordure du rectangle ici. Même chose ici avec cet autre rectangle. Vous ne voulez pas manger de frontière entre eux. Et la même chose ici avec ce rectangle d'alertes journaux, nous pouvons le déverrouiller et supprimer la bordure. Et je vais le verrouiller. Enfermons celui-ci ici. Commande L ici, Commandement L. On y va. En bas, ici. J'aime beaucoup la façon dont mes cartes sont trop pointues. Nous allons donc ajouter un peu de rayon d'angle à l'image, mais seulement en haut à droite et en haut à gauche. Alors maintenons Option pendant que nous le définissons sur un rayon d'angle de 15 pixels ici. Et vous pouvez voir les pixels sur le côté gauche. 15, je pense que ça a l'air bien. Et nous pouvons appliquer la même chose ici. ce moment, il est déjà fixé à cinq, mais je veux le remplacer par 15. Ça pourrait paraître mieux. Ça a l'air mieux. Je vais sélectionner l'arrière-plan ici. Faites également 15 pour celui-ci, double-cliquez et faites 15 pour celui-ci, et enfin 15 pour celui-ci. Et vous pourriez vous demander pourquoi répétons-nous ce processus de réutilisation d'une grille de répétition ? La réponse est simple. Lorsque vous avez un composant car il s'agit d'un arrière-plan de carte en tant que composant. S'il s'agit d'un élément, nous devons apporter ce changement à chaque fois plutôt qu'une seule fois et en finir avec. Maintenant, je veux ajouter un peu d' ombre à nos cartes ici. Mais le problème avec Repeat Grid est qu'il n'est pas très efficace d'y ajouter des ombres. Allons de l'avant et dissocions cette grille. En d'autres termes, avec une grille de répétition. Et allons maintenant sélectionner un calque d'arrière-plan barre oblique de panier d'arrière-plan ici et double-cliquez pour sélectionner ce calque rectangle et appliquer une ombre portée. Nous allons faire un flou de 20. Laissez tout le reste pareil. Je pense que c'est beaucoup mieux. Nous allons ensuite copier cela et sélectionner ce rectangle ici. Double-cliquez tout le long. Appuyez sur Commande, Option V. Même chose ici. La même chose ici. Il a l'air beaucoup mieux. Par ici. Allons de l'avant et sélectionnons ce rectangle ici. Et je veux supprimer la bordure et utiliser la commande Option V pour coller cette bordure ici et un rayon d'angle qui s'est automatiquement appliqué. Donc, ça a l'air beaucoup mieux. Je pense que nous pouvons le rendre un peu plus large ici. Je vais donc demander à Alt de l'élargir. Et ça a l'air un peu en avion ici. Donc, lorsque nous ajoutons un texte au milieu pour dire entrer en contact, nous ne pouvons pas le voir parce qu'il est blanc. Alors sortons de là et appliquons un accent. La couleur ici. Je pense que le corps ici est un peu trop grand, alors passons la police à 25. Juste ici. C'est beaucoup mieux. Sélectionnez ce calque, cet arrière-plan pour déverrouiller et supprimer à nouveau la bordure, verrouillez-la à nouveau. Maintenant, je crois qu'aucun d'entre eux ne devrait avoir de frontières. Je pense que notre projet est assez affiné et prêt à être lancé. Cela dit, je vais vous donner un exercice pour créer un prototype à partir de cette page de destination. Et allez-y et connectez également ces boutons à votre prototype. Et nous le ferons ensemble lors de la prochaine conférence. 103. Créer un prototype: Très bien, créons un prototype pour notre page d'alignement. Si vous cliquez dessus et que vous le prévisualisez sur notre bureau dès maintenant, il pourrait être un peu trop gros, donc nous pouvons aller de l'avant et définitivement le rendre plus petit ici. Allez-y et réglez ça ici. Donc, ça a vraiment l'air cool. Bien sûr, il n'y a pas trop de choses que nous puissions nous connecter ici. La seule chose que je veux vraiment connecter, c'est notre barre de navigation ici. Nous allons donc réparer cette barre de navigation pour qu'ils puissent naviguer entre ces pages. Allons donc dans nos bibliothèques, sélectionnez la barre de navigation ici. Et veillez à ce que nous ayons toutes ces couches. Maintenir la touche Maj sélectionnée et faire la commande G. Et nous allons nommer ce groupe suffit. Et assurez-vous simplement en le cachant qu'il y a tout ce dont nous avons besoin. Oui, c'est le cas. Et je ferai une position fixe lors défilement et j'apporterai le calque, comme vous l'avez deviné jusqu'au sommet du projet. Ainsi, lorsque nous l'avons prévisualisé, il devrait rester en haut, qui est ce que nous voulons. Nous voulons quelques liens ici. Nous voulons des bouchées saines. Lorsque vous cliquez dessus pour nous ramener jusqu'à cette page ici. Lorsque vous cliquez sur restaurant, nous voulons accéder à cette partie de l'application. Lorsque nous cliquons sur Contactez-nous, cette partie de la page de destination est désolée. Et l'application de téléchargement devrait nous amener à cette section ici. Ou bien, l'application de téléchargement peut également accéder au même lien que celui-ci ici. Maintenant, parce que nous utilisions Bootstrap, ils ont déjà une sorte d'état de survol pour leurs composants ici. Nous allons aller de l'avant et nous en débarrasser aussi à partir de là. Donc, afin de bien prototyper, nous allons aller de l'avant et regrouper chaque section ensemble. Tous les éléments du groupe. Allez-y et regroupez simplement la section entière ici à l'aide de la commande G. Ce sera donc notre section d'en-tête car la couche rectangle a été enregistrée, elle n'a pas été glissée dans ce groupe. Il suffit d'aller de l'avant et de le faire glisser dans le groupe d'en-têtes. Assurez-vous juste que nous le réduisons jusqu'au bout. Nous voulons nous assurer que nos planches de navigation se trouvent tout en haut des couches. Ce rectangle, que j'ai déverrouillé, devrait également entrer dans l'en-tête. Juste en dessous, ici. Je crois que ce groupe de masse est à notre image. Faites-le glisser dans l'en-tête ici. Pour notre page d'application, Allons de l'avant et regroupons tout ensemble, sélectionnons tout et faisons y compris le blob ici en maintenant la commande et en faisant Commande G. Donc cela devrait être notre section d'application. Je n'apporterai pas ça juste en dessous de l'en-tête. Les restaurants populaires vont de l'avant et il suffit de sélectionner tous ces restaurants. Hit Command G. Et bien sûr, nous devons simplement amener notre calque rectangle, rectangle trois ici, le rectangle trois ici, le déverrouiller et l' amener impulsif en groupe. Ce groupe ici, mais tout en bas et renommez le groupe pour le remplir. Russ, section transe. Apportez ça ici. Et pour le Contact Us, faisons la même chose. Sélectionnez tout la commande G. Déplacez ce rectangle ici pour regrouper le bas de celui-ci et faire la section contact et l'amener en bas. Maintenant, c'est beaucoup plus organisé. Nous pouvons aller de l'avant et vérifier chaque groupe. Une chose que je veux faire est de lire verrouiller ces calques rectangles. Nous n' interagissons pas accidentellement avec eux. Maintenant que nous avons cela, continuons et connectons notre barre de navigation à l'aide de l'onglet Prototype. Sélectionnez les bouchées saines et nous allons cliquer pour ajouter une infraction et nous allons aussi faire défiler. Nous allons choisir l'en-tête Layer. Quel que soit l'endroit où vous vous trouvez sur la page de destination, nous allons revenir jusqu'à la section d'en-tête. Faisons une entrée et une sortie faciles. Et au lieu de 0,3, faisons 0,6. Maintenant, pour le restaurant, nous allons interagir et nous allons faire défiler jusqu'à la section restaurants. Laissez tout le reste a ça. Vous l'avez deviné pour le Nous contacter. Nous allons faire défiler jusqu'à la section Contactez-nous pour l'application de téléchargement. Lorsque nous faisons défiler également, section Applications. Maintenant, tout est connecté. Comme on s'y attend. Nous allons aller de l'avant et supprimer cet état de vol stationnaire d'ici. Et ici, nous allons faire la même chose ici. Supprimez cet état de survol. Maintenant, payez, allez-y et prévisualisez cela. À chaque défilement vers le bas, nous pouvons cliquer sur des bouchées saines pour faire défiler cette sauvegarde. Vous pouvez consulter la section restaurants, section Contactez-nous et la section Télécharger des applications. Superbe. Je pense que c' est génial, parfait. Donc, nous l'avons là. 104. Enregistrer notre prototype: Ce que je veux vous montrer, c' est que vous pouvez également créer des enregistrements de votre prototype si vous avez enregistré une vidéo ici et l'aperçu du bureau, si vous êtes sur un Mac, vous pouvez obtenir à accorder l'autorisation de l'application. Allez-y donc et ouvrez les préférences système pour accorder ces autorisations. Vous devrez peut-être ajouter ce point, quitter et rouvrir XD. Allez-y et permettez à Mac de le faire. Mais une fois cela fait, vous pouvez ouvrir l'aperçu, sélectionner la page de destination, puis continuer et cliquer sur l'enregistrement. Maintenant, comme vous pouvez le voir , c'est un enregistrement. Je peux aller de l'avant et interagir avec le site Web comme je le souhaite, et montrer aux gens comment il fonctionne. À tout moment, je peux arrêter l'enregistrement et enregistrer ce fichier où je le souhaite. Faites une démonstration de site Web saine. Laissez-moi aller de l'avant et sauvegarder ça. Maintenant, ici, dans mes ressources, je peux ouvrir cet enregistrement et le regarder pour voir comment nous avons fait. C'est génial. Cool. C'est ainsi que vous pouvez également enregistrer vos prototypes dans XD. Cela vient compléter notre projet de page de destination. J'espère que vous avez pu apprendre beaucoup de choses tout au long de ce processus. Et je pense que nous avons appris beaucoup d'outils utiles, fonctionnalités, de modèles et de plugins, et comment utiliser XD. Génial. 105. Conclu: Très bien, bravo. Après avoir terminé ce cours, nous avons fait un travail incroyable en commençant avec Adobe XD, en alertant ce qu'il a à offrir tout au long de la conception ou de deux projets sur l'application mobile pour la livraison de nourriture. service, octets d' aide et le site Web que nous avons créé pour eux. Et seul papa qui créerait des prototypes interactifs pour les deux projets que nous pouvons maintenant partager avec ses amis, collègues, clients, et leur montrer ce que nous avons fait et comment ce produit pourrait fonctionner. C'est incroyable, et ce n'est que le début pour vous en tant que designer. À partir de maintenant, je vous encourage à prendre des projets de design et à continuer à vous inspirer des projets et produits auxquels vous avez accès à toutes ces bases, les applications de votre téléphone, vers les sites Web que vous naviguez. J'adore garder un dossier de tous les designs qui m'ont inspiré afin de pouvoir l'utiliser dans mes futurs projets de design. Je suis super content toutes les différentes parties que nous avons abordées tout au long ce cours car nous avons couvert une tonne de composants, piles de grille de répétition, de la façon ajouter des animations à nos prototypes. Et beaucoup de petits outils et de plug-ins utilisés pour peaufiner votre design et le rendre meilleur. À partir de là, j' aimerais vous souhaiter bonne chance et j'espère vous voir dans les prochains cours.