正文
Events, Cases, and Actions
事件、用例和动作
Interactions determine the dynamic behaviors of widgets and pages. Clicking a button to navigate to another page in the prototype is an interaction, as is mousing over a widget to reveal another widget on the page.
交互决定小部件和页面的动态行为。在原型中,单击按钮导航到另一个页面是一种交互,就像在小部件上单击鼠标以显示页面上的另一个小部件一样。
You'll create and manage your prototype's interactions in the
Interactions
pane. You can choose from the most common interactions for a selected widget at the bottom of the pane, or you can click
New Interaction
to build your own.
您将在** interaction
窗格中创建和管理原型的交互。您可以为窗格底部选中的小部件选择最常见的交互,或者单击
New Interaction**构建您自己的小部件。
Tip
提示
If you need more room to work on your interactions, click the window icon at the bottom-right of the
Interactions
pane or double-click any event or widget name to open the
Interaction Editor
dialog.
如果您需要更多的空间来进行交互,请单击
Interaction
窗格右下角的窗口图标,或者双击任何事件或小部件名称,以打开
Interaction Editor
对话框。
1、The Structure of an Interaction
交互的结构
Interactions are made up of three parts:
交互由三部分组成:
-
widget and page events
部件和页面事件
-
cases that are added to events
添加到事件上的用例
-
actions that are added to cases
添加到用例上的动作
1、Events
事件
Events are triggers that correspond to particular page and widget behaviors. When the triggering behavior occurs in the web browser, the event is "fired," and any cases attached to it are executed in response. For example, if you click a button to navigate to a different page in the prototype, you have fired its
Click or Tap
event.
事件是对应于特定页面和小部件行为的触发器。当触发行为在web浏览器中发生时,事件被“触发”,任何附加到它的情况都会被响应执行。例如,如果单击按钮以导航到原型中的另一个页面,则触发了它的** click或Tap**事件。
To view a page or widget's available events, select it and click
New Interaction
in the
Interactions
pane. Then, select an event in the list to configure an interaction under it. (You can view the full list of available page and widget events lower down on this page.)
要查看页面或小部件的可用事件,请选中它并在
Interaction
窗格中单击
New Interaction
。然后,在列表中选择一个事件来配置它下面的交互。(你可以在这个页面下方查看可用页面和小部件事件的完整列表。)
To delete an event and all of its cases and actions, select it in the
Interactions
pane and press
DELETE
.
要删除一个事件及其所有情况和操作,请在** interaction
窗格中选择它,然后按
delete **。
1.2、Cases
用例
Cases are ordered lists of actions that occur in the web browser in response to a page or widget event firing. A case is automatically added to an event when you assign one or more actions to it, though the first case's name is hidden by default. Hover your cursor over the event's name and click
Enable Cases
to the right to see the first case's name.
用例是响应页面或小部件事件触发时在web浏览器中发生的操作的有序列表。当您向事件分配一个或多个操作时,将自动将用例添加到事件中,但默认情况下将隐藏第一个案例的名称。将光标悬停在事件的名称上,然后单击右侧的
Enable Cases
可以看到第一个用例的名称。
If needed, you can add additional cases to an event by clicking the
Add Case
icon to the right of the event's name. When the event fires in the web browser, you can choose which of its cases to execute in the menu that appears. Alternatively, you can set up conditional logic to make this determination automatically based on certain criteria.
如果需要,您可以通过单击事件名称右侧的** add Case**图标向事件添加额外的案例。当事件在web浏览器中触发时,您可以在出现的菜单中选择执行它的哪些用例。或者,您可以设置条件逻辑,以便根据特定的条件自动进行判断。
To delete a case from an event, select it in the
Interactions
pane and press
DELETE
.
要从事件中删除一个案例,请在** interaction
窗格中选择它,然后按
delete **。
You can reorder the cases under an event by dragging them up and down. (The order of cases is important when you're working with conditional logic.)
您可以通过上下拖动来重新排序事件下的案例。(在处理条件逻辑时,用例的顺序很重要。)
1.3、Actions
动作
Actions are the changes that occur in the web browser in response to a page or widget event firing. For example, if you click a button to navigate to a different page in the prototype, an
Open Link
action has occurred in response to the button's
Click or Tap
event.
动作是web浏览器中响应页面或小部件事件触发时发生的更改。例如,如果您单击一个按钮以导航到原型中的另一个页面,则会出现一个
Open Link
操作,以响应该按钮的** click或Tap**事件。
When you select an event in the
New Interaction
menu, you'll be shown the list of available actions. After selecting an action, you'll be prompted to configure it. You can then add additional targets to the action (for actions that take targets) by hovering your cursor over the action's name and clicking
Add Target
to the right.
当您在
New Interaction
菜单中选择一个事件时,将显示可用操作的列表。选择一个操作之后,系统会提示您对其进行配置。然后,您可以将光标悬停在操作的名称上,并单击右侧的** add Target**,从而向操作添加额外的目标(针对采取目标的操作)。
To add more actions to a case, click the "+"
Insert Action
icon at the bottom of the case. To delete an action from a case, select it in the
Interactions
pane and press
DELETE
.
若要向案例添加更多操作,请单击案例底部的“+”
插入操作
图标。要从案例中删除操作,请在** interaction
窗格中选择它,然后按
delete **。
You can reorder the actions in a case by dragging them up and down. Actions occur in sequential order from top to bottom, so it's important to arrange them in the exact order you want them to happen in the web browser.
您可以通过上下拖动来对案例中的操作重新排序。操作按从上到下的顺序执行,因此按照您希望它们在web浏览器中发生的确切顺序排列它们是很重要的。
2、Page and Master Events List
页面和母板事件列表
Mouse
鼠标
-
Page Click or Tap:
When the page is clicked or tapped
页面点击或点击:
当页面被点击或点击时
-
Page Double Click or Double Tap:
When the page is double-clicked or double-tapped
页面双击或双击:
当页面被双击或双击时
-
Page Context Menu (Right Click):
When the context menu is triggered on the page, either by right-clicking or another method
页面上下文菜单(右击):
当上下文菜单在页面上被触发时,通过右击或其他方法
-
Page Mouse Move:
Fires continuously as the mouse cursor is moved around the page
页面鼠标移动:
当鼠标光标在页面上移动时持续触发
Keyboard
键盘
Page
页面
-
Window Resized:
When the browser window is resized (also fires when the page first loads, after
Page Loaded
)
窗口大小调整:
当浏览器窗口大小调整时(也在页面第一次加载时触发,在
页面加载
后)
-
Page Loaded:
When the page first loads in the web browser
网页载入:
网页首次载入网页浏览器时
-
Adaptive View Changed:
When the current adaptive view changes due to one of the following:
自适应视图改变
:当当前的自适应视图由于下列原因之一改变时:
-
the browser window is resized
调整浏览器窗口的大小
-
the view is set with the
Set Adaptive View
action
视图是用** set自适应视图**操作设置的
-
a new view is selected in the
Adaptive Views
dropdown in the prototype player
在原型播放器的
自适应视图
下拉菜单中选择一个新视图
-
Window Scrolled Up:
When the page is scrolled up
窗口向上滚动:
当页面向上滚动时
-
Window Scrolled Down:
When the page is scrolled down
窗口向下滚动:
当页面向下滚动时
-
Window Scrolled:
When the page is scrolled in any direction
窗口滚动:
当页面在任何方向滚动时
3、Widget Events List
部件事件列表
3.1、All Widgets
所有部件
3.1.1、Mouse
鼠标
-
Click or Tap:
When the widget is clicked or tapped
点击或轻敲:
当小部件被点击或轻敲时
-
Double Click or Double Tap:
When the widget is double-clicked or double-tapped
双击或双击:
当小部件被双击或双击时
-
Context Menu (Right Click):
When the context menu is triggered on the widget, either by right-clicking or another method
上下文菜单(右键单击):
当上下文菜单在小部件上被触发时(通过右键单击或其他方法)
-
Mouse Button Down:
When the widget is clicked, while the mouse button is pressed down
鼠标按下:
点击小部件时,鼠标按下按钮
-
Mouse Button Up:
When the widget is clicked, upon the mouse button being released
鼠标松开:
当小部件被点击时,鼠标按钮被释放
-
Mouse Move:
Fires continuously as the mouse cursor is moved over the widget
鼠标移动:
当鼠标光标移动到小部件上时持续触发
-
Mouse Enter:
When the mouse cursor enters the area over the widget
鼠标移入:
当鼠标光标进入小部件上的区域时
-
Mouse Exit:
When the mouse cursor exits the area over the widget
鼠标移出:
当鼠标离开小部件上的区域时
-
Mouse Hover:
When the mouse cursor hovers over the widget for one second
鼠标悬停:
鼠标悬停在小部件上一秒
-
Long Click:
When the mouse button is held down on the widget for one second
鼠标长按:
当鼠标在小部件上按下一秒
3.1.2、Keyboard
键盘
-
Key Down:
When a keyboard key is pressed while the widget has browser focus
按键按下:
当小部件具有浏览器焦点时按下键盘键
-
Key Up:
When a keyboard key is released (after being pressed down) while the widget has browser focus
按键松开:
当键盘键被释放(按下后)而小部件有浏览器焦点时
3.1.3、Widget
部件
-
Moved:
When the widget is moved by a
Move
action
Moved:
当小部件被
Move
操作移动时
-
Rotated:
When the widget is rotated by a
Rotate
action
旋转时:
当小部件被
Rotate
操作旋转时**
-
Resized:
When the widget's size is changed by a
Set Size
action
尺寸改变时:
当小部件的大小被
设置大小
操作更改时
-
Shown:
When the widget is shown by a
Show
or
Toggle Visibility
action
显示时:
通过
Show
或
切换可见性
动作显示小部件
-
Hidden:
When the widget is hidden by a
Hide
or
Toggle Visibility
action
隐藏时:
当小部件被
Hide
或
切换可见性
操作隐藏时
-
Got Focus:
When the widget gets browser focus by being clicked or tabbed to, or via a
Focus
action
获得焦点时:
当小部件通过单击或选项卡到,或通过
焦点
操作获得浏览器焦点时
-
Lost Focus:
When the widget loses browser focus by being clicked or tabbed away from, or via a
Focus
action
失去焦点时:
当小部件被单击或标签化,或通过
焦点
操作而丢失浏览器焦点时
-
Selected:
When the widget is set to its selected state with a
Set Selected
action or when a checkbox or radio button is clicked
选中时:
通过** set Selected**操作将小部件设置为其选中状态,或者单击复选框或单选按钮时
-
Unselected:
When the widget is set to its unselected state with a
Set Selected
action or when a checkbox or radio button is clicked
取消选中时:
当小部件使用** set Selected**动作设置为未选择状态,或者单击复选框或单选按钮时
-
Selected or Unselected:
When the widget's selected state changes due to a
Set Selected
action or when a checkbox or radio button is clicked
选中或取消选中时:
当小部件的选择状态因
Set Selected
动作而改变,或当单击复选框或单选按钮时
-
Loaded:
When the widget initially loads in the web browser (fires after
Page Loaded
)
载入时:
当小部件最初在web浏览器中加载时(在
页面加载
后触发)
3.2、Droplists and List Boxes Only
下拉列表和列表框
-
Selection Changed:
When the selected option in the droplist or list box changes
选项改变时:
当droplist或列表框中的选定选项更改时
3.3、Text Fields and Text Areas Only
文本框和文本域
-
Text Changed:
When the text on the text field or text area changes, either by a user typing in it or via the
Set Text
action
文本改变时:
当文本字段或文本区域的文本更改时,要么通过用户输入,要么通过
设置文本
动作
3.4、Dynamic Panels Only
动态面板
3.4.1、Gesture
手势
-
Swiped Left:
When the dynamic panel is swiped from right to left
向左滑动时:
动态面板从右向左滑动
-
Swiped Right:
When the dynamic panel is swiped from left to right
向右滑动时:
动态面板从左向右滑动
-
Swiped Up:
When the dynamic panel is swiped from bottom to top
向上滑动时:
动态面板从下往上滑动
-
Swiped Down:
When the dynamic panel is swiped from top to bottom
向下滑动时:
动态面板从上到下滑动
3.4.2、Dynamic Panel
动态面板
-
Panel State Changed:
When the dynamic panel's state is changed with the
Set Panel State
action
面板状态改变:
当动态面板状态改变时,使用
Set面板状态
动作
-
Drag Started:
When you begin to drag the dynamic panel
拖动开始时:
开始拖动动态面板时
-
Drag Dropped:
When you stop dragging the dynamic panel (fires when the mouse button is released, not when it stops moving)
拖动结束时:
当您停止拖动动态面板时(当鼠标按钮释放时触发,而不是停止移动时)
-
Dragged:
Fires continuously while the dynamic panel is being dragged
拖动时:
动态面板被拖动时持续触发
-
Scrolled Up:
When the dynamic panel is scrolled up
向上滚动时:
动态面板向上滚动时
-
Scrolled Down:
When the dynamic panel is scrolled down
向下滚动时:
动态面板向下滚动时
-
Scrolled:
When the dynamic panel is scrolled in any direction
滚动时:
动态面板在任意方向滚动时
3.5、Repeaters Only
中继器
-
Item Loaded:
When the repeater's items first load in the web browser and when the repeater's dataset changes in any way
每项加载时:
当中继器的项目第一次加载在web浏览器,当中继器的数据集以任何方式改变
-
Item Resized:
When a repeater item's size changes as a result of any interaction (such as a widget in the item being shown, hidden, or resized)
项目尺寸改变时:
当中继器项的大小由于任何交互(例如显示、隐藏或调整大小的项中的小部件)而更改时
4、Actions List
动作列表
4.1、Links
链接
Open Link:
Opens a prototype page or external URL in one of the following locations:
打开链接:
在以下位置之一打开原型页面或外部URL:
-
Current Window:
the current browser window
当前窗口:
当前浏览器窗口
-
New Window/Tab:
a new browser window or tab
新窗口/标签:
一个新的浏览器窗口或标签
-
Popup Window:
a popup window