Thèmes, règles, guides et grilles

Dans Introduction à l'espace de travail, nous avons fourni une vue d'ensemble du bouton Paramètres et des options.

Cet article explique comment modifier le thème visuel de l'éditeur. Nous vous montrerons également comment utiliser nos règles, guides, grilles, accrochage et fonctionnalités de mesure pour accélérer votre flux de travail lorsque vous positionnez des objets sur la page.

Nous expliquerons comment afficher ou masquer toutes ces options – ainsi que nos zones cliquables, contrôles de zoom et outils de collaboration en direct.

L'article suivant, Paramètres avancés, couvre des contrôles plus granulaires qui affectent ce que l'éditeur affiche, et comment votre curseur interagit avec les objets sur la page.

Thèmes

Vous pouvez modifier l'apparence de l'éditeur en changeant son thème. Le thème par défaut est le mode Clair, mais vous pouvez facilement passer aux modes Sombre, Classique, Neutre ou Minuit. Vous pouvez également choisir l'option Correspondre au système si vous souhaitez que Moqups reflète les paramètres de votre navigateur.

Pour modifier le thème de l'éditeur :

1. Cliquez sur le bouton Paramètres vers le bas de la Barre latérale gauche.
2. Survolez l'option Thème et sélectionnez parmi les options Clair, Sombre, Classique, Neutre, Minuit ou Correspondre au système.

Règles de page

Les Règles de page apparaissent le long des marges gauche et supérieure de votre canevas, et sont calibrées en pixels.

Les règles sont activées par défaut, et doivent être affichées si vous souhaitez ajouter des Guides personnalisés à votre page.

Pour afficher ou masquer les règles :

1. Cliquez sur le bouton Paramètres vers le bas de la Barre latérale gauche.
2. Sélectionnez ou désélectionnez l'option Montrer les règles dans le menu déroulant.

Guides personnalisés

L'ajout de Guides personnalisés à la page peut aider votre équipe avec le positionnement relatif des objets ou des groupes d'objets.

Les guides sont visibles, sous forme de fines lignes bleues, uniquement en mode Édition, où ils servent d'outils temporaires de mise en page et d'alignement. Ils ne seront pas visibles lorsque vous prévisualisez ou exportez votre page.

Lorsque vous choisissez d'afficher, de masquer ou d'effacer des guides, vous le faites pour tous les collaborateurs disposant de droits de modification.

Avant d'ajouter des guides personnalisés, vous devez vous assurer que l'option Montrer les règles du menu Paramètres est sélectionnée, et que les règles sont visibles le long des marges du canevas.

Ajouter des guides

Pour ajouter un guide horizontal ou vertical :

Cliquez sur n'importe quel point le long de la règle

ou

Cliquez et faites glisser depuis la règle vers la page

Afficher ou masquer les guides

Dans le menu déroulant Paramètres, l'option Afficher les guides personnalisés est sélectionnée par défaut. Lorsqu'elle est désélectionnée, elle sera automatiquement réactivée si vous cliquez n'importe où le long des règles.

Pour afficher ou masquer les guides :

1. Cliquez sur le bouton Paramètres vers le bas de la Barre latérale gauche.
2. Sélectionnez ou désélectionnez l'option Afficher les guides personnalisés dans le menu déroulant.
3. Votre choix s'appliquera au projet dans son ensemble.

Ajuster ou supprimer des guides individuels

Pour ajuster des guides individuels, survolez la ligne bleue jusqu'à ce que vous voyiez l'outil d'ajustement, puis cliquez et faites glisser le guide pour le déplacer.

Pour supprimer des guides individuels d'une page, survolez la ligne bleue jusqu'à ce que vous voyiez l'outil d'ajustement, puis cliquez et faites glisser le guide hors du canevas et au-delà de la règle.

Effacer tous les guides

Pour supprimer définitivement tous les guides d'une page sélectionnée :

1. Cliquez sur le bouton Paramètres vers le bas de la Barre latérale gauche.
2. Sélectionnez l'option Supprimer les guides dans le menu déroulant.
3. Cliquez sur OK pour confirmer.

Grilles de page

Les grilles peuvent accélérer votre flux de travail en établissant des structures claires et des hiérarchies visuelles pour les designs de votre équipe. Cela supprime les approximations – et maintient la cohérence de votre équipe – lorsqu'ils dimensionnent, positionnent et espacent les éléments sur une variété de pages, plateformes et maquettes d'appareils.

Moqups dispose de deux configurations de grille, la Grille quadrillée et la Grille de mise en page, et elles peuvent être utilisées séparément ou en combinaison.

Les guides sont visibles uniquement en mode Édition, où ils servent d'outils temporaires de mise en page et d'alignement. Ils ne seront pas visibles lorsque vous prévisualisez ou exportez votre page.

Afficher et masquer les grilles

Les Grilles sont désactivées par défaut. Avant d'ajuster leurs paramètres, vous devrez les rendre visibles.

Pour afficher ou masquer les grilles :

1. Cliquez sur le bouton Paramètres vers le bas de la Barre latérale gauche.
2. Sélectionnez ou désélectionnez les options Montrer la grille quadrillée et/ou Montrer la grille de mise en page.
3. Votre choix s'appliquera au projet dans son ensemble.

Grille quadrillée

La Grille quadrillée ressemble à du papier millimétré traditionnel et se compose de carrés ou rectangles subdivisés et ajustables.

Pour ajuster les Paramètres de la grille quadrillée :

1. Cliquez sur le bouton Paramètres vers le bas de la Barre latérale gauche.
2. Assurez-vous d'avoir déjà sélectionné Montrer la grille quadrillée.
3. Sélectionnez l'option Paramètres des grilles quadrillées.
4. Dans la fenêtre contextuelle des Paramètres de la grille quadrillée, ajustez la largeur et la hauteur des blocs composants de la grille.
5. Cochez la case Tracer une grille quadrillée au-dessus des objets si vous souhaitez que la grille superpose votre design.
6. Cliquez sur Appliquer.

Grille de mise en page

La Grille de mise en page suit les protocoles établis en premier dans les médias imprimés, qui définissent les marges, les colonnes et les gouttières pour vos pages. Ensemble, ils peuvent fournir l'armature sous-jacente à la structure de votre page, et déterminer la quantité d'espace 'blanc' ou 'négatif' entre vos blocs de contenu.

Les Paramètres de la grille de mise en page vous permettent de saisir des valeurs et d'ajuster ces éléments comme suit :

• Préréglage de grille : Choisissez entre des valeurs exprimées en tailles de pixels Fixes, ou en pourcentages Réactifs de la page.
• Colonnes : Définissez le nombre total de colonnes.
• Largeur de colonne : Définissez la largeur de toutes les colonnes.
• Gouttière : Définissez l'espace entre les colonnes.
• Marges gauche/droite : Définissez l'espace entre les colonnes les plus à l'extérieur et le bord de la page.

Pour ajuster les Paramètres de la grille de mise en page :

1. Cliquez sur le bouton Paramètres vers le bas de la Barre latérale gauche.
2. Assurez-vous d'avoir déjà sélectionné Montrer la grille de mise en page.
3. Sélectionnez l'option Paramètres de la grille de mise en page pour ouvrir la fenêtre contextuelle des Paramètres de la grille de mise en page.
4. Définissez le Préréglage de grille et entrez des valeurs pour personnaliser votre grille.
5. Cochez la case Tracer une grille de mise en page au-dessus des objets si vous souhaitez que la grille superpose votre design.

Accrochage et mesure

L'Espace de travail offre un certain nombre d'outils d'accrochage et de mesure pour rendre votre flux de travail plus rapide et plus précis :

Accrochage

Les trois options d'accrochage (décrites ci-dessous) sont activées par défaut, mais vous pouvez les désactiver individuellement dans le menu déroulant Paramètres. Les objets s'accrocheront à leur cible lorsqu'ils sont à moins de 3 pixels.

Accrocher à des grilles et à des guides :

Les objets s'accrocheront automatiquement à vos guides personnalisés, ou aux lignes de vos grilles telles que vous les avez définies :

Accrocher à la page :

Les objets s'accrocheront automatiquement aux bordures verticales et horizontales de la page. Ils s'accrocheront également au centre de la page depuis leurs bordures et leur centre :

Accrocher à d'autres objets :

Les objets s'accrocheront automatiquement pour s'aligner avec le centre et les bordures d'autres objets sur la page :

Capture à distance

La Capture à distance vous permet d'espacer rapidement plusieurs objets à égale distance. Si vous avez trois objets ou plus sur la page, et que vous en alignez deux, la Capture à distance s'activera pour vous aider à aligner le reste.

Pour activer ou désactiver la capture à distance :

1. Cliquez sur le bouton Paramètres vers le bas de la Barre latérale gauche.
2. Sélectionnez l'option Paramètres avancés pour ouvrir la fenêtre contextuelle des Paramètres avancés.
3. Cliquez sur la case à cocher Activer la capture à distance.

Mesure

Lorsque vous déplacez des objets sur la page, nos outils de mesure peuvent vous aider à positionner ces éléments de page avec précision. Voici comment les trouver, et une brève description de leur fonctionnement :

Pour en sélectionner un, cliquez sur l'option Paramètres avancés dans le menu déroulant Paramètres pour ouvrir la fenêtre contextuelle des Paramètres avancés. Une fois que vous avez coché les cases appropriées, cliquez sur Terminé.

Afficher l'infobulle sur les coordonnées :

Une infobulle discrète affiche les coordonnées d'un objet sélectionné lorsque vous déplacez cet objet sur la page et le canevas.

Montrer les annotations sur les guides de capture :

Lorsque vous déplacez un objet sur la page, cette option affiche la distance de l'objet, en pixels, par rapport aux autres éléments voisins.

Montrer les guides lorsque vous maintenez la touche Alt enfoncée :

Maintenez la touche Alt/Option enfoncée pour afficher des guides en ligne rose qui indiquent la distance d'un objet sélectionné par rapport aux quatre marges de la page.

Et, si vous avez besoin de mesurer manuellement une distance, n'oubliez pas notre pratique Stencil de spécifications de distance. Récupérez-le dans la catégorie Outils de spécifications du Panneau des stencils au besoin, ou laissez-en un juste à l'extérieur de la bordure de la page, dans le canevas, pour un accès rapide et pratique :

Afficher et masquer les zones cliquables

Le menu déroulant de l'espace de travail vous permet d'afficher ou de masquer toutes les Zones cliquables que vous avez ajoutées à un projet pendant la construction de votre prototype. Vous pouvez également le faire directement depuis le Panneau des interactions.

Taille

Pour afficher ou masquer les zones cliquables :

1. Cliquez sur le bouton Paramètres vers le bas de la Barre latérale gauche.
2. Sélectionnez ou désélectionnez l'option Montrer les zones cliquables.

Afficher et masquer les indicateurs d'interaction

Afficher les indicateurs d'interaction ajoute un badge lumineux aux objets avec des interactions – sur la page et dans le Panneau de contour – pendant que vous êtes en mode Édition. Vous pouvez également sélectionner ou désélectionner cette option depuis le Panneau des interactions lui-même.

Pour afficher ou masquer les indicateurs d'interaction :

1. Cliquez sur le bouton Paramètres vers le bas de la Barre latérale gauche.
2. Sélectionnez ou désélectionnez l'option Afficher les indicateurs d'interaction.

Afficher et masquer les outils de collaboration en direct

Moqups dispose d'outils de Collaboration en direct pour aider vos équipes à distance et distribuées à travailler ensemble en temps réel.

• La Présence en direct vous permet de voir qui collabore activement sur un projet.
• Le Chat en direct aide votre équipe à partager des idées et à clarifier les problèmes.
• La Sélection en direct vous permet de rejoindre directement l'endroit où vos collègues travaillent.
• Les Curseurs en direct affichent le curseur d'un collègue pendant qu'il édite.

Pour afficher ou masquer les curseurs, sélections, ou présence et chat des collaborateurs :

1. Cliquez sur le bouton Paramètres vers le bas de la Barre latérale gauche.
2. Sélectionnez ou désélectionnez les options de collaborateurs en direct.

Questions et réponses

Puis-je verrouiller des guides personnalisés comme je peux verrouiller des objets ?

Non, les guides ne peuvent pas être verrouillés.

Le masquage des grilles améliorera-t-il les performances ?

Les utilisateurs de Chrome avec des pages de plus de 10 000 pixels peuvent connaître des ralentissements s'ils ont la Grille de mise en page affichée. Si cela se produit, désélectionnez simplement l'option Montrer la grille de mise en page.