Comment créer des flux UX avec Sketch et Auto Layout

Et accélérez votre flux de travail.

Téléchargez le fichier Sketch ici (vous devrez installer le plugin Auto Layout pour qu'il fonctionne correctement)

Introduction rapide

Personnellement, j'aime utiliser Sketch pour presque chaque étape de mon processus de conception de produit, mais il y a toujours eu quelques tâches qui m'ont obligé à quitter Sketch et à faire appel à d'autres applications. La création d’organigrammes en fait partie.

Je me trouvais à utiliser Google Draw pour créer des flux d'utilisateurs rapides, mais lorsque je voulais créer des flux d'images filaires basse ou haute fidélité, j'avais un problème. Comme j'aime créer toutes mes structures filaires dans Sketch, je cherche alors un moyen d'exporter les écrans à partir de Sketch. C'était déjà trop compliqué, simplement parce que je devais faire la navette entre les deux applications. Mais hier soir à 2 heures du matin un samedi soir (je ne sais pas pourquoi je regardais cela à cette époque non plus), je pense avoir trouvé une solution pratique.

En utilisant Sketch et Auto Layout, j'ai réussi à résoudre les deux problèmes principaux, à savoir la rapidité et la cohérence.

Les avantages

En utilisant cette méthode, vous pouvez créer des flux étendus avec une cohérence à 100%. Tout ce que vous avez à faire est de copier et coller un nouvel écran ou un nouveau groupe d’écrans. Tout le reste se réorganisera pour accueillir les nouveaux éléments tout en conservant les mêmes espacements. Il va même ajuster votre fond aussi! Cela économise beaucoup de temps perdu à essayer de tout uniformément espacer tout en vous donnant un meilleur résultat.

Plus d'espacement de mesure entre les écrans ou les groupes.

Étape 1 - Groupe de flux

Symbole d'écran

Commencez avec un symbole pour l’écran lui-même qui comporte une barre de titre pour l’écran et une zone vide pour le contenu de l’écran.

Pile de remplissage d'écran

Créez deux rectangles de chaque côté de l'écran en tant que rembourrage pour donner un peu plus de souffle. Créez ensuite votre première pile de disposition automatique, réglez-la sur horizontale, puis ajoutez l'espacement souhaité entre chaque écran dans la disposition automatique. Cela fait, je peux ensuite copier et coller de nouveaux écrans dans la pile et réorganiser les écrans automatiquement tout en conservant le bon espacement. (Réduisez ensuite l'opacité du remplissage à 0% afin qu'ils ne puissent pas être vus).)

Contexte réactif

Créez un symbole pour votre groupe d'arrière-plan qui sera un conteneur avec un arrière-plan gris et une barre de titre pour le groupe situé en haut. Définissez le fond pour redimensionner et épinglez la barre de titre en haut. Regroupez l’arrière-plan avec la pile de remplissage d’écran et utilisez les punaises gauche et droite de Layouts automatiques pour qu’il soit réactif lors de l’ajustement pour s'adapter aux nouveaux écrans.

Étape 2 - Piles de flux

Pile horizontale

Empiler deux piles de flux ou plus et définir l'espacement. Chaque fois que vous ajoutez une autre pile de flux, l'espacement entre chaque groupe sera constant.

Pile verticale

Empilez deux piles horizontales ou plus les unes sur les autres, puis définissez l'espacement. Cela vous permettra maintenant de copier et coller des piles horizontales.

Étape 3 - Contexte réactif

Rembourrage Horizontal

Pose de deux grands rectangles de remplissage, un au-dessus de la pile verticale et un en dessous. Regroupez-les et transformez le groupe en une autre pile horizontale.

Rembourrage Vertical

Répétez l'opération en regroupant le remplissage horizontal avec deux autres grands rectangles de remplissage, l'un au-dessus et l'autre au-dessous, transformant le groupe en une pile verticale.

Contexte réactif

Enfin, regroupez le remplissage vertical avec l’arrière-plan et épinglez les quatre bords de l’arrière-plan. Maintenant, l'arrière-plan sera redimensionné lorsque vous dupliquez l'un des éléments!

Étape 4 - Bonus Brucie

Symboles imbriqués

Utilisez des symboles imbriqués à l'intérieur des symboles d'écran pour modifier facilement le contenu de chaque écran. J'utilise quelques modèles d'écran de base pour mes flux basse fidélité. Notez aussi que je groupe

TERMINÉ!

N'oubliez pas que vous pouvez réutiliser l'espacement à l'une des extrémités d'une pile de flux pour créer des divisions plus grandes entre les écrans afin de créer des sous-groupes.

Téléchargez le fichier Sketch ici (vous devrez installer le plugin Auto Layout pour qu'il fonctionne correctement)

Quelques crédits

Kickpush - Ce sont des inspirations massives. Lorsque j'ai vu leurs structures en fil de fer pour la première fois, j'ai été époustouflé par 1) leur beauté. 2) à quel point ils sont clairs et lisibles. Commander leurs processus-Wireframes et site Web www.kickpush.com

Animaapp - Cette technique ne serait pas possible sans cet incroyable plugin Auto-Layout plugin

Pablo Stanley - A une excellente façon d’expliquer comment ça marche, jetez un oeil à son tutoriel sur la mise en page automatique ici. Youtube-tutorial

À votre santé

Je ne sais pas si quelqu'un était capable de suivre ce lol, mais j'ai un jeu avec le fichier source et découvrez quelques tutoriels sur la mise en page automatique.

J'espère que quelqu'un trouvera cela utile. Il s’agissait de mon premier tutoriel, merci de répondre à vos questions ou à vos commentaires.

Vous pouvez trouver plus de moi à https://dribbble.com/yeta1