Zones cliquables

Une zone cliquable est un objet interactif dédié auquel vous pouvez ajouter une Interaction de Page ou d'Objet.

Bien que les zones cliquables se comportent comme d'autres objets pour ce qui est du déplacement, du redimensionnement, du regroupement et du verrouillage, elles sont conçues pour être invisibles dans un prototype interactif. En conséquence, elles fonctionnent différemment des autres objets à la fois en mode Édition et en mode Aperçu :

• En Mode Édition, elles apparaissent comme un calque vert translucide pour que vous puissiez travailler avec elles et voir où elles ont été appliquées. Mais vous pouvez également choisir de les masquer pour qu'elles ne gênent pas votre travail en cours.
• En Mode Aperçu, les zones cliquables sont actives et répondront aux actions de l'utilisateur (appelées « déclencheurs »). En mode Aperçu, les zones cliquables sont invisibles par défaut – bien que vous puissiez les rendre temporairement visibles en maintenant la touche Shift enfoncée.

L'avantage d'utiliser une zone cliquable – plutôt que d'appliquer une Interaction de Page ou d'Objet à un objet existant – est que vous pouvez ajuster sa taille et sa forme, indépendamment des objets sur la page. Cela signifie que vous pouvez ajouter de l'interactivité sur une zone spécifique d'une page ou d'un groupe d'objets.

Voici quelques cas d'usage pour les zones cliquables :

• Appliquer plusieurs zones d'interactivité à une image plus grande téléchargée, comme un design terminé
• Définir des zones d'interactivité spécifiques pour des stencils composés de plusieurs éléments, comme des menus

Ajouter des zones cliquables

Vous pouvez ajouter une zone cliquable, soit à l'emplacement de votre curseur, soit sur un objet spécifique. Ou bien, vous pouvez dessiner la zone cliquable vous-même à l'aide de la boîte à outils Dessin rapide.

Tout comme tous les autres objets – stencils, images, icônes et modèles – les zones cliquables sont listées dans le Panneau de contour. Lorsque des zones cliquables sont ajoutées à la page, elles apparaissent tout en haut de l'Arborescence. Par défaut, elles sont nommées par numéro, selon l'ordre dans lequel elles ont été ajoutées à la page. Pour changer le nom d'une zone cliquable, il suffit de double-cliquer sur son titre actuel dans l'Arborescence.

Ajouter une zone cliquable à la page

Pour ajouter une zone cliquable à l'emplacement de votre curseur :

1. Sans objet sélectionné, faites un clic droit sur la page et cliquez sur Ajouter une zone cliquable

   ou

   Cliquez sur le bouton Ajouter une zone cliquable dans le Panneau d'Interactions

Pour créer une zone cliquable sur un objet spécifique :

1. Faites un clic droit sur la page et cliquez sur Ajouter une zone cliquable

   ou

   Cliquez sur le bouton Ajouter une zone cliquable dans le Panneau d'Interactions

2. Une zone cliquable apparaîtra sur le cadre de l'objet et correspondra à ses dimensions

Dessiner une zone cliquable sur la page

Pour dessiner une zone cliquable depuis la boîte à outils Dessin rapide ou le raccourci clavier :

1. Cliquez sur le bouton Zone cliquable dans le menu déroulant, ou appuyez sur la touche H.
2. Cliquez et faites glisser le curseur en croix pour créer une ou plusieurs zones cliquables.
3. Ajoutez des interactions en utilisant le panneau d'Interactions

Comportement collant des zones cliquables

Les zones cliquables collantes sont très utiles si vous ajoutez une zone cliquable à un élément au sein d'un groupe d'objets, ou à une zone spécifique au sein d'un seul objet. Par exemple, vous pourriez faire cela pour créer un point ou un bouton cliquable dans cette zone plus grande. Ainsi, lorsque vous réorganisez le design, la zone cliquable se déplacera avec lui.

Cependant, si la zone cliquable a exactement la même taille qu'un objet ou un groupe, vous devez déplacer la zone cliquable de côté pour saisir l'objet et le déplacer. Dans ces circonstances, il est donc préférable d'appliquer une interaction d'objet plutôt qu'une zone cliquable.

Par défaut, le comportement collant est activé pour toutes les zones cliquables, mais vous pouvez le désactiver dans le Panneau de format.

Pour activer ou désactiver le comportement collant d'une zone cliquable :

1. Sélectionnez une zone cliquable
2. Allez dans la Barre Latérale Droite et cliquez sur l'Onglet Format pour ouvrir le Panneau de format
3. Accédez à la section Comportement collant.
4. Cliquez sur le bouton Collant ou Normal pour appliquer ce comportement
5. Faites glisser la zone cliquable sur l'objet ou le groupe auquel vous souhaitez qu'elle se colle

Formater les zones cliquables

Après avoir créé une zone cliquable, vous pouvez ajuster sa taille, sa position ou arrondir ses coins. Vous pouvez également choisir de masquer les zones cliquables en les rendant invisibles.

Taille

Sur la page, utilisez les poignées de redimensionnement pour modifier la taille de la zone cliquable.

Dans le Panneau de format, utilisez les champs Largeur & Hauteur pour des valeurs précises et des ajustements fins, et utilisez les touches fléchées du clavier si vous souhaitez modifier ces valeurs de manière incrémentale.

Verrouillez les proportions d'une zone cliquable avec le bouton Verrouiller le format. Une fois une zone cliquable verrouillée, vous devrez déverrouiller le format si vous souhaitez la redimensionner sur l'axe horizontal ou vertical.

Position

Sur la page, sélectionnez une zone cliquable et faites-la glisser vers la position souhaitée.

Dans le Panneau de format, définissez la position de la zone cliquable en saisissant les coordonnées exactes dans les champs de saisie. La position de votre zone cliquable est mesurée en pixels depuis les marges gauche et supérieure. Vous pouvez utiliser les touches fléchées de votre clavier pour modifier ces valeurs de manière incrémentale.

Coins arrondis

Vous pouvez arrondir les coins d'une zone cliquable pour qu'elle corresponde à vos graphiques ou boutons :

Pour arrondir les coins d'une zone cliquable :

1. Sélectionnez une zone cliquable
2. Allez dans la Barre Latérale Droite et cliquez sur l'Onglet Format pour ouvrir le Panneau de format
3. Accédez à la section Coins arrondis.
4. Par défaut, l'arrondi en pixels s'applique à tous les coins, mais vous pouvez cliquer sur le bouton Désynchroniser les coins pour ajuster chacun séparément.
5. L'option Mise à l'échelle des rayons ajuste la taille en pixels afin de maintenir les proportions de l'arrondi lorsque vous agrandissez ou réduisez un objet.

Visibilité

En Mode Édition, toutes les zones cliquables d'une page sont visibles avec un calque vert translucide.

Si vous souhaitez rendre toutes les zones cliquables invisibles pendant que vous travaillez sur le projet :

1. Cliquez sur l'Onglet Interactions pour ouvrir le Panneau d'Interactions
2. Allez dans la section Options et décochez Montrer les zones cliquables

Ajouter des interactions aux zones cliquables

Chaque interaction est composée de trois parties : un Déclencheur, une Action et une Cible.

• Un Déclencheur est l'événement qui met une interaction en mouvement.
• Une Action est une instruction qui s'exécute après qu'un déclencheur est activé.
• Une Cible est le résultat final visible à la fin d'une interaction.

Le processus d'ajout d'une interaction à une zone cliquable est exactement le même que l'ajout d'une interaction à n'importe quel autre objet. Cependant, dans ce cas, l'« objet » est une zone cliquable invisible représentant une zone interactive sur la page.

Vous pouvez ajouter des Interactions de Page ou des Interactions d'Objet à une zone cliquable.

Consultez nos articles sur les Interactions de Page et les Interactions d'Objet pour plus d'informations sur ces interactions, ainsi que des instructions détaillées sur la façon de les appliquer à tous les objets, y compris les zones cliquables.

Mais si vous souhaitez commencer immédiatement, voici quelques instructions brèves :

Pour ajouter une Interaction à une zone cliquable :

1. Sélectionnez la zone cliquable à laquelle vous souhaitez ajouter l'interaction
2. Cliquez sur l'Onglet Interactions pour ouvrir le panneau
3. Choisissez un Déclencheur dans le menu déroulant supérieur
4. Dans le deuxième menu déroulant, sélectionnez une Action dans la liste des Interactions de Page ou Interactions d'Objet
5. Définissez une Cible, en utilisant le menu déroulant ou le bouton viseur, pour sélectionner un objet ou une page comme point final de l'interaction.
6. Cliquez sur Terminé pour appliquer l'interaction

Modifier, dupliquer ou supprimer des interactions

Lorsque vous appliquez une interaction à un objet, elle apparaît immédiatement dans la Liste des Interactions en haut du Panneau d'Interactions. À mesure que vous ajoutez d'autres interactions au même objet, vous les verrez apparaître là également. Vous pouvez facilement modifier ou supprimer n'importe quelle interaction de la liste – ou dupliquer une interaction pour une réutilisation rapide.

Modifier une Interaction

Modifier une interaction est utile lorsque vous souhaitez changer des parties d'une interaction déjà existante. En utilisant la fonction de modification, vous pouvez mettre à jour le Déclencheur, l'Action ou la Cible individuellement – sans affecter les autres parties de l'interaction.

Pour modifier une interaction :

1. Sélectionnez l'objet ou le groupe d'objets dont vous souhaitez modifier l'interaction
2. Cliquez sur l'Onglet Interactions pour ouvrir le Panneau d'Interactions
3. En haut du panneau, localisez l'interaction que vous souhaitez modifier
4. Cliquez sur le bouton Modifier pour activer le mode édition
5. Modifiez l'interaction et cliquez sur Terminé pour enregistrer vos modifications
6. Votre interaction mise à jour clignotera en vert dans la liste pendant quelques secondes

Dupliquer une Interaction

Souvent, vous souhaitez appliquer différentes variations d'une interaction au même objet. La fonction Dupliquer vous permet de dupliquer une interaction existante, puis de modifier son Déclencheur, son Action et sa Cible selon vos besoins.

Pour dupliquer une interaction :

1. Sélectionnez l'objet ou le groupe d'objets dont vous souhaitez dupliquer une interaction
2. Cliquez sur l'Onglet Interactions pour ouvrir le Panneau d'Interactions
3. En haut du panneau, localisez l'interaction que vous souhaitez dupliquer
4. Cliquez sur l'icône Copier et une interaction identique apparaîtra dans la Liste des Interactions en haut du panneau
5. Pour modifier la nouvelle interaction, cliquez sur le bouton Modifier et suivez les étapes de la section Modifier les Interactions de cet article

Supprimer une Interaction

Pour supprimer une interaction :

1. Sélectionnez l'objet ou le groupe d'objets dont vous souhaitez supprimer une interaction
2. Cliquez sur l'Onglet Interactions pour ouvrir le Panneau d'Interactions
3. En haut du panneau, localisez l'interaction que vous souhaitez supprimer
4. Cliquez sur le bouton Supprimer