Share
Ce que vous allez créerDans ce didacticiel, nous allons créer des diagrammes de flux utilisateur et de flux de tâches réutilisables dans Sketch. Nous allons exploiter la puissance des symboles Sketch en utilisant des éléments de base et quelques personnalisations pour que nos symboles fonctionnent pour nous..
"[Un] organigramme est un diagramme de la séquence de mouvements ou d'actions de personnes ou de choses impliquées dans un système ou une activité complexe." - Naema Baskanderi
Pour construire nos diagrammes de flux, nous avons besoin d'éléments pour les pages, les flèches, les actions (y compris les décisions et les indicateurs oui / non), les étiquettes et les notes. Je vais passer en revue chacun de ces éléments, leur apparence (si vous avez envie de copier mon style), leur fonctionnement et leur intégration à la vie de tous les jours. Mais avant cela, nous devons revoir les conventions de nommage dans Sketch. C'est l'un des facteurs clés pour que cela fonctionne. Let's plonger droit dans, allons-nous?
Les symboles d'esquisse sont parfaits pour les diagrammes de fluxOui, nous le faisons, et pour deux raisons spécifiques. Premièrement, il est recommandé de garder le nom de vos couches à des fins d'organisation, en particulier si vous traitez les fichiers avec d'autres personnes. Lorsque vous créez un symbole contenant plusieurs champs de texte, des calques de texte correctement nommés vous aideront à distinguer le texte lorsque vous essayez de le remplacer ou de le remplacer..
La deuxième raison est beaucoup plus cool cependant. Sketch groupera automatiquement les symboles, les styles de texte et les styles partagés dans différents calques, en supposant que vous suiviez une syntaxe spécifique. Sketch repose sur des conventions de dénomination semblables à celles d'une URL et d'un dossier. Par exemple, les deux symboles suivants seront regroupés de manière ordonnée..
Alors si on en nomme un autre:
il sera également groupé sous des flèches, mais dans des sous-dossiers différents: Par défaut. Cette catégorisation nous permet de trouver exactement le symbole dont nous avons besoin, quand nous en avons besoin:
Symboles organisés dans SketchGardez cela à l'esprit lorsque vous nommez un élément qui avance, en particulier des calques de texte, des symboles et des styles partagés..
La «page» est une partie fondamentale de notre diagramme de flux. Les utilisateurs de sites Web ou d’applications suivront différents itinéraires, effectueront diverses tâches et les pages seront toujours au centre de cette activité..
Pour créer l'élément de page, nous avons besoin d'un rectangle et d'un champ de texte au-dessus de celui-ci. Les styles du rectangle incluent # 325372 Pour la couleur, Helvetica Neue, un poids moyen et une taille de police de caractère 11. Vous pouvez créer un style partagé à cet effet car les autres éléments auront la même typographie, bien que l'élément de page utilise des majuscules. Pour ce faire, sous la options, changer le texte transformer en majuscule.
Le rectangle est 144px par 96px avec un rayon de 5, # F7FCFD pour le fond et # B7E7EE pour la bordure intérieure 1px. Il est judicieux de transformer au moins le style du rectangle de page en style partagé. Cela permettra une édition facile plus tard.
Renommez le calque de texte en «Nom de la page». Ainsi, lorsque vous réutilisez cet élément en tant que nouveau symbole, le remplacement de texte aura un titre au lieu de «texte». Sélectionnez les deux et convertissez-les en un seul symbole à l'aide de la Créer un symbole bouton dans la barre d'outils.
Dans ce tutoriel, nous allons créer beaucoup de symboles. Sketch n'a pas de raccourci clavier spécifique, mais nous pouvons créer nous-mêmes un raccourci personnalisé..
D'abord, allez à Préférences de système et aller dans Clavier. Sélectionnez le Raccourcis onglet du haut. Dans le panneau de gauche, sélectionnez Raccourcis d'applications et appuyez sur le + bouton. Une superposition apparaîtra; dans la liste des applications localiser Esquisser. Sous Titre du menu vous devez renseigner le nom de l'élément de menu que nous ciblons, qui dans ce cas est Créer un symbole (c’est le premier élément de menu sous Couche). Enfin, choisissez votre raccourci clavier, et c'est tout.
Pro tip: cela peut être utilisé pour n'importe quelle application.
Création d'un raccourci clavier personnalisé pour SketchVous pouvez créer autant de styles de flèche que vous le souhaitez, mais l’idée ici est de vous montrer comment créer une seule flèche ajustable. Vous pouvez ajouter votre propre style et variations plus tard.
Comme vous pouvez le voir dans l'image ci-dessus, la flèche va prendre plusieurs formes; nous devons être intelligents pour le créer. Premièrement, nous avons besoin d’un point de départ et d’un point final. Dans mon cas, c'est un cercle ouvert et un triangle. Le triangle est une icône SVG trouvée dans le projet de noms. Vous pouvez faire un simple triangle vous-même ou utiliser une icône.
j'utilise # 325372 pour la flèche, la bordure du cercle et pour la ligne. Le cercle a un fond blanc #FFFFFF aussi. Maintenant, transformez-les en symboles et nommez-les en fonction de ce qu’ils sont. Si vous voulez devenir un peu fou et créer des symboles individuels pour que le triangle soit en haut, en bas, à gauche ou à droite, alors foncez. Mais ce n'est pas nécessaire.
Suivant est la ligne elle-même. Créez une seule ligne de pixels avec l'outil Ligne. Quel que soit le style que vous avez, transformez le style de la ligne en style partagé. J'en ai deux; styles pleins et pointillés pour les flèches primaires et secondaires. Avoir plusieurs styles partagés facilitera la commutation entre eux. Plus sur cela plus tard.
Ensuite, nous devrons créer chaque type de flèche en combinant le point de départ, la ligne et le point final. Les flèches doivent être interchangeables pour la création du diagramme, faisons-le maintenant.
Tout d'abord, créons un plan de travail carré. Un carré nous aidera à garder tout la même forme et les flèches seront plus faciles à travailler ensuite. Le mien est 80px par 80px. Je veux commencer par créer une planche graphique pour chaque flèche. De cette façon, je pourrai les voir tous en même temps. Commençons par créer d’abord les flèches dirigées vers la gauche, la droite, le haut et le bas. Maintenant, sélectionnez vos flèches et transformez-les en symboles comme nous le faisons auparavant. N'oubliez pas d'utiliser également votre raccourci nouvellement configuré. Nommez ces symboles, flèche / défaut / gauche, flèche / défaut / droite et ainsi de suite (vous voyez l'idée).
Maintenant que les flèches les plus faciles sont prises en charge; Passons aux courbes. Cette partie est cruciale car nous avons besoin que les flèches soient facilement redimensionnables et ajustables. Je vais aller de l'avant et créer un de chacun pour les trois styles en premier.
Dans les nouveaux plans de travail, toujours d'une taille de 80 x 80 pixels, et en utilisant l'outil vectoriel (V), tracez les lignes de la flèche pour les styles L-Shape, S-Shape et U-Shape. Assurez-vous que vos lignes sont au carré. Ne faites pas de courbes vous-même pour l'instant. Si vous rencontrez des difficultés pour tracer des lignes parfaites, placez les points plus ou moins à leur place, puis modifiez-les manuellement en saisissant vous-même les positions X et Y.
Jetez un coup d'oeil à l'image. Ensuite, nous devons éditer les courbes. Pour chaque ligne, sélectionnez uniquement les points qui forment les coins. Ne sélectionnez pas les points de début ou de fin. Sur le côté droit, augmentez le nombre du coin à ce que vous voulez. Je mets le mien à 10px. Maintenant, les coins seront automatiquement redimensionnés sans déformer la ligne.
La dernière chose à faire est d'ajouter les points de départ et d'arrivée. Mais avant cela, transformons les lignes (juste les lignes pour le moment) en symboles. Nous voulons que la ligne soit ajustable en fonction de ses extrémités, de son début et de sa fin, à l’exception des icônes situées à ses extrémités. Nous allons ajouter les points de début et de fin dans une minute. Nommez ces trois flèches Flèche / Forme en L / Droite, Flèche / Forme en S / Droite-Bas-Droite et Flèche / Forme en U / Droite-Bas-Gauche.
Maintenant, double-cliquez sur l’un des symboles nouvellement créés pour le modifier. Nous voulons placer les points de début et de fin sur le bord du symbole et les aligner au centre avec les points de fin de la ligne. Idéalement, vous voulez placer les points de début et de fin centrés au coin des planches d’art du symbole.
Enfin, pour rendre les flèches redimensionnables, pour le point de départ et le point de fin, sous option de repos, sélectionnez largeur fixe et hauteur fixe. De plus, n'oubliez pas de les renommer Point de départ et Point de fin. Ce changement de nom permettra de savoir plus facilement quel est celui qui change lors du changement de type.
Nous devons répéter cela avec les flèches restantes, y compris les directions restantes des flèches en forme de L, en forme de S et en forme de U. Faites-le en répétant les étapes précédentes.
Vous pouvez avoir autant de styles de flèches que vous le souhaitez. pointillé, pointillé, solide ou autre chose. La partie fastidieuse est que vous allez devoir créer un nouvel ensemble de flèches pour chaque style si vous souhaitez en utiliser plusieurs dans le même fichier. Sinon, il suffit de mettre à jour le style partagé. N'oubliez pas de régler les conventions de dénomination sur Flèche / Forme de S / Droite-Bas-Droite / Pointillé ou Flèche / Pointillé / Forme de S / Droite-Bas-Droite.
Je pense que le développement le plus crucial est derrière nous. Les éléments restants ne sont pas très compliqués. Les éléments d’action incluent ici les éléments pour les indicateurs oui / non, une décision, un label d’action unique.
Les indicateurs Oui et Non nous permettent d’illustrer sur notre diagramme les points où la direction du flux est affectée par une action «oui» ou «non»..
Ces indicateurs sont simples (au moins comparés aux flèches). Je les ai créées en téléchargeant deux icônes du projet Noun. Voici un lien vers le chèque et un lien vers le X. Les icônes du projet de nom sont en blanc., #FFFFFF. Alors que la couleur de fond est # F89B8D pour 👎 et # FECD75 pour 👍🏿.
Transformez-les en symboles et nommez-les Annotation / Yes-No / 👎 et Annotation / Yes-No / 👍🏿 (oui, les émoticônes sont prises en charge.)
Le processus de création de cet élément est très similaire à la création de l'élément de page. Créez un carré (le mien est de 126px par 126px) et faites-le pivoter ou transformez-le en un angle de 45º. De plus, j'ai ajouté un rayon de 5 px sur le carré. Sa couleur de fond est # F2F2F2 , pas de frontière. Enregistrez-le en tant que style partagé. Sur le carré, nous avons besoin d'une zone de texte. J'ai intitulé mon calque de texte «Décision». Rappelez-vous, nommer les couches est important. Vous pouvez réutiliser le style de texte partagé si vous l'avez déjà enregistré. Sinon, le style du texte est # 325372 pour la couleur Helvetica Neue, poids moyen, 11 caractères. Si vous copiez mes styles, convertissez le style du texte et du carré en styles partagés..
Enfin, il est temps de convertir la décision en un symbole. Je vais le nommer Annotation / Décision.
L'étiquette d'action unique réutilisera les styles de l'élément décisionnel. C'est un rectangle; le mien est 117px par 24px. Réutilisez le même style à partir de l'indicateur de décision pour le rectangle et le texte. N'oubliez pas de nommer le calque de texte. J'ai nommé le mien «Action». Transformez-le en symbole et nommez-le Annotation / Action. Et nous avons fini ici; suivant!
Les deux dernières choses sur notre liste vont être les notes et les éléments d'étiquette. Commençons par l'étiquette. Celui-ci est un peu délicat mais rien que nous ne pouvons pas gérer. Pour faciliter la forme, vous pouvez copier le rectangle et le texte à partir de l'action effectuée précédemment. Nous aurons besoin d’un rectangle, le mien mesure 117px par 24px, avec un rayon de 5px. Il a # 6FCFDB pour le fond. Ensuite, la zone de texte. Réutilisez le style de texte des indicateurs d'action ou de décision. Ensuite, créez un nouveau style partagé appelé Label text et recolorez le texte en #FFFFFF. Ensuite, faites-les redevenir un symbole (avez-vous utilisé le raccourci et vous y êtes habitué? Excellent.)
Double-cliquez sur le nouveau symbole et sélectionnez le calque de texte. Nous devons modifier ses propriétés de redimensionnement. Nous devons l'épingler aux bords gauche et droit de l'objet. Parfois, Sketch le fait automatiquement pour vous, mais pas toujours, il est donc préférable de vérifier.
Enfin, nous avons les notes. Le style que j'ai pour ceux-ci est la suivante: A4A4A4 pour la couleur du texte, Helvetica Neue, un poids normal cette fois-ci et une taille de police de 11. C’est différent de tout ce qui a été fait jusqu’à présent. Ne transformez donc pas le texte en notes en symbole. Ajoutez-le uniquement en tant que style partagé.
Maintenant que nous avons terminé avec les formes et les éléments de base, nous pouvons maintenant rassembler les diagrammes de flux..
L'image ci-dessus montre tous les différents symboles que j'ai à ma disposition. C'est tout à fait une collection et j'ai essayé de la garder petite sans trop de personnalisation. L'image ci-dessous montre un exemple de flux de diagramme que j'ai créé à l'aide de ces symboles..
Tout ce que vous avez à faire est de sélectionner l'élément dont vous avez besoin dans la section des symboles et d'organiser un diagramme de flux sur votre planche graphique..
Bravo d'avoir suivi toutes ces étapes! Maintenant, vous avez un fichier Sketch assez cool qui vous permettra facilement, à vous ou à votre équipe, de créer des diagrammes de flux utilisateur et de flux de tâches!
Les étapes suivantes peuvent impliquer la création d’un guide de style pour vos diagrammes de flux; façons de changer facilement de couleur, de typographie, etc. Peut-être aussi créer de la documentation dans votre fichier Sketch si vous envisagez de l’utiliser avec vos coéquipiers ou de la donner en cadeau. Restez à l'écoute pour des tutoriels sur ces sujets bientôt!
Accentsconagua