Intro à la conception d'applis mobiles avec Sketch

1. Introduction: Bonjour, je suis Andrew Mercando. Je suis concepteur de produits numériques ici chez Skillshare. Donc, en tant que concepteur chez Skillshare, je travaille sur le processus de conception complet, que ce soit pour dessiner de nouvelles fonctionnalités, mettre en place des cadres métalliques que notre équipe d'ingénierie peut commencer à tailler et à construire, ou la conception de l'interface utilisateur pour, disons, notre application iPhone ou un site Web. Donc, dans ce cours, nous allons nous concentrer sur ce dernier morceau. Je vais vous apprendre à créer très rapidement de belles interfaces utilisateur en utilisant Sketch. Je pense que c'est le moment idéal pour apprendre Sketch. C' est l'un des outils de conception les plus récents, mais c'est vraiment un outil qui est construit à partir de zéro pour les interfaces utilisateur [inaudible]. Donc, il y a un tas de fonctionnalités qui vous permettent de sortir des idées de votre tête et de l'écran de manière à ce que vous puissiez rapidement voir les résultats de vos idées et de votre travail. Donc, je pense que ce cours est idéal pour tous ceux qui veulent avoir leur premier goût de la conception d'applications mobiles. Nous allons couvrir les bases de Sketch, de sorte que des choses comme créer vos premières formes et styliser vos formes dans votre texte pour faire une expérience iPhone vraiment belle. À la fin de cette classe, vous devriez avoir une très bonne compréhension de l'outil et de ce qu'il peut faire, et comment vous pouvez vraiment l'utiliser pour faire n'importe quelle idée que vous avez possible. 2. Projet : concevoir une appli de to-do list: Ce cours est vraiment pour les débutants, donc vous n'avez pas besoin d'expérience pour venir à ce cours. Vous n'avez pas besoin de connaître d'autres logiciels, nous allons vraiment partir des bases mêmes du sketch et tout au long des leçons vraiment construire sur ces concepts de base et très rapidement nous concevoir un très beau To- Do List App. Je pense que To-Do List App est un grand premier projet de conception de l'interface utilisateur, donc notre application va être vraiment simple. Cela ne va pas être une tonne d'écrans, mais cela va vous permettre d'être vraiment créatif avec la façon dont vous voulez concevoir l'application Liste des tâches. Je vais vous accompagner dans la conception de ma propre application de liste de tâches, et vous apprendrez tout sur les bases du croquis et comment produire très rapidement de haute qualité, belle conception d'interface utilisateur. Je suis vraiment excité de voir ce que vous venez avec. Assurez-vous de télécharger votre projet dans la Galerie de projets Skillshare, et je vais passer en revue et laisser des commentaires et des commentaires sur ce que vous créez. 3. Formes, textes et style simple: Hé, les gars, bienvenue à votre première leçon. Si vous n'avez pas déjà téléchargé Sketch, rendez-vous sur bohemiancoding.com. À partir de cette page, vous pourrez télécharger un essai gratuit. Une fois que vous serez tous configurés et installés, nous commencerons tout simplement à créer un tout nouveau fichier Sketch. Une fois que vous êtes tous configuré et installé, ouvrez le fichier Sketch que je vous ai lié dans l'onglet projet de classe sur skillshare.com. Dans cette vidéo, nous allons passer en revue quelques-unes des bases de Sketch. À la fin, vous apprendrez à créer des formes comme des rectangles, des cercles et même des rectangles plus complexes pour créer une photo de couverture de projet comme vous le voyez ici. Commençons à recréer cette photo de couverture du projet. Donc, la première chose que nous allons vouloir faire est d'insérer un nouveau rectangle sur notre toile Sketch. Vous pouvez insérer tout ce que vous voulez dans le canevas Sketch en accédant à cette liste déroulante d'insertion dans le coin supérieur gauche de l'interface. Ici, vous avez tout ce que vous pouvez mettre sur la toile Sketch. Nous allons passer en revue la plupart de ces choses dans cette classe, mais pour l'instant, commençons par la forme et choisissez le rectangle. Vous pouvez également utiliser la touche de raccourci R pour accéder rapidement au rectangle. Vous verrez que mon curseur a changé en réticule avec un petit carré à côté. Donc, ce que vous allez vouloir faire maintenant est de cliquer et de faire glisser pour créer votre rectangle. Ne vous inquiétez pas trop de la taille parce que nous allons ajuster cela dans une seconde. Super, donc vous avez créé votre premier rectangle. Alors maintenant, nous allons l'ajuster un peu. Si nous allons ici à droite de Sketch, vous verrez que nous avons notre panneau inspecteur, et c'est là que nous pouvons ajuster toutes les propriétés de nos formes ou tout ce que nous avons sélectionné dans Croquis. Commençons donc par changer sa taille. Vous allez sélectionner le champ de texte de largeur et faisons que 800 et appuyez sur Entrée. Vous verrez que la largeur de votre forme mise à jour dès que vous appuyez sur Entrée, et maintenant, nous allons aussi juste faire 450 pixels de hauteur. Super. Donc maintenant, nous avons un rectangle dans la taille exacte que nous voulons. Donc, la prochaine chose que je vais vouloir faire est en fait faire ce rectangle une couleur différente. Donc, si nous allons à cette section de remplissage dans le panneau de l'inspecteur et cliquez sur cette petite boîte grise, vous verrez une petite info-bulle venir qui a un tas d'options différentes pour coiffer ce rectangle. Donc, je peux changer la couleur en sélectionnant simplement la couleur que je veux à partir de ce petit sélecteur de couleurs. Je peux également utiliser l'une des options de couleur prédéfinies de Sketch. Alors allons-y et rendons notre rectangle bleu. Donc je suis assez heureux avec cette couleur bleue. Donc, je vais cliquer dehors pour fermer ce sélecteur de couleurs. Vous verrez juste en dessous il y a une autre section appelée bordures. Les bordures vous permettent de contrôler sont le style du contour de votre forme. Laissez-moi faire ce 10 pixels de large afin que vous puissiez mieux voir de quoi je parle. Donc, la bordure est fondamentalement juste un contour de votre forme. Vous pouvez choisir l'endroit où il est placé, donc soit à l'intérieur au centre ou directement à l'extérieur de votre forme, et tout comme les remplissages, vous pouvez également ajuster sa couleur. En fait, je ne veux pas de bordure sur mes formes, alors je vais aller de l'avant et décocher ça. Alors ensuite, faisons un cercle. Vous pouvez soit aller dans la liste déroulante d'insertion, soit vous pouvez simplement appuyer sur O pour créer un nouvel ovale. Donc, cette fois, lorsque vous cliquez et faites glisser, je veux que vous maintenez la touche Maj enfoncée. Ce que vous verrez ici, c'est que vous faites glisser la hauteur et la largeur du nouvel ovale que vous créez ou restez la même. Je vais aller de l'avant et centrer ce cercle. Donc, vous verrez ici dans la taille, nous avons créé un ovale qui mesure 230 pixels de large par 230 pixels de haut. Parce que nous avons maintenu Shift vers le bas pendant que nous la créions, les proportions de cette forme sont des contraintes. Si vous allez de l'avant et faites glisser ceci pour le redimensionner, vous verrez qu'il reste toujours la même largeur et la même hauteur. Vous pouvez désactiver cette option en cliquant sur ce petit verrou entre la largeur et la hauteur dans le panneau de l'inspecteur. Pour l'instant, je vais le laisser allumer parce que je veux que ce soit un cercle parfait. Je vais aller de l'avant et le centrer dans mon arrière-plan. Vous verrez que cette petite ligne directrice rouge apparaît indiquant que vous avez maintenant centré votre cercle. Donnons un style à ce cercle. Je vais éteindre sa frontière et je veux juste la rendre blanche. J' utilise donc une des couleurs globales de Sketch pour changer ça en blanc. Impressionnant. Donc, j'ai maintenant un fond et un cercle. Allons de l'avant et créons notre coche maintenant. Alors pensons à ce qu'est une coche. Fondamentalement, c'est deux rectangles qui se chevauchent. Alors je vais aller de l'avant et les dessiner maintenant. Faisons notre premier rectangle de 20 pixels de large par 100 pixels de haut, et nous allons juste faire un deuxième rectangle de 20 pixels de haut en le rendant 60 pixels de large. Super. Alors, positionnons juste ces deux-là l'un sur l'autre. Donc, ce que nous voulons faire maintenant, c'est prendre ces deux rectangles et les transformer en une seule forme. Donc, ce que vous allez vouloir faire est de sélectionner vos deux rectangles et d'aller ici à vos options de forme composée. On va passer en revue le premier. Donc, ce que fait l'union, c'est qu'elle prend deux formes qui se chevauchent et crée une forme en les combinant, alors allez-y et cliquez sur union. Donc, vous verrez maintenant ce que vous avez n'est qu'une forme de nos deux rectangles qui peut être stylée et éditée comme une seule. Donc, je vais aller de l'avant et faire tourner ce négatif de 45 degrés pour faire une coche et juste aller de l'avant et positionner ça juste au-dessus du cercle. Impressionnant. Alors, faisons notre prochaine forme composée. Donc, si vous sélectionnez votre coche et votre cercle, vous monterez ici et essayons l'outil de soustraction. Donc, ce que cela fait, c'est qu'il soustrait la forme supérieure de la forme inférieure. Donc, ce que cela a fait, c'est qu'il a créé une forme avec une coche découpée. Donc, la prochaine chose que je vais vouloir ajouter à ma photo de couverture de projet est le titre de notre application. Donc, pour ce faire, j'ajouterai un calque de texte à mon canevas. La touche de raccourci pour la couche de texte est T et je vais juste aller de l'avant et cliquer. Donc, ce que vous voyez est un texte prérempli qui dit taper quelque chose et il est sélectionné jusqu'à présent. Je commence juste à taper le nom de mon application, Todo App, il apparaît juste sur ma toile. Vous pouvez appuyer sur escape pour sortir du mode d'édition de texte. Impressionnant. Alors changeons le style de notre texte maintenant. Donc, dans le panneau de l'inspecteur, vous voyez que j'ai quelques options spécifiques au texte ici. Le premier est la police de caractères. Cela va essentiellement tirer n'importe quelle police de caractères que vous avez installée sur votre ordinateur. Je vais changer le mien en Bell Gothic pour l'instant et continuer à coiffer mon texte. Sous la police et le poids, vous avez d'autres options. Donc, dans ce petit rouage, vous pouvez faire des choses comme ajouter un soulignement ou un biffé ou changer votre texte en liste. De même que vos calques de forme, vous pouvez choisir différentes couleurs pour votre texte. Je vais aller de l'avant et laisser le mien blanc, et vous pouvez également ajuster la taille de votre texte. Alors je vais faire le mien 48. Parfois, ces petites info-bulles ne se ferment pas, mais si vous cliquez simplement sur le bouton couleur, il se rejettera généralement. Ainsi, vous avez également le contrôle de l'alignement de votre texte. En ce moment, le mien est à gauche, donc tout texte que j'y ajoute va juste être ajouté à gauche. Je vais en fait vouloir centrer ça. Donc, lorsque j'ajoute du texte à ce titre, il va juste aller de l'avant et se centrer lui-même. L' option suivante que vous avez est la largeur. Donc, il y a deux options ici. Si vous cliquez simplement lorsque vous créez votre calque de texte, vous allez créer une largeur automatique. Fondamentalement, ce qui est bon pour est une seule ligne de texte. Si je continue d'ajouter à cette ligne de texte, vous remarquerez qu'il ne s'enroule jamais. Si je voulais créer un paragraphe de texte, je peux soit le changer en corrigé ; soit pendant que je crée mon calque de texte, je peux cliquer et faire glisser pour créer un calque de texte d'une certaine dimension. Laisse-moi changer ça en noir. En tapant ici, vous remarquerez les mots Wrap. C' est donc mieux si vous composez un paragraphe ou une zone de texte multi-lignes. Pour l'instant, je vais aller de l'avant et supprimer ça. Sous la largeur, vous pouvez également ajuster l'espace entre vos caractères, votre hauteur de ligne et l'espacement des paragraphes si vous voulez créer un champ de texte de largeur fixe. Je n'aime pas cette police de caractères que j'ai choisie, donc je vais retourner à Avenir et ne pas le rendre plus audacieux. Je vais juste en faire un moyen simple. Impressionnant. Donc, nous avons un excellent début à notre photo de couverture de projet. Dans la prochaine vidéo, nous allons apprendre comment faire un style plus avancé pour créer quelque chose de vraiment unique que nous pouvons ensuite télécharger sur Skillshare. 4. Style avancé et peaufinage: D' accord. Maintenant que nous avons une poignée sur certaines des bases de l'esquisse, faisons un style plus avancé. Donc, la première chose que je veux faire est de parler de certaines options de remplissage que nous avons. Donc, si vous allez de l'avant et sélectionnez votre arrière-plan ici, vous saurez dans la dernière vidéo que nous avons fait juste un remplissage très basique de bleu. Sketch est cependant assez puissant car il vous permet d'ajouter plusieurs remplissages à n'importe quel objet sur son canevas. Donc, si vous allez ici à la section de remplissage et appuyez sur cette petite icône plus, vous remarquerez que nous avons maintenant deux remplissages différents sur cet objet. Donc, ce que nous avons ici, c'est un remplissage dégradé. Avec un dégradé, vous pouvez contrôler des choses comme la direction du dégradé, vous pouvez également modifier la couleur du dégradé en sélectionnant l'un de ces points de terminaison et en ajustant le dégradé à l'aide de votre sélecteur de couleurs. Donc, laissez-moi aller de l'avant et rendre ça un peu plus profond d'un bleu ici, et par ici, ça a l'air plutôt cool jusqu'à présent. Alors, explorons quelques-unes des autres options de remplissage. Donc, vous avez aussi des choses comme des gradients radiaux, donc cela va nous faire un dégradé émettant à partir d'un point central, gradients angulaires ou quelque chose appelé des remplissages de motif. Donc, ce que sont les remplissages de motif est fondamentalement, croquis remplira votre zone avec une image de votre choix. Je vais ajouter un remplissage d'arrière-plan, mais je vais choisir ce petit papier graphique qui regarde grille ici. Je peux ajuster l'échelle de mon rayon de remplissage à partir d'ici. Alors, laisse-moi faire ça à 55 ans, ça va bien, et je fermerai le sélecteur de remplissage. Maintenant, je n'ai pas de contrôle granulaire de la couleur de ce remplissage, mais ce que je peux faire est de changer son mode de fusion et aussi son opacité. Alors, laissez-moi aller de l'avant et changer ça pour une opacité de 20 pour cent. Je vais frapper Entrée et puis peut-être multiplier bien que juste laisser la normale convienne probablement à mes besoins. Impressionnant. Donc, maintenant j'ai ce papier de grille cool regardant dégradé rempli fond. Donc, la prochaine chose que je veux faire est de parler d'ajouter des ombres portées à nos objets. Donc, si je coche ma coche et descend ici la zone des ombres dans le panneau inspecteur et en ajoute une nouvelle, vous verrez qu'une petite ombre portée a été ajoutée à ma composition. J' ai un contrôle total sur cela donc si je veux faire le décalage x et y 00, donc c'est directement en dessous, vous obtenez juste cette lueur autour. Je vais faire ça pour te montrer à quoi ça ressemble. Ça commence vraiment à donner l'impression qu'il sort un peu de l'écran. Ça lui donne un peu de profondeur, ça plane sur mon arrière-plan. Je vais en faire six, et vous pouvez aussi faire des choses comme changer la couleur réelle et l'opacité de cet arrière-plan. Je suis assez satisfait des paramètres par défaut, mais si je voulais en faire un rouge, ce qui est difficile à voir car c'est si transparent, vous pouvez le faire aussi. Les ombres peuvent être appliquées à n'importe quel objet. Donc, vous pouvez réellement aller de l'avant et ajouter une ombre à votre texte également. Donc, je vais en faire six, et maintenant le texte a l'air d'apparaître aussi. D'accord. Donc, maintenant que vous connaissez votre chemin autour du croquis, ce que je veux que vous fassiez, c'est styliser votre photo de couverture de projet comme vous voulez. Tu peux devenir fou un peu. Pensez à cela comme une occasion de vraiment définir le ton et la direction artistique pour le reste de votre application. Lorsque vous aurez fini de coiffer votre photo de couverture, nous allons l'envoyer dans la Galerie de projets SkillShare, afin que vous puissiez montrer au reste de vos camarades de classe ce que vous essayez de créer. 5. Exportation et téléchargement: Maintenant que vous avez votre photo de couverture de projet comme vous le souhaitez, je veux parler un peu des couches et de la bonne hygiène pendant que vous concevez un croquis. Donc, vous remarquerez sur le côté gauche de l'interface d'esquisse que vous avez une liste de tout ce que vous avez ajouté à la toile d'esquisse jusqu'à présent. Ce que cette liste vous permet de faire est de commander votre objet afin que vous puissiez placer les choses devant ou derrière l'autre. Vous pouvez également développer vos formes composées pour ajuster chacune des formes qui composent de manière granulaire et, surtout, vous pouvez renommer ces calques. Donc, ce que j'aime faire, c'est juste rester vraiment organisé et renommer ma couche pour qu'elle soit facile à trouver et à vous retrouver. Alors, allons de l'avant et appelons ceci un arrière-plan. Nous allons changer le nom de ceci en cochant et nous pouvons laisser notre texte tel qu'il est, esquissé par les noms par défaut, vos calques de texte, quel que soit votre type de texte. Impressionnant. Donc, maintenant nous avons un joli fichier de conception propre. Une autre caractéristique de l'esquisse qui vous aide à rester organisé est le regroupement. Alors, qu'est-ce que je veux dire par là ? Donc, si je vais sur mon canevas et que vous pouvez également le faire à partir de votre panneau de calques et sélectionner tous mes calques et appuyer sur la commande G, vous verrez qu'il a tout réduit dans un dossier. Donc, fondamentalement ce qu'il s'agit d'un groupe et d'un croquis. Donc, je peux nommer ce groupe, donc je vais juste l'appeler photo de couverture et maintenant sketch va traiter cela comme un seul objet. Donc, si je clique dessus, il sélectionnera le groupe et je peux le faire glisser et tout ce qui est dans ce groupe se déplacera ensemble. Si je veux sélectionner des choses dans le groupe, je peux soit maintenir la commande enfoncée et cela me permettra de sélectionner profondément dans le groupe ou je peux double-cliquer sur des objets et cela me permettra d'aller d'un niveau plus profond dans les regroupements. Maintenant que j'ai ma photo de couverture de projet groupée, je peux aller de l'avant et la sélectionner et si je descends dans le coin inférieur droit de l'interface de croquis, il y a cette petite zone appelée make exportable. Ce que cela me permet de faire est de sélectionner la taille et le type de fichier que je voudrais exporter ce groupe afin que je puisse utiliser ces fichiers en dehors de l'esquisse. Donc, je peux choisir divers fichiers image de PNG au PDF en SVG. Je vais quitter le mien PNG. Je peux également faire plusieurs exportations des mêmes options. Donc, si je conçois pour iPhone et que j'ai besoin de graphiques à 2x ou 3x, je peux le faire aussi. Si j'ai besoin à la fois des PNG et des SVG, je peux aussi les exporter d'un seul coup. Je vais effectivement supprimer ces deux options. Si vous appuyez sur Exporter la photo, vous verrez que votre sélecteur de fichiers apparaît et vous pouvez simplement l'enregistrer où vous le souhaitez. Impressionnant. Alors maintenant que vous avez exporté votre photo de couverture, allez de l'avant et connectez-vous à Skillshare, démarrez votre projet et téléchargez ceci comme photo de couverture et j'ai hâte de voir ce que vous créez. 6. Pages et planches: D' accord. Donc, nous sommes sur le point de commencer à concevoir notre application. Mais d'abord, parlons un peu de la façon dont les fichiers Sketch sont structurés. Donc, nous avons appris à propos de la liste des calques dans les groupes, mais Sketch possède également d'autres outils d'organisation qui sont vraiment géniaux lorsque vous concevez des applications, pages Web ou tout ce que vous allez concevoir avec Sketch. Donc, si vous remarquez ceci, point d'exclamation Gets Started Here, est un petit menu déroulant. Qu' est-ce que c'est une page dans Sketch. Ainsi, Sketch vous permet de diviser votre fichier en différentes pages chacune avec sa propre toile. Ce qui vous permet de faire est de diviser tout ce que vous travaillez en groupes qui ont du sens sur le plan organisationnel. Donc, pour ce fichier, j'ai fait une page pour nos écrans d'application principaux, j'ai inclus une autre page qui a Interactions et Microstates, et j'ai inclus deux autres pages qui ont d'autres composants que nous allons être en utilisant pendant que nous faisons une interface utilisateur. J' ai inclus quelques composants d'interface utilisateur de base d' iOS que nous allons utiliser lorsque nous entrons dans la conception de notre application. Donc, si vous cliquez sur la petite icône, vous pouvez développer les pages pour voir une liste complète de ce que vous avez et sauter rapidement autour d'eux. Vous pouvez également ajouter une nouvelle page directement à partir d'ici et similaire à des groupes ou à n'importe quelle liste de calques. Tu peux nommer ça comme tu veux. Je vais aller de l'avant et supprimer ça. Donc, les pages sont vraiment un excellent outil pour vous garder organisé dans Sketch. Alors, allons dans une des pages. Allons dans les écrans d'application. Donc, dans App Screens, vous verrez que nous avons un tas de, fondamentalement, vues d'application. Si vous devez cliquer et faire glisser, si vous maintenez la barre d'espace enfoncée, curseur de la souris se verrouille et vous pourrez faire glisser le canevas, tout simplement très utile lorsque vous naviguez dans l'interface Esquisse. Donc, ce que j'ai fait dans App Screens, c'est que j'ai créé un tas de plans de travail. Ce que sont essentiellement les plans de travail, sont un type spécial de groupe. Ainsi, les plans de travail sont des cadres fixes. J' aime les utiliser pour représenter différents états de mon application. J' ai donc, par exemple, notre icône d'application. Si vous passez à la liste des calques, vous pouvez développer le Plan de travail pour voir exactement quelles formes et objets se trouvent au-dessus de ce plan de travail. Vous remarquerez, à titre d'exemple, que ces plans de travail sont des cadres fixes. Donc, si quelque chose est dans votre plan de travail et que vous le faites glisser sur le côté, il le clipsera réellement pour vous. Donc, je vais juste recentrer ça. Ainsi, pour créer un plan de travail, vous pouvez soit aller dans la liste déroulante Insertion, soit appuyer sur la touche de raccourci A, et vous remarquerez que votre panneau Inspecteur comporte un tas de modèles prédéfinis que Sketch inclut. Donc, si je voulais ajouter un autre écran à ce fichier, je clique simplement sur iPhone 6, et vous verrez que Sketch ajoute un autre plan de travail juste à côté de mon dernier plan de travail. Impressionnant. Ainsi, les plans de travail peuvent être nommés comme n'importe quel autre objet dans Sketch, List View UI. Les plans de travail peuvent également être déplacés et placés où vous le souhaitez sur la toile. Pendant que nous concevons, je vais juste poser nos plans de travail UI juste en dessous de nos plans de travail filaires. Donc, je peux rapidement me référer aux fils que nous avons mis en place pour nous-mêmes. Impressionnant. Donc, ce ne sont que quelques-unes des excellentes fonctionnalités que Sketch a pour vous garder organisé et visible pendant que vous concevez. Donc, dans la prochaine vidéo, nous allons commencer à travailler sur une partie de l'interface utilisateur de notre application. 7. En-tête: D' accord. Maintenant, nous sommes prêts à commencer à concevoir l'interface utilisateur pour une application de liste de tâches. La première chose que je vais vouloir faire est, retourner à ma photo de couverture et juste saisir et l'amener dans ma page d'écrans d'application afin que je puisse faire référence au style que j'ai énoncé en elle. Donc, je vais juste aller de l'avant et le mettre juste à côté de mon premier écran d'interface utilisateur que j'ai ici. Donc, ce que je vais faire maintenant est, allez-y et créez les autres tableaux d'art pour les sections principales de l'interface utilisateur. Donc, ce que je vais faire, c'est que je dupliquerai cette planche d'art un tas de fois. Donc, je peux soit aller à l'outil de création de tableau d'application en appuyant le A ou je peux sélectionner ce tableau d'application et je peux maintenir l'option enfoncée et faire glisser. Ce que ça va faire, c'est que ça va dupliquer tout ce que je traîne ici. Donc je vais juste créer ces trois autres tableaux d'art et en placer un juste sous les filaires que je vais créer. Vous pouvez aller de l'avant et simplement renommer ceux-ci, et un dernier pour la tâche d'édition, génial. Alors, nous allons zoomer et vérifier nos filaires. Donc, dans la vue Liste, nous avons fondamentalement un en-tête où nous pouvons ajouter un nouvel élément à faire, nous avons une section pour nos articles non faits et nous avons une liste de nos articles faits. Il semble que chaque filaire pour lequel nous allons faire l' interface utilisateur a l'un de ces en-têtes. Donc, c'est probablement un bon endroit pour commencer comme la première chose que nous allons aller de l'avant et créer. Alors, commençons là-dessus tout de suite. Donc, la première chose que je vais vouloir faire est créer l'arrière-plan pour mon en-tête. Donc, je vais appuyer sur R pour créer un nouveau rectangle. Je vais faire glisser cela pour être la pleine largeur de mon tableau d'art pour un iPhone six qui fait 375 pixels de large si nous concevons au 1X et je vais juste enlever la bordure de cela. Donc, ce que je vais vouloir faire maintenant, c'est regarder en arrière la photo de couverture de mon projet et commencer à en prendre quelques indices de style. Donc, la première chose que je remarquerai, c'est qu'il a un fond bleu très riche. Donc, si je vais de l'avant et que je clique sur le fond de ma photo de couverture, je peux voir ce que j'ai ici. Donc, si je vais à ce remplissage, je veux ce bleu pour mon en-tête. Donc, je peux soit aller de l'avant et copier la valeur hexadécimale juste ici ou je peux frapper ce petit plus ici à côté de mes couleurs de document. Ce que ça va faire, c'est que ça va sauver cette couleur pour moi et me permettre d' avoir un accès rapide à n' importe lequel de mes sélecteurs de couleurs. Donc, sélectionnons l'arrière-plan de notre en-tête et rendons juste ce beau bleu. Donc, la prochaine chose que je vais vouloir ajouter à cet en-tête est ceci, barre d'état iOS ici. Comme je l'ai mentionné dans une vidéo précédente, j'ai inclus certains de ces composants iOS, ai également un lien dans les notes de classe dans la description du projet et juste coller cela juste là. Donc, maintenant qu'il est là, vous allez juste vouloir le positionner à droite avec le haut et les côtés de votre tableau d'art, et vous avez maintenant votre barre d'état iOS. Donc, cela commence vraiment rapidement à ressembler à une véritable application iPhone. Donc, la prochaine chose que je vais vouloir faire est juste d'ajouter mon titre et mes liens d'action à l'en-tête. Donc, allez-y et appuyez sur « T » pour ajouter un nouveau calque de texte. Pour cela, vous allez simplement vouloir cliquer parce que vous ne voulez pas qu'il soit corrigé avec la couche de texte. Appelons ça Todos, puisque c'est une liste de nos choses à faire. Je vais le centrer. Donc, si je veux ajuster le contenu de cette boîte, ça le gardera bien et centré, et je le rendrai un peu plus épais en faisant un poids de police moyen, juste parce que c'est un titre, donc ça devrait être assez important. La taille est 18, je suis plutôt content de ça pour l'instant, donc je vais laisser ça. Ensuite, créons l'action. Donc, nous avons eu un petit nouveau lien ici en haut à droite de notre en-tête. Donc, ce que je vais faire est que je vais sélectionner mon titre et je vais cliquer sur « option », et le faire glisser. Pendant que je traîne cette fois, je vais maintenir Shift enfoncée. Ce que cela va faire, c'est, il va simplement faire glisser cela le long de l'axe x ou y. Dans ce cas, il le fait glisser le long du x. donc, il ne changera pas les coordonnées y de celui-ci, il changera juste le x. donc, je vais juste laisser tomber ça. Parce que c'est aligné à droite, je vais changer l'alignement à droite et je vais taper nouveau ici. Je peux vérifier la distance de ce que cet objet est loin de diverses choses dans l'en-tête, juste en le sélectionnant et en appuyant sur la touche Alt. Ce que cela va faire, c'est qu'il va mettre en place des outils de mesure que Sketch nous fournit. Ainsi, vous verrez qu'il se trouve à 13 pixels du bord droit du tableau d'art et que le cadre englobant de ce calque x se trouve à 27 pixels du bas de notre arrière-plan. Selon les quantités supérieures, ça me donnera différents outils de mesure. La prochaine chose que je veux faire est en fait aussi juste rendre cela un peu plus léger. Donc, il a un peu d'un poids de type différent du titre de mon application. Donc c'est un gros en-tête. Je pense en fait que quelque part vers le milieu des années 60 est probablement une meilleure taille d'en-tête pour nous. Donc, ce que je vais faire, c'est, je vais changer la hauteur de ça, et ensuite je veux juste centrer ceci entre la barre d'état et le bas de mon arrière-plan. Donc, c'était 13, alors laissez-moi juste faire correspondre ça jusqu'à 10. Ensuite, nous avons 10 et 11. Donc nous n'allons pas obtenir ça parfaitement, mais c'est probablement bon pour l'instant. Ensuite, par ici, je vais aller de l'avant et changer ça à 16. Vous remarquerez que parfois, si vous avez sélectionné un objet et que vous maintenez la touche d'option enfoncée pour le déplacer, il se déplace d'un dixième de pixel. C' est vraiment bizarre que Sketch fait. Je ne sais pas pourquoi quelqu'un voudrait déplacer ça un 10ème de pixel mais c'est juste une de ces petites bizarreries que Sketch a, j'espère qu'ils vont corriger un jour. Donc, ce que je vais faire, c'est m'assurer que c'est à 16 pixels du côté de ce tableau d'art. Cool. Maintenant, la prochaine chose que je veux faire est juste donner à cet en-tête un peu de profondeur. Donc, un en-tête se trouve au-dessus de votre interface utilisateur et les choses vont probablement glisser derrière elle. Donc, ce que je vais vouloir faire est juste d'ajouter une simple petite ombre portée ici. Ainsi, l'ombre portée par défaut est un peu sombre. Donc, je vais entrer dans la couleur et laisser tomber cette opacité à 30 pour cent, et je vais faire le flou un peu moins aussi, peut-être faire le décalage dans l'axe Y juste un. Alors, oui. Ça me donne une belle ombre subtile. Donc, on dirait que les choses passent derrière elle. Donc, génial. Maintenant, nous avons notre en-tête, continuons et restons organisés. Donc, je vais sélectionner l'arrière-plan et je vais juste renommer cela et tout le reste est nommé assez correctement, mais je vais juste aller de l'avant et les regrouper dans le groupe d'en-tête. Génial. Maintenant, vous avez un en-tête que vous pouvez utiliser sur le reste de l'écran de votre application iPhone. Donc, si vous l'ajoutez simplement à la vue Create.Task et que vous le modifiez en Enregistrer, vous disposez d'un composant vraiment réutilisable que vous pouvez utiliser sur l'ensemble de votre application. Vous devrez aller de l'avant et créer ce petit x pour sortir de la vue Enregistrer ou de l'icône de retour. Donc je peux aller de l'avant et faire ça tout de suite. Donc je vais faire deux rectangles. Alors faisons que trois pixels de large et 35 pixels de haut. Tuez la frontière dessus. Copiez la commande [inaudible], extrémité V juste faire pivoter que 90 degrés. On dirait que c'est un peu hors du centre. Alors, pourquoi ne pas faire ces chiffres. Je vais utiliser mon outil .Union, puis je vais les faire pivoter 45 degrés et je pourrais mettre cela droit dans mon en-tête maintenant. C' est un peu grand donc je vais juste la taille jusqu'à 20 sur 20 et en faire une couleur blanche. Cool. Donc, vous pouvez aller de l'avant maintenant et style votre en-tête comme vous le souhaitez et le dupliquer sur tous les tableaux d'art qui sont nécessaires pour le reste de votre application et je vous verrai dans la prochaine vidéo. 8. Symboles: Donc, dans notre dernière leçon, nous avons commencé notre interface utilisateur en créant des en-têtes pour chacun de nos écrans d'application. Ensuite, commençons par créer certains des objets qui se trouvent dans notre vue Liste. Effectuons un zoom avant sur la vue Liste en appuyant sur Commande Plus et en faisant glisser notre canevas en maintenant la barre d'espace enfoncée. Ce que nous avons dans cette vue de liste est quelques éléments répétitifs. Donc, nous avons un en-tête répétitif pour chacune de ces sections, puis dans chacune de ces sections, nous n'avons pas fait, todos, et nous avons quelques todos croisés. Donc, ce que je veux vous montrer dans cette leçon, c'est comment faire un morceau de design réutilisable. Donc, commençons par faire de ces titres de section un exemple très simple. Donc, Sketch a un outil très puissant appelé Symboles. Donc, si je vais de l'avant et créer un rectangle pour mon en-tête de section, je vais juste aller de l'avant et je vais styler ceci, je vais faire tomber ça jusqu'à ce qu'il soit vraiment bleu-gris clair ici. J' ajouterai cette couleur aux couleurs de mes documents car je souhaiterais peut-être la réutiliser. Je crée ce petit arrière-plan pour mon en-tête de section et je vais juste aller de l'avant et je vais créer un titre pour cela. Donc, je vais appeler celui-ci Not Done, et je vais juste ajuster la police. Je vais en faire un beau bleu foncé. Tout se passe avec une sorte de ton bleu ici, et je vais juste le centrer visuellement. Rendre ce 16 pixels loin du côté pour correspondre à mon élément d'action ici. Super, ça a l'air un peu grand alors je vais abaisser ça à 14 et juste le centrer là-dedans. Génial ! Donc, laissez-moi créer un groupe pour cela et appelez ceci un en-tête de section. Votre application peut avoir un tas d'en-tête de section. Donc, nous avons une section Not Done, mais nous avons aussi une section Done. Maintenant, je peux facilement, de la même manière que nous avons fait nos en-têtes, juste créer deux objets comme celui-ci. Mais si je veux changer la couleur de ceci, pour dire un sombre avec un titre clair, je dois aller faire exactement la même chose ou recopier et refaire cet autre en-tête de section. Heureusement, Sketch vous donne un outil assez impressionnant appelé Symboles où si vous mettez juste à jour un, vous pouvez mettre à jour le reste d'entre eux. Il mettra automatiquement à jour le reste d'entre eux. Alors, essayons-le. Par conséquent, si vous sélectionnez le titre que vous souhaitez créer un symbole et cliquez simplement dessus avec le bouton droit de la souris, vous pouvez descendre à cette option Créer un symbole. Alternativement, vous pouvez également monter ici dans l'en-tête. Donc, si vous créez un symbole, vous remarquerez qu'il a changé ce dossier en cette couleur violette. Maintenant, à chaque fois que vous avez un autre titre de section dans cette couleur violette, si vous mettez à jour l'un de ces éléments, ils seront tous les deux mis à jour, et vous pouvez le faire pour tout ce que vous voulez. Donc, si vous mettez à jour vos styles de type, il sera mis à jour. Si vous mettez à jour les tailles, les couleurs, il se contentera de mettre à jour. Donc, une chose que vous devriez savoir, que par défaut, il mettra également à jour le texte ici. Donc, vous remarquerez que j'ai changé le texte et qu'il a changé aux deux endroits. Mais ce n'est pas quelque chose que nous voulons. Donc, ce que vous devez faire est en fait, sur votre calque de texte, allez à cette petite coche qui apparaît lorsque votre calque de texte est en assemblage, et appuyez simplement sur Exclure la valeur de texte du symbole. Donc, ce que cela va maintenant vous permettre de faire est en fait d'avoir des valeurs de texte différentes ici et le symbole ignorera tout ce qui est dans ce champ de texte, mais il gardera toujours toutes ses options de style afin que vous puissiez rester cohérent et garder le style. Une autre chose à noter est que ces deux symboles sont liés, mais vous pouvez changer leur titre indépendamment si vous voulez rester organisé. Donc, tu peux faire le titre de section pour ce gars et cliquer sur Terminé et ensuite tu peux faire ici, Not Terminé. Cool, donc c'est vraiment puissant. Donc, la prochaine chose que nous allons faire est d'utiliser Symboles pour créer les lignes de notre liste à faire. Donc, ce sont tous fondamentalement les mêmes et nous voulons créer des symboles. Donc, si nous mettons à jour le style de l'un d'eux, ils changent tous. Alors, commençons à créer cette ligne. Donc, nous allons créer l'élément Non fait pour faire. Donc, je vais juste lui donner un arrière-plan. Je vais rendre ce fond blanc pour l'instant. Ce que je vais vouloir faire, c'est copier et coller juste là. Je veux juste faire un coup vraiment léger sur le fond de celui-ci afin que je puisse séparer chacun de mes objets à faire. Donc, j'ai cet objet. Ce que je vais faire maintenant, c'est que je vais changer la hauteur de celui-ci à un pixel de haut. Donc, je vais en faire un et vous verrez que j'ai maintenant un rectangle d'un pixel. Je vais appeler ceci un coup de fond, et j'appellerai cet objet Background. Donc, je veux que cela soit aligné en bas avec l'arrière-plan, ce trait inférieur et l'arrière-plan soit aligné en bas. Donc, je vais sélectionner ces deux objets et je vais venir ici à ces outils d'alignement, et ce qu'ils vous permettent de faire est, vous pouvez faire des choses comme l'aligner au centre, vers le haut ou vers le bas. Donc, je veux aligner le mien sur le fond. Donc, j'ai cette petite attaque juste ici. La prochaine chose que je veux faire est de mettre une coche vide pour indiquer que cet objet n'a pas encore été coché. Revenons à notre photo de couverture du projet. On a déjà coché, alors je vais aller de l' avant et le prendre à partir d'ici. Je vais le copier et le coller dans ma nouvelle ligne et le redimensionner juste là. Je vais faire ce 40 pixels par 40 pixels, puis je vais sélectionner l'arrière-plan, et j'utiliserai mon outil d'alignement pour m'assurer qu'il est juste aligné au centre là-dessus. Faisons ce 16 pixels loin du côté. Super. Avant d'aller plus loin, je vais aller de l'avant et je vais les regrouper en un groupe et appeler ça Tâche - Non fait. Impressionnant. Donc, je veux changer le style de ceci. Je vais changer la couleur pour notre petit bleu clair juste là, et je veux qu'il ait l'air imprimé sur la rangée, plutôt que de planer dessus. Alors, je vais éteindre l'ombre et essayer une de ces petites ombres intérieures. Alors, fais ce zéro. Gardez un flou de trois, mais changez seulement à 30 pour que ce soit juste un peu plus subtil. Je peux en fait... Laisse-moi essayer 20. Super. Donc, maintenant nous avons notre coche vide. Il semble que c'est quelque chose qui pourrait avoir besoin d'être rempli et nous pouvons aller de l'avant et simplement créer le titre pour cela. Donc, je vais faire ce point 18, je veux le rendre moyen, et je l'appellerai Lorem Ipsum. Impressionnant. Il a mon beau bleu foncé là-bas et je sais que sur certains d'entre eux il y avait une date d'échéance donc je vais juste aller de l'avant et j'ajouterai une couche de date d'échéance. Je vais faire ça beaucoup plus petit, peut-être un 14 et je vais rendre ça un peu plus léger bleu grisâtre et je peux rendre ça régulier. Disons : « Demain à midi. » Impressionnant, et aligner ces. Vous pouvez concevoir ça comme bon vous semble. Jouez avec le dimensionnement et l'espacement jusqu'à ce que vous ayez quelque chose que vous aimez. Je vais sélectionner les deux et j'espère qu'ils ne font pas partie de mon groupe. Donc, si vous voulez ajouter quelque chose à un groupe qui existe déjà, il suffit de passer à cette liste de calques et de les faire glisser directement et maintenant, je devrais pouvoir faire la mesure loin de cette coche. Ok, super. Donc maintenant, j'ai ce 16 pixels par 16 pixels et parfois j'aime aussi juste aligner des choses. Sketch vous donne ces outils. Ils sont appelés des règles et fondamentalement ce qui est bon pour vous, c'est que vous pouvez cliquer sur ces règles sur le côté et ajouter ces directives très rapidement à votre dossier. Donc, ce que je pourrais faire est en fait d'aligner la ligne de base de celui-ci et le haut de celui-ci. Donc, tout s'intègre vraiment parfaitement dans cette petite coche. Vous pouvez toujours vous débarrasser des règles en les faisant glisser directement de la règle. Donc, c'est un outil très rapide et facile. Ok, génial. Donc, ce que nous allons vouloir faire maintenant est de sélectionner tout ce groupe et nous allons créer un symbole à partir de celui-ci, puis assurez-vous de revenir en arrière et d'exclure ces deux valeurs de texte du symbole. Donc maintenant, si vous copiez et collez ce gars, vous voulez faire quelque chose comme changer le texte ici, il le changera pour tous. Impressionnant. Je vais aller de l'avant et revenir à ce bleu plus foncé. Je vais juste faire glisser ce titre de ligne parce que maintenant, j'ai mes deux éléments Not Done. Donc maintenant, ce que je veux faire est de créer mes éléments Done. Mais vous savez que si je vais ici et que je crée juste une autre instance de ce symbole et que je commence à remplir ça avec peut-être comme un vert, ça va le remplir pour tous, et ce n'est pas quelque chose que nous voulons. Donc, ce que vous allez vraiment vouloir faire est de faire un clic droit sur ce nouveau symbole et vous allez vouloir le détacher. Donc, ce que cela fera, c'est qu'il ne sera plus connecté au reste du symbole afin que je puisse aller de l'avant et changer cela comme bon me semble et mes autres symboles ne changeront pas. Mais je peux aussi aller de l'avant et en créer un nouveau symbole, donc maintenant, je peux faire mes lignes Done ici. Donc, peut-être que je veux que ça soit rayé. Impressionnant. Donc, ce que je veux que vous fassiez maintenant, c'est juste finir le reste des écrans de cette page. Rappelez-vous, vous pouvez utiliser certains des composants que j'ai inclus dans la page des composants iOS ou créer des choses complètement à partir de zéro. C' est vraiment à vous de décider quelle que soit la manière dont vous voulez concevoir votre application. Je vais vous voir dans la prochaine vidéo où nous parlerons de certains des micro-états. 9. États et icônes: Ok, j'espère que vous avez été en mesure de finir de concevoir les écrans principaux de votre application. Dans cette vidéo, nous allons passer en revue quelques-unes des dernières interactions des micro-états. Passons à la page maintenant. Donc, ici, nous avons quelques micro-états. Nous avons nos interactions en ligne. Un état vide pour notre ListView lorsque l'application se charge pour la première fois ou peut-être après avoir terminé et effacé tous vos éléments à faire et enfin vous avez une confirmation de suppression de tâche. Commençons par ces interactions de ligne. Tout comme quand nous concevons l'utilisation principale de notre application, je vais juste aller de l'avant et ajouter un nouveau tableau d'art. Je vais faire de l'iPhone six taille. Je vais le faire glisser juste en dessous des interactions de ligne et je vais le nommer interface utilisateur des interactions de ligne. Je ne veux pas que mon tableau soit blanc, donc j'ai deux options. Je peux soit dessiner un rectangle et couvrir l'ensemble du tableau d'art avec une couleur rectangle, soit sélectionner le tableau d'art et activer une couleur d'arrière-plan pour cela. Alors, laisse-moi faire ça. Je vais faire ce bleu clair que j'ai utilisé dans d'autres endroits dans l'application. Ok, génial. Donc, maintenant nous avons notre interaction en ligne. Donc, la première chose que je vais vouloir faire est juste de jeter une ligne de tâche par défaut sur mon tableau d'art. Donc, je peux soit revenir à mes écrans d'application et copier et coller le symbole que j'ai créé dans la leçon vidéo précédente, soit simplement insérer une instance de ce symbole. Donc, si vous allez ici à la liste déroulante « Insérer », vous verrez que vous avez maintenant une zone de symboles. Donc, voici tous les symboles que j'ai créés jusqu'à présent sur mon application. Faisons une tâche non faite et il va ajouter juste une instance de ce symbole directement sur mon tableau d'art. N' oubliez pas que tout ce que vous changez ici va changer toutes les pages de votre fichier d'esquisse. Donc, si vous changez quelque chose ici, il va changer sur vos vues principales d'application également. Gardez ça à l'esprit. Donc, nous avons notre ligne par défaut. La prochaine que nous allons vouloir faire est juste d'ajouter une ligne. Il semble que nous ayons une petite icône juste au-dessus de l'endroit où se trouve la coche en ce moment. Alors, créons ça. Donc, je vais juste zoomer. Je vais créer un nouvel ovale et je veux le créer exactement la même taille que la coche ovale et rappelez-vous, vous ne voulez pas mettre cela dans le symbole car il mettra alors cet ovale sur toutes vos rangées. Donc, je vais aller de l'avant et je vais faire ce blanc et je veux rendre les bordures aussi belles bleues, je vais le faire passer à deux et je vais juste ajouter le mot nouveau dedans. Donc, je ne veux pas de texte blanc ici je vais faire ce bleu aussi et juste le renforcer un peu. Je vais mettre mon alignement sur centré. Donc, si je voulais ajouter un point d'exclamation, je pourrais le faire très facilement. Génial, donc, je vais zoomer un peu. C' est comme un gros onglet à mon goût. Donc, je vais essayer à 11 h. Cela a l'air bien et puis généralement quand j'utilise tous les textes majuscules, j' aime espacer un peu les lettres alors il suffit de taper une sur le personnage et d'espacer ces lettres. Essayons deux, je pense que l'un fonctionnait mieux. Ok, super, donc maintenant nous avons notre nouvel état de ligne. La prochaine que nous allons vouloir faire sont deux de ces interactions de balayage. Donc, il semble que chacune de ces interactions ait une icône assez cohérente avec une étiquette et un arrière-plan. Donc, je vais vraiment aller de l'avant et créer toutes les icônes à la fois pour les rendre toutes cohérentes. Alors, voyons. On a une coche, une poubelle et un petit crayon. Donc, créons chacun de ces maintenant. Commençons par la coche. Cela devrait être assez facile pour nous maintenant parce que nous l'avons fait tant de fois et laissez-moi juste faire ce 25 par sept et puis je vais faire un autre rectangle sept pixels de large par 50 pixels de haut et je vais juste aller de l'avant et ajustez cela à l'intérieur. Ok, cool et comme on l'a fait avant qu'on ne se syndique et qu'on donne une rotation négative de 45 degrés. Eh bien, rendons ces deux pixels épais et je vais le faire à l'extérieur. On dirait qu'il pourrait être un peu grand alors on va juste abattre ça à environ 35 pixels de haut et c'est à peu près la taille que je vais utiliser pour toutes nos icônes maintenant, ok génial. Donc, je vais en fait juste me faire des petits guides ici pour que je puisse tout garder relativement dans la même échelle. Faisons notre poubelle maintenant. Faire la poubelle ce que je vais vouloir faire est juste de créer la base des poubelles et la poubelle a un haut plus large qu'elle ne le fait en bas. Donc, une façon de le faire dans l'esquisse est de double-cliquer sur mon rectangle pour passer en mode d'édition de chemin. Ce que le mode d'édition de chemin me permet de sélectionner chacun des points d'ancrage de cette forme un par un ou si je maintiens la touche Maj enfoncée, peux sélectionner deux à la fois et maintenant si je les déplace, vous verrez que je suis capable de déplacer ces points d'ancrage tandis que le reste des points d'ancrage qui ne sont pas sélectionnés reste stationnaire. Donc, ce que nous allons réellement vouloir faire est juste d'aller de l'avant et de sélectionner un point d'ancrage inférieur à la fois et de simplement le déplacer en deux pixels vers le centre. Super. Maintenant, nous allons juste styler comme nous le voulions, c'est bien pour l'instant et nous ne voulons pas de remplissage de centre. Donc, nous allons maintenant créer le haut de la poubelle. Donc, si nous faisons juste un rectangle et nous pouvons le rendre quelques pixels plus large. Mettons-les en forme et on va régler ça pour l'extérieur. Ok, super. J' ai l'impression que ma poubelle est peut-être un peu étroite, donc je vais juste aller de l'avant et l'élargir un peu puis faire glisser ça et je vais juste aller de l'avant et aligner ces. Génial. Ensuite, donnons-lui une petite poignée, j'ai zoomé, je vais zoomer en arrière en créant un dernier rectangle et nous allons faire que cette épaisseur deux enlever le remplissage et ce que nous allons avoir à faire maintenant et nous allons juste superposer ces choses juste au-dessus de chaque autre. Donc, nous avons une petite coche et une poubelle et la dernière que nous allons vouloir faire est un crayon. Donc, nous allons commencer par un simple rectangle. Faisons cela environ sept ou huit pixels de large. Il suffit de faire l'épaisseur deux et de retirer le remplissage. Donc, comme nous l'avons fait avec la poubelle, double-cliquez sur ce rectangle. Nous sélectionnerons les deux points d'ancrage supérieurs. Ainsi, en plus de les déplacer seuls, nous pouvons également contrôler le rayon de certains points d'ancrage. Donc, bossez cela jusqu'à quatre puisque c'est huit pixels de large, cela devrait fondamentalement être une extrémité parfaitement ronde à ce crayon. Maintenant, nous voulons créer la pointe du crayon. Donc, si vous passez la souris sur ces lignes, vous verrez que votre curseur se transforme en un petit stylo avec un plus dessus. Ce que cela va faire, c'est qu'il va ajouter un point d'ancrage ici. Donc, si vous cliquez, vous verrez que j'ai un tout nouveau point d'ancrage sur cette forme et maintenant je peux le sélectionner et je peux le faire glisser et le déplacer comme je le veux. Donc, il suffit de le faire glisser sur quelques pixels pour en faire une extrémité pointue comme un crayon normal l'aurait fait. Ok, super. Vous pouvez simplement aller de l'avant et ajouter une petite ligne juste ici pour montrer où commence la pointe du crayon et vous pouvez faire en appuyant sur L pour l'outil de ligne, puis en faisant simplement glisser une ligne juste au-dessus et vous voulez positionner que juste là-dedans et puis juste à nouveau juste aller de l'avant et faire une ligne de deux pixels d'épaisseur et de même peut-être que ce crayon a une gomme sur le dessus, sorte que vous pouvez simplement aller de l'avant et faire glisser une ligne là-bas aussi. Cool. Donc, maintenant ce que nous voulons faire est que nous allons probablement vouloir grouper ceci et l'appeler, donnez-lui un nom pour que je l'appelle edit icône. Nous ferons la même chose avec notre poubelle. Super. Nous avons donc quelques icônes très simples que nous pouvons maintenant utiliser lorsque nous faisons nos lignes. Encore une fois, vous pouvez simplement vous débarrasser de ces règles en les faisant glisser juste là. Donc, copions et collez notre ligne de tâche principale, et ce que nous allons vouloir faire est juste de la glisser un peu et nous allons faire un rectangle qui est exactement la même hauteur qu'il est. Déplacez sa bordure et celle-ci devrait probablement être verte pour indiquer que vous êtes sur le point de cocher quelque chose. Nous allons faire glisser notre icône de coche juste dessus et la centrer au milieu, allons de l' avant et rendre ce trait blanc et ajouter juste une petite étiquette pour que les gens sachent ce qui va se passer. On va faire le point d'exclamation. Encore une fois, rendons-le blanc et mettons-le au centre et nous y allons. Cool et maintenant vous pouvez simplement faire la même chose pour les deux autres interactions de ligne. Donc, nous allons juste copier ça deux fois. Changons ça en rouge et nous allons juste apporter ces icônes ici. On voudra probablement supprimer ces gars. Mettez ça au centre. C' est l'outil d'alignement. Faisons juste ce négatif à 45 degrés et on voudra y aller faire tout blanc. Copiez ceci. Génial. Donc, maintenant nous avons nos interactions en ligne. Donc, vous pouvez aller de l'avant et finir ces styles de lignes comme vous le souhaitez afin qu'ils correspondent votre application, puis quand vous avez fini avec ceux juste finir le reste des micro-états que nous avons ici. Donc, le vide et le message de confirmation. N' oubliez pas que j'ai inclus un message de confirmation dans les composants iOS. Si vous voulez utiliser le message de confirmation du système d'exploitation iOS par défaut ou vous pouvez simplement concevoir votre propre message personnalisé. C' est à vous de décider. Dans la prochaine vidéo, nous apprendrons à exporter nos écrans afin que nous puissions les partager avec les gens. 10. Exportation des planches: Maintenant que nous avons fini de concevoir notre application iPhone, nous allons vouloir exporter nos écrans pour pouvoir les partager avec un ingénieur qui va construire notre application ou les télécharger dans un ingénieur qui va construire notre application la galerie de projets Skillshare, où nous pouvons obtenir des commentaires de nos camarades de classe. Donc Sketch rend très facile à faire ça. Ce que vous voulez faire est de sélectionner chacun des plans de travail que vous souhaitez exporter à partir de votre liste de calques située à gauche de Sketch. Ensuite, ce que vous allez faire est de revenir dans ce coin inférieur droit et d'appuyer sur ce bouton rendre exportable. Vous verrez des aperçus de chacun de vos plans de travail et vous pourrez également ajouter différentes tailles. Juste pour vous montrer ce que cela fait, je vais aller de l'avant frapper un plus et j'ajouterai la taille 2X ici pour obtenir des images en double taille de mes originaux. Je vais donc aller de l'avant et je vais appuyer sur Exporter les plans de travail, je vais choisir le dossier vers lequel je veux les exporter et je vais appuyer sur le bouton Exporter. En outre, une fonctionnalité rapide et facile de l'esquisse permet est la possibilité de partager directement sur le courrier ou même iMessage directement à partir de Sketch. C' est pratique parfois. Donc maintenant, si je minimise Sketch et navigue vers le dossier où j'ai enregistré toutes mes applications de plans de travail, je peux voir que j'ai une copie de chacun de mes plans de travail en png à la fois taille 1X et taille 2X. Je suis maintenant prêt à les partager avec mes amis ou à les télécharger dans la galerie de projets Skillshare. Donc, ce que je veux que vous fassiez maintenant est télécharger votre écran principal d'application dans la galerie de projet Skillshare, et moi et vos autres camarades de classe allons y aller et déposer quelques commentaires et commentaires sur votre travail. 11. Découvrir le design sur Skillshare: façon.