专栏名称: AT阿宝哥
15年IT互联网从业经验,专注产品方案,人才...
目录
相关文章推荐
普象工业设计小站  ·  一线顶流女星的“丑”照,都藏在这个男人的相册里…… ·  13 小时前  
闵行消保委  ·  太治愈了~打开闵行这些地标的另一面→ ·  昨天  
闵行消保委  ·  太治愈了~打开闵行这些地标的另一面→ ·  昨天  
普象工业设计小站  ·  叹为观止!艺术家用一根根木材堆出巨型木制人脸 ... ·  昨天  
普象工业设计小站  ·  珍惜罕见!100年前影像,颠覆想象,高清复原 ... ·  2 天前  
51好读  ›  专栏  ›  AT阿宝哥

《Axure官方文档译读》之0501:Events, Cases, and Actions

AT阿宝哥  · 简书  ·  · 2020-01-17 00:35

正文

Axure RP

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 对话框。

image

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
    添加到用例上的动作

image

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 **。

image

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.)

您可以通过上下拖动来重新排序事件下的案例。(在处理条件逻辑时,用例的顺序很重要。)

image

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浏览器中发生的确切顺序排列它们是很重要的。

image

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 Key Down: When a keyboard key is pressed
    按下页面键: 按下键盘键

  • Page Key Up: When a keyboard key is released (after being pressed)
    翻页键: 键盘按键释放时(按下后)

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







请到「今天看啥」查看全文