Accentsconagua
Share
Ce que vous allez créerIl y a quelque temps, nous avons publié un didacticiel sur la création d'un fichier Sketch personnalisé avec des diagrammes de flux réutilisables. C'est une excellente ressource pour créer vos propres flux d'utilisateurs ou plans Sitemap. Dans ce tutoriel, nous allons renforcer ce fichier Sketch afin de le rendre plus utilisable par d'autres.
Vous pouvez avoir des collègues qui souhaitent utiliser votre fichier, ou peut-être des clients payants. Quoi qu’il en soit, les améliorations que nous apportons au fichier permettront à d’autres personnes de l’ouvrir, de le comprendre et de l’utiliser..
Je vous recommande d'aller de l'avant et de lire le didacticiel original. À tout le moins, prenez le fichier Sketch final pour commencer du bon pied et suivez cette deuxième partie. Ce didacticiel est rempli de trucs et astuces Sketch, de quelques astuces professionnelles ici et là, ainsi que de quelques plugins connexes que vous devez essayer par vous-même..
La toute première chose à faire est de créer une nouvelle page. J'appelle le mien "Manuel de l'utilisateur". Cette page vous aidera à utiliser les éléments du diagramme de flux. Nous allons l'utiliser pour expliquer le rôle de chaque élément, comment les utiliser et comment manipuler leurs propriétés, comme les points de départ des flèches..
Nous allons commencer avec un nouveau tableau d’art, j’appelle le mien “Comment utiliser les flèches”. presse UNE pour créer un nouvel Artboard et dans le coin supérieur droit, sélectionnez Taille de papier et Lettre. Sketch placera automatiquement le tableau de la bonne taille pour vous (cela fonctionne aussi avec les tailles d'écran de bureau et mobile!).
Formats de papier pour les planches d'art dans SketchJe souhaite que les nouveaux utilisateurs comprennent certaines choses, notamment comment sélectionner une ligne et la placer sur un tableau, modifier sa forme et modifier ses points de départ et d'arrivée. Comment vous expliquez ces choses est votre choix; les descriptions spécifiques et les instructions sont à vous. J'ai amélioré mes descriptions en incluant quelques captures d'écran.
Comme pour les symboles ou les styles de calque, nous pouvons également organiser les styles de texte. Pour ces pages de manuel, j'ai trois styles de texte différents, H1, H2, et corps.
ma H1 est Helvetica Neue, Régulière, 24px avec une hauteur de trait de 30px. le H2 est Helvetica Neue, Bold, 14px avec une hauteur de trait de 20px. le corps Helvetica Neue, Regular, de taille 12px avec une hauteur de trait de 20px. Tous les trois utilisent la couleur # 325372.
Nous pouvons utiliser la syntaxe d'organisation de Sketch pour organiser ces styles dans le menu déroulant. Je les ai nommés comme suit, ce qui se reflète dans le menu déroulant ci-dessus:
J'adore ça, cela rend mes fichiers Sketch tellement plus organisés!
La page suivante du manuel de l’utilisateur discutera des annotations. Pour gagner du temps, copiez la page de la flèche et modifiez le texte et les images afin de refléter les annotations. Pour les annotations, nous devons discuter des éléments suivants: ajouter à une page, sélectionner une annotation différente et redimensionner.
Dans le didacticiel initial, nous nous sommes assurés que les annotations Action et Label étaient redimensionnables manuellement avec les propriétés natives de Sketch. Cependant, si vous voulez utiliser un plugin cool pour faire le redimensionnement pour vous, puis-je vous suggérer de télécharger et d'utiliser Rebel Button ou Paddy?
Enfin, j'ajoute une page pour «Comment utiliser les pages». J'ai inclus les instructions par défaut sur l'ajout d'une page à la planche graphique et sur la modification du texte par défaut de la "page d'accueil"..
Pointe: si vous avez besoin de placer vos éléments avec précision, sélectionnez un élément et appuyez sur Option sur votre clavier. Lorsque votre souris survolera les autres éléments de la planche graphique, les indicateurs relèveront les distances de pixels exactes qui les séparent..
La prochaine chose que nous devons mettre en place est le guide de style. J'ai créé une nouvelle page et vous l'avez deviné, je l'ai appelée «Guide de style». Comme tout autre guide de style, ceci est destiné à présenter aux utilisateurs les différents styles utilisés dans le fichier. Dans le guide de style, je vais aborder les couleurs, la typographie et les styles de calque, y compris les styles de lignes de flèche (uni ou en pointillé)..
Dans la conception originale des diagrammes de flux, j'ai utilisé neuf couleurs différentes. Créons donc une nouvelle planche graphique spécialement pour eux. Placez toutes les couleurs sur la page et nommez-les. Le truc cool vient ensuite!
Je vais maintenant ajouter ces couleurs en tant que styles. De cette façon, si quelqu'un veut personnaliser les couleurs des différents éléments, il peut.
Tout d'abord, la syntaxe: Styles / Couleur / Nom de la couleur. Alors, Styles / Couleur / Erreur rouge ou Styles / Couleur / Arrière-plan bleu. Une fois que vous avez fini de les ajouter, regardez et admirez l’organisation soignée de ces couleurs dans le Style de calque menu déroulant! De plus, vous pouvez voir qu'il reste des styles dans le didacticiel d'origine. Nous arriverons à les organiser un peu plus tard.
La première raison pour toutes les couleurs présentées est de montrer ce qui est utilisé (comme le ferait un guide de style). La deuxième raison est un recoloriage facile. Cela ne s'appliquera pas à tous les différents éléments utilisés (tels que le texte), mais cela pourrait facilement affecter ceux avec juste un fond comme le Oui et Non annotations. Nous allons essayer de faire exactement la prochaine.
Retournez à la page des symboles. Ensuite, appliquez les mêmes styles que nous venons de créer aux éléments Action, Label, Yes et No. De cette façon, si vous décidez que vous ne voulez plus que le oui soit jaune mais vert, il vous suffit de mettre à jour la couleur dans le guide des styles et tous les oui du fichier Sketch entier changeront de couleur..
Pour faciliter votre flux de travail, vous souhaiterez peut-être enregistrer vos couleurs dans les couleurs du document. Cela les rendra plus faciles d'accès à tout moment.
Si vous aimez être organisé, je vous suggère de télécharger le plugin Sort Me. Il trie les calques et les planches, alphabétiquement et numériquement (ou inversement). Voici d'autres ressources d'efficacité pour Sketch:
Le prochain guide de style que nous devons créer concerne la typographie. Nous voulons afficher tous les styles de texte dans le document et je souhaite les diviser en deux catégories: les textes de document (comme dans le manuel et le guide de style ici) et ceux dans les organigrammes..
J'aimerais maintenant vous montrer comment réorganiser vos styles de texte actuels et les renommer (si nécessaire). Du Style de texte dérouler, sélectionnez la toute dernière option Organiser les styles de texte… Cela fera apparaître une nouvelle fenêtre contenant chacun de vos styles de texte. Si vous double-cliquez sur un, vous pouvez le renommer. Je veux que vous les renommiez comme suit:
Je souhaite également que vous renommiez les trois «textes du manuel» en «texte du document». Nous avons créé les noms initiaux dans l'intention de les utiliser simplement dans la documentation du manuel de l'utilisateur, mais depuis lors, nous avons ajouté le guide de style, ce qui rend la convention de dénomination moins précise. Comme vous pouvez le voir, renommer les styles de texte est simple. Si vous orthographiez mal un nom ou si votre convention de nommage doit être mise à jour, ce n'est pas un problème!
Pointe: la petite icône moins [-] dans le coin inférieur gauche supprimera le style sélectionné. Mais faites attention: il n'y a pas d'annulation et il ne vous demande pas si vous êtes sûr.
Mettez à jour le style de texte dans le guide de style pour mettre à jour la typographie dans tout le fichier (comme avec les couleurs).
Cela va être le dernier tableau sous la section guide de style. Nous verrons ici comment recolorer et traiter les éléments restants, le symbole de page et le symbole d'annotation de décision. Nous discuterons des flèches en dernier, juste après avoir terminé la section des styles partagés.
Si vous revenez à la section Couleurs, vous vous souviendrez que nous avions quelques styles supplémentaires que j'ai dit que nous organiserons plus tard. Eh bien, le moment est venu! L'idée est exactement la même qu'avec l'organisation des styles de texte. Choisissez d'organiser le style de calque; vous pouvez les renommer, les organiser et les supprimer comme avec les styles de texte.
Pour les styles de calque, je veux que vous conserviez chacun des styles / couleurs /… que nous avions précédemment créés. Ensuite, renommez le reste comme suit:
Pointe: appuyer sur la touche de tabulation ne permet pas de parcourir la liste des noms de style de la même manière que dans la liste des couches. Au lieu de cela, dans cette fenêtre, la touche Tabulation permet d’éditer ou non le nom du style sélectionné. Basculez-le une ou deux fois pour voir exactement ce que je veux dire!
Rappelez-vous l'icône moins [-] je l'ai mentionné auparavant? C'est pour supprimer des styles. J'ai besoin de toi pour supprimer Gris de fond. Il s'agit d'un vestige de mon exploration initiale de la conception et n'est utilisé nulle part..
Enfin, fermez la fenêtre, sélectionnez l’arrière-plan de l’annotation de décision, puis sélectionnez Créer un nouveau style de calque, de la liste déroulante. Nommez le nouveau style “Background / Decision”. Nous allons maintenant ajuster les styles de ceux-ci, à la page du guide de style. Copier les arrière-plans de l'annotation de décision et des éléments de page.
De retour dans le guide de style, collez les deux arrière-plans dans la planche de travail Flèches et éléments. (Je ne ferai que copier la page et l'annotation de décision.)
Juste pour vous donner un exemple concret de changement de style et de mise à jour universelle, je souhaite que nous changions le style d'arrière-plan de l'annotation de décision. C'est pourquoi je vous ai demandé de créer un style de calque distinct pour celui-ci, afin que cela n'affecte pas l'annotation d'action. Changez-le en tout ce que vous voulez, il ne doit pas nécessairement correspondre à la conception. Ajoutez une bordure de 1px avec la couleur de votre choix et une nouvelle couleur d’arrière-plan..
Une fois que vous avez terminé, de la Style de calque liste déroulante sélectionnez Mise à jour du style de calque. Si vous accédez à la page exemple de diagramme de flux ou à la page de symboles, vous verrez que les styles ont été mis à jour. C'est un excellent exemple des styles de mise à jour en action. C’est exactement ce à quoi vous devez vous attendre si vous mettez à jour le document pour un nouveau style, tel que différentes couleurs de marque..
Pointe: si vous modifiez le style d'un élément avec un style de calque, vous pouvez le ramener au style d'origine en sélectionnant Réinitialiser le style de calque.
D'accord, nous avons découvert les derniers atouts et tout est axé sur les flèches! J'ai laissé le meilleur pour la fin, naturellement. Tout d’abord, nous devons ajouter des flèches à notre guide de style. À l'heure actuelle, nous n'avons qu'un type de flèche à notre disposition. Cependant, si vous vous en souvenez, lors du nettoyage du style de la couche, nous avions une ligne continue et une ligne en pointillé. Ajoutons les flèches en pointillés à notre collection.
Dans la page des symboles, je souhaite que vous copiiez la première flèche, la flèche / défaut / droite, et que vous la renommiez flèche / pointillé / par défaut / droite. Sélectionnez la ligne de la flèche et de la Styles de calque liste déroulante sélectionnez Ligne de flèche puis À pois. Et c'est tout! Nous avons notre première flèche en pointillé.
Deux autres choses ici. Tout d’abord, allez-y et reportez-vous aux flèches restantes. Tenez-vous en à la convention des noms Arrow / Dotted /… pour garder une organisation bien organisée Symboles menu déroulant. En parlant de conventions de noms et de syntaxes, la deuxième chose à faire est de renommer chacune des flèches en trait plein d'origine. le Symboles la liste déroulante va être désordonnée si vous ne le faites pas.
Utilisez le plugin Rename It Sketch pour rendre cela plus fluide pour vous! Sélectionner Plugins> Renommer> Rechercher et remplacer les noms de calques / d’artboard. Ou vous pouvez appuyer sur le Contrôle + Option + Commande + R pour que la fenêtre du plugin apparaisse. Là, tapez Arrow / Default ou Arrow / S-Shape et remplacez-le par Arrow / Solid / Default et Arrow / Solid / S-Shape et ainsi de suite. Assurez-vous que le champ de recherche actuel est sélectionné pour Page actuelle au lieu de Couche.
La dernière chose en matière de flèches est le début et la fin. Dans le premier tutoriel, je vous ai montré comment ajouter différents exemples, tels que les grandes lignes. Ajoutez autant de styles que vous le souhaitez. Lorsque vous avez terminé, n'oubliez pas d'inclure également tous les nouveaux et impressionnants points de début et de fin dans le guide de style..
Et avec cela, nous avons fini de créer le guide de style!
Le but de ce didacticiel était de développer l'original et de vous apprendre à utiliser Sketch de manière plus impressionnante. Dans le même temps, vous aurez trouvé des moyens pratiques d’améliorer et de regrouper tous vos fichiers Sketch afin de les rendre plus utilisables pour les membres de l’équipe et les clients..
