AusdrĂĽcke in Prototypen verwenden
🚧 „Variables“ (Variablen) befindet sich derzeit in der offenen Beta-Phase. Wir fügen kontinuierlich neue Funktionen hinzu und verbessern die Benutzererfahrung. Mehr über die zukünftigen Funktionen erfahren→
Bevor du anfängst
Wer diese Funktion nutzen kann
In jedem kostenpflichtigen Abo verfĂĽgbar.
Alle Personen mit Schreibzugriff
auf eine Datei können Prototypen erstellen.
Alle Personen mit Lesezugriff
oder Lesezugriff nur fĂĽr Prototypen
können Prototypen anzeigen.
Variablen ermöglichen dir, mit nur wenigen Rahmen und Interaktionen realistische Prototypen zu erstellen, die sich je nach Benutzerauswahl ändern.
Durch das HinzufĂĽgen von AusdrĂĽcken kannst du deine Prototypen noch effektiver gestalten, indem du dynamische Zeichenfolgen oder Zahlenwerte generierst oder sogar boolesche AusdrĂĽcke bewertest.
Nutze AusdrĂĽcke beim Prototyping unter anderem fĂĽr folgende Zwecke:
- Erstellen eines Warenkorbs, in dem der Bestellwert automatisch berechnet wird
- Erstellen von in der Größe skalierbaren Objekte, wie etwa Lautstärke- oder Fortschrittsbalken
- Kombinieren von Textinhalten oder Erstellen neuer Texte entsprechend der Benutzerauswahl
Du hast noch nicht viel Erfahrung mit Variablen? Hier erfährst du mehr:
Du möchtest mehr praktische Erfahrungen sammeln?
Entdecke die erweiterte Prototypen-Testumgebung →
Anwendungsmöglichkeiten für Ausdrücke
Mithilfe von Ausdrücken kannst du die Werte von Variablen durch einfache Vorgänge ändern. Verwende sie beispielsweise für die folgenden Aktionen:
- Die Prototypenaktion Set variable (Variable festlegen), wenn die ausgewählte Variable eine Zahl, eine Zeichenfolge oder ein boolescher Wert ist
- Die Prototypenaktion Conditional (Bedingungen) im Rahmen einer bedingten Aussage
Du kannst AusdrĂĽcke direkt in die folgenden Felder der Ansicht Interaction details (Interaktionsdetails) schreiben:
- Set variable (Variable festlegen): Hiermit gibst du einen Ausdruck ein, der den neuen Wert der ausgewählten Variable darstellt.
- Conditional (Bedingung): Hiermit gibst du einen booleschen Ausdruck ein, der die erforderliche Bedingung fĂĽr die Aktion darstellt.
Du kannst Ausdrücke in deinen Prototyp integrieren, indem du sie entweder direkt in die verfügbaren Felder schreibst (mit der unterstützten Syntax) oder im Auswahlpanel aus den vorgeschlagenen Variablen und Operatoren wählst.
Nachdem du den Ausdruck eingegeben hast, speichere ihn durch DrĂĽcken der Eingabetaste bzw. Enter-Taste. Nur AusdrĂĽcke mit einer unterstĂĽtzten Operation und Syntax funktionieren. UngĂĽltige AusdrĂĽcke werden rot markiert.
AusdrĂĽcke schreiben
AusdrĂĽcke bestehen aus Werten und Operatoren.
- Operatoren stellen die Funktion dar, die du durchführen oder bewerten möchtest (wie etwa Addition oder Subtraktion).
- Werte sind die Elemente, anhand derer Operatoren Aktionen oder Bewertungen durchfĂĽhren.
Nehmen wir als Beispiel den folgenden Ausdruck:
Der Operator in diesem Beispiel ist eine Addition, dargestellt durch das Pluszeichen. Die Werte sind variableName
und 2
.
Der Ausdruckstyp bestimmt, welche Werte und Operatoren verfĂĽgbar sind.
Numerische AusdrĂĽcke
Numerische Ausdrücke können mit den folgenden Arten von Werten geschrieben werden:
- Zahlenvariablen
- Zahlenliteralen (z. B. 0,5, 1, 10)
Du kannst fĂĽr numerische AusdrĂĽcke die folgenden Operatoren verwenden:
Operation | Symbol |
Addition | + |
Subtraktion | – |
Multiplikation | * |
Division | / |
ZeichenfolgenausdrĂĽcke
ZeichenfolgenausdrĂĽcke kannst du mit den folgenden Arten von Werten schreiben:
- Zeichenfolgenliterale (z. B. „Max Mustermann“, „Element 2“, „5“)
- Zahlenliterale
- Zeichenfolgen- und Zahlenvariablen
Zeichenfolgenliterale müssen mit Anführungszeichen geschrieben werden. Zahlenwerte können einem Zeichenfolgenwert hinzugefügt werden.
Den folgenden Operator kannst du in ZeichenfolgenausdrĂĽcken verwenden:
Operation | Symbol |
Zu Zeichenfolge hinzufĂĽgen | + |
Boolesche AusdrĂĽcke
Boolesche AusdrĂĽcke kannst du mit den folgenden Arten von Werten schreiben:
- Boolesche Literale (true, false)
- Zahlenliterale
- Zeichenfolgenliterale
- Boolesche, Zeichenfolgen- und Zahlenvariablen
Die folgenden Operatoren kannst du in booleschen AusdrĂĽcken verwenden:
Operation | Symbol |
Gleich | == |
Nicht gleich | != |
Und | and |
Oder | or |
Größer als | > |
Kleiner als | < |
Größer als oder gleich | >= |
Kleiner als oder gleich | <= |
Addition** | + |
Subtraktion** | – |
Multiplikation** | * |
Division** | / |
Zu Zeichenfolge hinzufĂĽgen** | + |
** Numerische und Zeichenfolgenoperatoren werden nicht zum Bewerten boolescher Ausdrücke verwendet, können aber in komplexen Ausdrücken hilfreich sein.
Boolesche AusdrĂĽcke mĂĽssen sich in den Wert true
oder false
auflösen. Wenn du eine boolesche Variable mit einem Ausdruck erstellst, wird das Ergebnis des Ausdrucks mit „true“ oder „false“ bewertet. Dadurch wird der neue Wert der booleschen Variable festgelegt.
Sieh dir als Beispiel unten die einfache Interaktion und den Ausdruck an:
Der Wert fĂĽr itemCount
ist 0
und somit nicht größer als 5
. Daher ist der Wert dieses Ausdrucks false
. Anders ist es jedoch im nächsten Beispiel:
Der Wert fĂĽr itemCount
ist 6
und somit größer als 5
. Daher ist der Wert des Ausdrucks true
.
Unten findest du Beispiele für boolesche Ausdrücke. Dabei sind die folgenden Aussagen „true“:
- Gibt
true
zurĂĽck, wenn die Werte gleich sind. - Gibt
false
zurĂĽck, wenn die Werte nicht gleich sind.
Beispiele:
Antwort: Da 1
nicht gleich 2
ist, wird booleanVariable
auf false
gesetzt.
Antwort: Da 1
 + 1
gleich 2
ist, wird booleanVariable
auf true
gesetzt.
- Gibt
true
zurĂĽck, wenn die Werte nicht gleich sind. - Gibt
false
zurĂĽck, wenn die Werte gleich sind.
Beispiele:
Antwort: Da red
nicht gleich blue
ist, wird booleanVariable
auf true
gesetzt.
Antwort: Da 2
gleich 2
ist, wird booleanVariable
auf false
gesetzt.
- Gibt
true
zurück, wenn beide Werte „true“ sind. - Gibt
false
zurück, wenn einer oder beide Werte „false“ sind.
Beispiele:
Antwort: Da 1
gleich 1
und 2
gleich 2
ist, wird booleanVariable
auf true
gesetzt.
Antwort: Da 1
nicht größer als 5
ist, wird booleanVariable
auf false
gesetzt.
- Gibt
true
zurück, wenn einer oder beide Werte „true“ sind. - Gibt
false
zurück, wenn beide Werte „false“ sind.
Beispiele:
Antwort: Da red
gleich red
ist, wird booleanVariable
auf true
gesetzt.
Antwort: Da red
nicht gleich green
oder orange
ist, wird booleanVariable
auf false
gesetzt.
Hinweis: Boolesche AusdrĂĽcke werden auch verwendet, um bedingte Aussagen zu bewerten.
Komplexe AusdrĂĽcke und Reihenfolge der Operationen
Komplexe AusdrĂĽcke bestehen aus mehreren Operatoren in einem einzigen Ausdruck und werden in Klammern gesetzt.
Einfache Rechenaufgaben werden in komplexen AusdrĂĽcken in der folgenden Reihenfolge ausgefĂĽhrt:
- Klammern
- Multiplikation/Division
- Addition/Subtraktion
Boolesche AusdrĂĽcke werden in der folgenden Reihenfolge ausgefĂĽhrt:
- Klammern
- Vergleiche (==, !=, >, < usw.)
- Und
- Oder
Alle Operationen werden von links nach rechts ausgefĂĽhrt.
Hier ein Beispiel fĂĽr einen Ausdruck:
Erst y
mit z
multiplizieren, dann x
addieren.
Hier ein Beispiel fĂĽr einen booleschen Ausdruck:
Erst bewerten, ob y
größer als z
ist, dann bewerten, ob x
gleich dem Ergebnis von y > z
ist.
Konzepte in AusdrĂĽcken
Zahlen mit negativem Vorzeichen
Um einem positiven Zahlenwert ein negatives Vorzeichen voranzustellen, subtrahiere den Zahlenwert von 0.
Beispiel: Du kannst eine Zahlenvariable (numVar) mit einem positiven Wert mit dem folgenden Ausdruck in einen Wert mit einem negativen Vorzeichen ändern:
Um einen Zahlenwert mit einem negativen Vorzeichen in einen positiven Zahlenwert zu ändern, multipliziere die Zahl mit 1.
Beispiel: Du kannst eine Zahlenvariable (numVar) mit einem negativen Vorzeichen mit dem folgenden Ausdruck in einen positiven Wert ändern:
Booleschen Werten ein negatives Vorzeichen voranstellen
Wenn du einem booleschen Wert ein negatives Vorzeichen voranstellst, änderst du seinen logischen Zustand. Indem du einen booleschen Wert, der „true“ ist, mit einem negativen Vorzeichen versiehst, wird der Wert „false“ und umgekehrt.
Einem booleschen Wert ein negatives Vorzeichen voranzustellen, kann nützlich sein, wenn du Objekte mit zwei gegensätzlichen Zuständen erstellst, wie etwa Schalter, Schaltflächen oder ähnliche Einstellungen.
Mit dem folgenden Ausdruck kannst du einem booleschen Wert ein negatives Vorzeichen voranstellen:
Der Operator != gibt „true“ zurück, wenn die Werte nicht gleich sind. Wenn die Werte gleich sind, gibt er „false“ zurück. Dies bedeutet:
- Wenn der Wert
boolVar
als Ergebnistrue
zurĂĽckgibt, ist true gleich true. Die Aussage gilt somit alsfalse
. - Wenn der Wert
boolVar
als Ergebnisfalse
zurĂĽckgibt, ist false nicht gleich true. Die Aussage gilt somit alstrue
.
Probiere es selbst
Beispiel: Erstelle einen Balken zur Lautstärkeregelung.
- Füge ein Rechteck für das Lautstärkefeld hinzu. Das hier dargestellte hat eine Breite von 260 und eine Höhe von 100.
- Füge ein zweites Rechteck für den Lautstärkepegel hinzu. Platziere dieses Rechteck auf dem ersten und richte beide auf der linken Seite bündig aus. Das zweite Rechteck sollte schmaler als das erste sein. In unserem Beispiel hat es zunächst eine Höhe von 100 und eine Breite von 14.
- Erstelle mithilfe von Linien Objekte für das Plus- und Minuszeichen, und platziere diese unter dem Lautstärkefeld.
Als nächstes erstellen wir eine Variable. Erstelle in einer neuen Collection eine Zahlenvariable. Nenne sie volumeLevel
und weise ihr einen Anfangswert von 14 zu.
Binde jetzt die Variable volumeLevel
an den Wert für die Breite des Rechtecks, das den Lautstärkepegel darstellt.
- Klicke auf das kleinere Rechteck, um es auszuwählen.
- Gehe in der rechten Seitenleiste auf dem Design-Tab zum Wert fĂĽr die Breite.
- Bewege den Mauszeiger über das Feld mit dem Wert für die Breite und wähle dann Apply variable (Variable anwenden) aus.
- Wähle im Auswahlpanel der Variable die Variable
volumeLevel
aus.
Nachdem du jetzt den Rahmen und die Variablen eingerichtet hast, kannst du die Prototyping-Interaktionen erstellen.
- Klicke im Rahmen auf das Pluszeichen-Objekt.
- Klicke im Tab Prototype (Prototyp) in der rechten Seitenleiste auf das Plus-Symbol, um eine neue Interaktion hinzuzufĂĽgen.
- Setze den Auslöser auf On tap/On click (Beim Antippen/Beim Anklicken) und die Aktion auf Set variable (Variable festlegen). Wähle als Variable
volumeLevel
aus. - Lege den neuen Wert mithilfe eines Ausdrucks fest. Das Objekt, das den Lautstärkepegel darstellt, soll bei jedem Antippen/Anklicken des Plussymbols um 5 breiter werden. Dies erreichst du mit dem Ausdruck:
volumeLevel + 5
- Wiederhole die Schritte 1–4 für das Minus-Symbol und lege diesmal den neuen Variablenwert mit dem folgenden Ausdruck fest:
volumeLevel - 5
Spiele deinen Prototypen ab, um die Interaktionen zu testen.