Utilisation d'expressions dans les prototypes
🚧 Les variables sont actuellement en bêta ouverte. Nous continuerons à ajouter davantage de fonctionnalités et à affiner l'expérience durant ce délai. Découvrez les nouveautés à venir→
Avant de commencer
Qui peut utiliser cette fonctionnalité
Disponible avec tous les forfaits payants.
Toute personne disposant de l'accès peut éditer
pour un fichier peut créer des prototypes.
Toute personne disposant de l'accès peut voir
ou peut voir les prototypes uniquement
pour un fichier peut consulter des prototypes.
Le prototypage avec des variables vous permet de créer des prototypes réalistes qui changent en fonction de la sélection de l'utilisateur, en utilisant seulement quelques cadres et interactions simples.
Les expressions peuvent contribuer à rendre vos prototypes encore plus efficaces. Avec les expressions, vous pouvez générer des valeurs dynamiques de chaînes ou de nombres, ou même évaluer des expressions booléennes.
Le prototypage à l'aide d'expressions permet d'effectuer les opérations suivantes :
- Création d'un panier d'achat qui calcule le total des achats
- Génération d'objets de taille variable, tels que des volumes ou des barres de progression.
- Combinaison et création de nouvelles chaînes de texte en fonction de la sélection de l'utilisateur
Vous découvrez les variables ? Plus d'informations ici :
Vous souhaitez réaliser des exercices pratiques ?
Découvrez le fichier d'initiation au prototypage avancé →
Où utiliser des expressions
Les expressions permettent de manipuler les valeurs des variables à l'aide d'opérations de base. Elles peuvent être utilisées dans :
- L'action de prototype Set variable, si la variable sélectionnée est de type numérique, chaîne ou booléen.
- L'action de prototype Conditional, en tant que partie d'une instruction conditionnelle
Vous pouvez écrire des expressions directement dans les champs suivants de la fenêtre modale Interaction details :
- [Set variable] to : Saisissez une expression pour représenter la nouvelle valeur de la variable sélectionnée
- [Conditional] if : Saisissez une expression booléenne pour représenter la condition requise pour l'action
Pour générer des expressions dans votre prototype, vous pouvez soit les écrire directement dans les champs disponibles à l'aide de la syntaxe prise en charge, soit utiliser le panneau de sélection pour choisir parmi les variables et les opérateurs proposés.
Une fois l'expression rédigée, appuyez sur la touche Entrée ou Retour. Seules les expressions écrites avec les opérations et la syntaxe prises en charge fonctionneront. Les expressions non valides seront soulignées en rouge.
Écriture d'expressions
Les expressions sont composées de valeurs et d'opérateurs.
- Les opérateurs représentent la fonction que vous exécutez ou évaluez (comme l'addition ou la soustraction)
- Les valeurs sont les éléments sur lesquels les opérateurs s'exécutent ou qu'ils évaluent
Par exemple, examinons l'expression suivante :
Dans cet exemple, l'opérateur est l'addition, représentée par le symbole plus +. Les valeurs sont variableName
et 2
.
Le type d'expression détermine les valeurs et les opérateurs disponibles.
Expressions numériques
Les expressions numériques peuvent être écrites avec les types de valeurs suivants :
- Variables numériques
- Littéraux numériques (tels que 0,5, 1, 10)
Les opérateurs suivants peuvent être utilisés dans les expressions numériques :
Opération | Symbole |
Addition | + |
Soustraction | - |
Multiplication | * |
Division | / |
Expressions de chaîne
Les expressions de chaîne peuvent être écrites avec les types de valeurs suivants :
- Littéraux de chaîne (tels que ”John Doe”, “item 2”, “5”)
- Littéraux numériques
- Variables de chaîne et numériques
Les littéraux de chaîne doivent être placés entre guillemets. Il est possible d'ajouter des valeurs numériques à une valeur de chaîne.
L'opérateur suivant peut être utilisé dans les expressions de chaîne :
Opération | Symbole |
Ajouter à la chaîne | + |
Expressions booléennes
Les expressions booléennes peuvent être écrites avec les types de valeurs suivants :
- Littéraux booléens (true, false)
- Littéraux numériques
- Littéraux de chaîne
- Variables booléennes, de chaîne et numériques
Les opérateurs suivants peuvent être utilisés dans les expressions booléennes :
Opération | Symbole |
Égal à | == |
Pas égal à | != |
Et | and |
Ou | or |
Supérieur à | > |
Inférieur à | < |
Supérieur ou égal à | >= |
Inférieur ou égal à | <= |
Addition** | + |
Soustraction** | - |
Multiplication** | * |
Division** | / |
Ajouter à la chaîne** | + |
** Les opérateurs numériques et les opérateurs de chaîne ne sont pas utilisés pour évaluer les expressions booléennes, mais peuvent être utilisés comme opérateurs de soutien dans les expressions complexes.
Les expressions booléennes doivent aboutir à une valeur true
ou false
. Lors de la définition d'une variable booléenne à l'aide d'une expression, le résultat de l'expression est évalué comme ayant une valeur vraie ou fausse, ce qui permet de définir la nouvelle valeur de la variable booléenne.
Par exemple, examinons l'interaction et l'expression simples ci-dessous :
La valeur d'itemCount
est 0
, qui n'est pas supérieur à 5
. Par conséquent, la valeur de cette expression est false
. Cependant, examinons maintenant l'exemple suivant :
La valeur d'itemCount
est 6
, qui est supérieur à 5
. Par conséquent, la valeur de cette expression est true
.
Des exemples d'expressions booléennes sont présentés dans les onglets ci-dessous. Pour ces exemples, les affirmations suivantes sont vraies :
- Renvoie
true
lorsque les valeurs sont égales. - Renvoie
false
lorsque les valeurs ne sont pas égales.
Exemples :
Réponse : Comme 1
n'est pas égal à 2
, booleanVariable
est défini sur false
.
Réponse : Comme 1
+ 1
est égal à 2
, booleanVariable
est défini sur true
.
- Renvoie
true
lorsque les valeurs ne sont pas égales. - Renvoie
false
lorsque les valeurs sont égales.
Exemples :
Réponse : Comme red
n'est pas égal à blue
, booleanVariable
est défini sur true
.
Réponse : Comme 2
n'est pas égal à 2
, booleanVariable
est défini sur false
.
- Renvoie
true
lorsque les deux valeurs sont vraies. - Renvoie
false
si une ou les deux valeurs sont fausses.
Exemples :
Réponse : Comme 1
est égal à 1
et 2
est égal à 2
, booleanVariable
est défini sur true
.
Réponse : Comme 1
n'est pas supérieur à 5
, booleanVariable
est défini sur false
.
- Renvoie
true
lorsqu'une ou les deux valeurs sont vraies. - Renvoie
false
lorsque les deux valeurs sont fausses.
Exemples :
Réponse : Comme red
est égal à red
, booleanVariable
est défini sur true
.
Réponse : Comme red
n'est pas égal à green
ou orange
, booleanVariable
est défini sur false
.
Remarque : les expressions booléennes sont également utilisées pour évaluer les instructions conditionnelles.
Expressions complexes et ordre des opérations
Les expressions complexes sont générées par l'utilisation de plusieurs opérateurs au sein d'une même expression. Utilisez des parenthèses pour regrouper les expressions.
Dans les expressions complexes, les opérations mathématiques de base sont effectuées dans l'ordre suivant :
- Parenthèses
- Multiplication/Division
- Addition/Soustraction
Les opérateurs d'expression booléenne sont exécutés dans l'ordre suivant :
- Parenthèses
- Comparaisons (==, !=, >, <, etc.)
- And
- Or
Toutes les opérations sont exécutées de gauche à droite.
Par exemple, dans l'expression suivante :
Multipliez d'abord y
par z
. Puis ajoutez x
.
Dans l'expression booléenne suivante :
Évaluez d'abord si y
est supérieur à z
. Ensuite, évaluez si x
est égal à la solution de y > z
.
Concepts dans les expressions
Négation des nombres
Pour transformer une valeur numérique positive en valeur numérique négative, il faut soustraire la valeur numérique de 0.
Par exemple, une variable numérique (numVar) avec une valeur positive peut être inversée avec l'expression suivante :
Pour transformer un nombre négatif en un nombre positif, il faut multiplier le nombre par -1.
Par exemple, une variable numérique (numVar) avec une valeur négative peut être rendue positive avec l'expression suivante :
Négation de valeurs booléennes
La négation d'une valeur booléenne signifie l'inversion de son état logique. La négation d'une valeur booléenne vraie la rendrait fausse, et la négation d'une valeur booléenne fausse la rendrait vraie.
La négation des valeurs booléennes peut s'avérer précieuse lors de la génération d'objets présentant deux états opposés, tels que des bascules, des boutons ou d'autres paramètres.
Pour inverser une valeur booléenne, utilisez l'expression suivante :
L'utilisation de l'opérateur != renvoie un résultat vrai lorsque les valeurs ne sont pas égales et un résultat faux lorsque les valeurs sont égales. Cela signifie que :
- Si la valeur
boolVar
esttrue
, true est égal à true. Par conséquent, l'instruction est évaluée commefalse
. - Si la valeur
boolVar
estfalse
, false n'est pas égal à true. Par conséquent, l'instruction est évaluée commetrue
.
Essayez
Exemple : création d'une barre de commande de volume
- Ajoutez un rectangle pour représenter le conteneur de volume : le nôtre a une largeur de 260 et une hauteur de 100.
- Ajoutez un deuxième rectangle pour représenter le niveau de volume. Ce rectangle doit être placé au-dessus du premier, et ils doivent être alignés sur le côté gauche. La largeur du second rectangle doit être plus petite que celle du premier : notre hauteur est de 100 et notre largeur de 14 pour commencer.
- Utilisez des lignes pour créer des objets qui représentent un signe plus et un signe moins, et placez-les sous le conteneur de volume.
Ensuite, nous devons créer une variable. Dans une nouvelle collection, créez une variable numérique. Nommez-la volumeLevel
et donnez-lui une valeur initiale de 14.
Lions maintenant la variable volumeLevel
à la valeur de la largeur du rectangle représentant le niveau de volume.
- Cliquez sur le petit rectangle pour le sélectionner.
- Dans l'onglet Design de la barre latérale droite, recherchez la valeur de la largeur.
- Passez le curseur de la souris sur le champ de valeur de la largeur, puis sélectionnez Apply variable.
- Dans le panneau de sélection des variables, sélectionnez la variable
volumeLevel
.
Maintenant que notre cadre et nos variables sont définis, créons nos interactions de prototypage.
- Cliquez sur le signe plus de l'objet dans le cadre.
- Depuis l'onglet Prototype de la barre latérale droite, cliquez sur le signe plus pour ajouter une nouvelle intéraction.
- Définissez le déclencheur sur On tap/On click et l'action sur Set variable. Sélectionnez la variable
volumeLevel
. - Définissez la nouvelle valeur à l'aide d'une expression. Nous voulons que la largeur du niveau de volume augmente de 5 chaque fois qu'un utilisateur appuie sur l'icône plus, nous utiliserons donc l'expression suivante :
volumeLevel + 5
- Répétez les étapes 1 à 4 pour l'icône moins, en définissant cette fois la nouvelle valeur de la variable avec l'expression suivante :
volumeLevel - 5
Exécutez votre prototype pour tester les interactions.