Design : Comment créer un interrupteur dans Axure RP9

Axure est un outil de prototypage bien connu avec beaucoup d’histoire, il existe depuis des années. Vous pouvez créer presque tous les types de prototypes, des plus simples aux plus complexes, avec des variables et de la logique, sans écrire une seule ligne de code (enfin, pour gérer la complexité, vous devrez écrire des expressions).

Tout d’abord, vous devez avoir installé Axure, si vous ne l’avez pas, dirigez-vous simplement vers axure.com et téléchargez la dernière version (d’essai).

Axure est disponible pour Windows et Mac, alors choisissez la version appropriée à télécharger.

Si vous connaissez un peu Axure (même avec les anciennes versions), vous connaissez les widgets, les interactions et les cas, tu es sur la bonne pistesinon, vous devriez toujours pouvoir suivre les étapes de ce didacticiel.

Dans ce tutoriel, nous verrons comment mettre en place un simple commutateur (un modèle de contrôle d’entrée très connu) utilisé dans interface utilisateur mobile ou de bureau. La partie importante de ce composant est l’interaction (l’interaction d’activation / désactivation).

Si vous souhaitez en savoir plus sur ce type de contrôle, vous pouvez consulter le HIG d’Apple ici: https://developer.apple.com/design/human-interface-guidelines/ios/controls/switches/

Pour que tout fonctionne (sur la partie interaction), nous utiliserons un peu de logique pour répondre à l’événement click (ou tap) afin de basculer le commutateur (mais nous n’utiliserons pas de variables pour cela).

La raison de ne pas utiliser un variable pour gérer l’état de basculement, c’est parce que nous voulons que ce composant soit autonome (sans dépendances) pour être facilement réutilisé dans tous les projets.

Ce tutoriel est assez simple et ne comporte que 2 étapes.

Tout d’abord. Créons les formes de base en faisant glisser 1 rectangle et 1 ellipse sur la zone de dessin. Le rectangle sera le Contexte (afin que nous puissions également le renommer en arrière-plan) et l’ellipse sera le bouton (renommez-le également en bouton).

Pour les façonner, j’ai utilisé les paramètres suivants (voir ci-dessous) et à la fin, je les ai regroupés (et renommé le groupe en commutateur).

Si vous n’avez pas trop d’expérience avec les widgets de forme Axure, vous pouvez en lire plus ici: https://docs.axure.com/axure-rp/reference/shapes/.

Propriétés de forme:

Bouton:

• Largeur / Hauteur: 27
• Remplir: #FFFFFF
• Ombre: remplissage: # 000000, opacité: 6%, x: 0, y: 3

Contexte:

• Largeur: 51
• Hauteur: 31
• Remplir: # D7D7D7

Pour la forme d’arrière-plan, j’ai également configuré 2 effets de style (choisi et désactivée) en utilisant le Les interactions languette.

Maintenant que nous avons fait la configuration de base et que nous avons toutes les formes que nous pouvons déplacer vers l’interactivité.

Nous ajouterons l’interactivité sur l’objet groupe (de cette façon, nous pouvons répondre aux événements de groupe) sur l’événement click (tap).

Voir l’image ci-dessous (avec l’éditeur d’interaction) où j’ai ajouté l’interactivité (ne vous inquiétez pas si cela semble complexe, je vais vous expliquer ce qui se passe).

Alors décomposons cela.

J’ai ajouté une interaction sur le déclencheur Click (tap) (c’est donc l’événement click / tap). Pour ajouter une interaction, assurez-vous que vous disposez des commutateur groupe sélectionné et sur le Panneau d’interaction clique sur le Nouvelle interaction et sélectionnez le Cliquez ou appuyez sur déclencheur.

Si vous n’êtes pas vraiment familier avec les événements, actions, cas, vous pouvez en lire plus sur le site d’Axure https://docs.axure.com/axure-rp/reference/events-cases-actions/.

Maintenant, comme vous pouvez le voir sur l’image, nous avons 2 cas nommés Allumer et Éteindre et chacune de ces étapes a des actions.

Pour ajouter un cas, cliquez simplement sur le Activer les cas pour le déclencheur Click (Tap) dans le panneau Interaction. Cliquer sur le Activer les cas ouvrira le Générateur de conditions dialogue, c’est là que nous pouvons construire notre condition et exécuter un ensemble d’actions si cette condition est évaluée comme vrai.

Voir l’image ci-dessous avec la configuration de la condition.

Comme vous pouvez le voir, nous vérifierons si Contexte valeur sélectionnée est faux. Si cela se produit, il exécutera une série d’actions (voir mon image précédente).

Voici les actions:

1. action Bouge toi (en gros, nous déplacerons le bouton sur l’axe horizontal de gauche à droite par 20):

• Cible: bouton
• Déplacer: de x: 20, y: 0
• Animer: facilité en cubique: 200 ms

2. Action Définir la sélection / la vérification (nous définissons Contexte valeur sélectionnée à vrai):

• Cible: arrière-plan
• Set: valeur
• À: vrai

Ça y est, passons maintenant au cas SwitchOff.

le Éteindre cas sera assez similaire avec le Allumer étui avec 2 petits changements.

Un changement sera à la condition, voir l’image ci-dessous.

Comme vous pouvez le voir, la condition est la même, sauf que nous vérifions si elle est vrai.

Donc, si la condition est remplie, nous exécuterons les mêmes étapes que sur notre condition précédente avec de petits changements.

Voici les actions:

1. Action Move (c’est ici que nous déplaçons le bouton de gauche à droite avec une valeur négative de -20):

• Cible: bouton
• Déplacer: de x: -20, y: 0
• Animer: facilité en cubique: 200 ms

2. Action Set Selected / Checked (nous définissons le Contexte valeur sélectionnée à faux):

• Cible: arrière-plan
• Set: valeur
• À: faux

Ça y est.