Every prototype has multiple states it can transition between. In Origami, Switch patches help keep track of which state you are in. They are like light switches and can be toggled with interaction patches .
沒個圓形都有多種狀態,可以在狀態間切換。在Origami中,Switch Patch 幫助跟蹤你當前所在的狀態。就像燈的開關,可以通過交互模塊定義的交互在開和關之間切換。
State patches 狀態模塊
Switch shift
S
開關
The [Switch] patch is like a light switch: turning it on keeps it on, and turning it off keeps it off. They are helpful to build simple two-state interactions, e.g. showing and hiding comments in a popover.
[Switch 開關] 模塊跟燈的開關一樣:開著就開著,關了就關了。這個模塊構建簡單的兩個狀態切換交互好使。
Multiple Switch patches can combined with Logic patches ([Or] , [And] , [Not] ) to build on top of each other, e.g. opening a composer with different attachment options which the user can toggle.
多個Switch 開關 模塊可以和邏輯模塊 ([Or 或] , [And 和] , [Not 不算這個] ) 一起使用,再連接到別的模塊上。例如打開一個有不同選項的設計用戶可以切換(這個例子也不是很明白)。
Option Switch 選項開關
[Option Switch] patches are useful for mutually exclusive states that cannot coexist, e.g. a tab bar. Option Switches are commonly used with [Option Pickers] to pass different values depending the state.
For example, if you wanted to change a navigation bar title between 3 states:
[Option Switch] 模塊用于值之間相互切換這類不能同時存在的狀態,例如 Tab。[Option Switch] 模塊通常和 Option Pickers選項選擇器 一起使用,以根據不同的值傳遞不同的狀態。
例如:想要在三種不同的狀態之間更改導航欄標題:
Counter 計數器
Counter patches are useful for mutually exclusive states that cannot coexist, and increment in a fixed order e.g. an on boarding flow.
[Counter] 模塊用于值按固定順序遞增這類不能同時存在的狀態,例如一個登記流程。
(板栗:老實說不知道圖里的是啥意思??)
Index numbers represent states 索引號表示狀態
Both Switch and Option Switch patches output a number for the state that is active. Switch patches output a 0 (off) or a 1 (on), and Option Switch patches output a number starting from 0 for the first state, to 1 for the 2nd, and so on:
Switch 開關 和 Option Switch 選項開關 Patch 輸出激活狀態的數字。 Switch 開關 Patch 輸出口是 0 (Off) 或 1 (On), Option Switch 選項開關 Patch輸出口數字從0開始,0為第一個接口,Index1為第二個接口,依次類推:
- Index 0 接口1 → Initial state / Off State 初始狀態/關閉狀態
- Index 1 接口2 → 2nd state / On State 第二個狀態 / 打開狀態
- Index 2 接口3→ 3rd state 第三個狀態
- Index 3 接口4→ 4th state 第四個狀態
- ...
(板栗:有補充????)
▲ 實際用的時候,Switch 模塊的接口名稱是Set To 0,跟Index 0功能應該是一樣的
Summary 總結
- Manage state with Switch, Option Switch, or Counter
- States are represented with integers, starting from 0
- 使用Switch 開關、Option Switch 選項開關或Counter 計數器 管理狀態;
- 狀態用從0開始的整數表示。