Start linking with Basic Interactions

本章節闡述元素之間的相互作用。你會學習如何創建簡單的頁面鏈接和交互的多個實例。這是第一篇或第二篇關于創建交互的文章。
視頻：下載MP4格式

?

?

---

Interactions Overview

在你的wireframe里面，可以從基本的頁面鏈接到動態的“AJAX-J”的行為到有條件的邏輯和數學函數之間增加聯系。
原型之間的相互作用往往取決于用戶和意圖。有時候，一個快速點擊是一個方式。但是如果你在做用戶測試，你可能希望在原型接近最終應用上面花費更多。在構建更復雜的交互之前，考慮是否需要是一個好主意。當然，有時它只是樂趣，使各項工作。
在Axure RP中，Interactions 主要有這三部分：事件Events，情形Cases和操作Actions。

Events

事件是用來觸發一個Interactin的。譬如，單擊，光標移動，拖拽，滾動等等。不同的Widgets有不同的事件。
下面是在Axure RP和widgets一些可用的事件。

• OnClick：當一個Widget被點擊時（除了Dynamic Panel之外的Widgets都有）
• OnMouseEnter：當光標移動到一個Widget時（images,text panel,hyperlinks,button shapes,image map regions）
• OnMouseOut：當光標從一個Widget中移出時（同上）
• OnKeyUp：到鍵盤從點擊的一個Widget中釋放時（text fields, text areas）
• OnFocus：當一個表單widget（從點擊或tab鍵）獲取焦點時（text fields,text areas,droplist,list boxes,checkboxes,radio button）
• OnLostFocus：當一個表單widget失去焦點時（同上）
• OnChange：當一個下拉框droplist的選項或list表list box 的item被選中時

還有一些是dynamic panel的特殊事件：OnMove, OnShow, OnHide, OnPanelStateChange, OnDragStart, OnDrag, OnDragDrop。關于這些更多文章請點擊高級Dynamic Panels。

Cases

Cases是對于事件作出的一種相應路徑。譬如，在超鏈接上點擊，可能會一個打開頁面的簡單case?；蛘?#xff0c;點擊登陸按鈕，可能會有兩個cases。如果登陸成功，會打開一個頁面；如果登陸失敗，會顯示錯誤信息。在Axure RP中，情形可以作為原型的選項或者可以依賴表單的值定義條件邏輯來自動執行case。

Actions

Actions是一個被定義好一個case的事件的反應。拿超鏈接的例子來說吧，點擊超鏈接，在當前窗口中打開一個頁面。這個Action就是“在當前窗口中打開一個頁面”。

以下列表時可用的Actions。

link action:

• Open Link in Current Window:在當前頁面打開一個頁面或者外部鏈接
• Open Link in New Window/Tab:在一個新的窗口或tab打開一個頁面或者外部鏈接
• Open Link in Popup Window:在一個彈出窗體中打開一個頁面或者外部鏈接，你可以設定窗體的大小和屬性
• Open Link in Parent Window:從彈出窗體加載父窗體的一個頁面
• Close Current Window:關閉當前頁面
• Open Link(s) in Frame(s):用內聯框架的widget加載內聯框架的頁面
• Open Link in Parent Frame:在父框架打開一個頁面。將一個頁面加載到內聯框架。

Dynamic Panel Action:

• Set Panel state(s) to State(s):設置一個或多個dynamic panels的當前可視狀態
• Show Panel(s):顯示一個或多個dynamic panels的內容
• Hide Panel(s):隱藏一個或多個dynamic panels的內容
• Toggle Visibility:根據當前的可視狀態顯示或隱藏dynamic panels
• Move Panel(s):移動dynamic panel到一個特定的位置或一段特定的距離
• Bring Panel(s) to Front:將dynamic panel移動到最頂層

Widgets and Variables actions:

• Set Variable/Widget value(s):設置一個或多個變量/Widget的值（譬如，在一個widget上面的文本值）
• Scroll to Image Map Region:滾動一個頁面到一個圖形地圖區域widget的位置。類似錨或跳轉連接（看不懂，原文是：Scrolls a page to the location of an image map region widget. Similar to an anchor or jump link）
• Enable Widget(s):設置widget為可用，譬如下拉框或者text field
• Disable Widget(s):設為不可用
• Set Widget(s) to Selected State:設置一個widget的樣式為可選或設置為默認的樣式
• Set Focus on Widget:設置一個widget的光標狀態為focus狀態（譬如，text field）
• Expand Tree Node(s):打開一顆widget樹的結點
• Collapse Tree Node(s):收起一顆widget樹的結點

Miscellaneous actions:

• Wait Time (ms): 延時一個特殊時間操作
• Other: 顯示一個widget的一段特殊的文本，譬如“Send email to user”

---

Interactions Case Editor

Add Interactions

在wireframe選擇一個widget，在屬性面板（widget properties pane）中的Interactions 選項卡中會顯示一個widget的可用屬性。

Add a case：選中一個事件點擊“Add Case”，或者雙擊事件。Axure會打開“Case Editor”對話框。在對話框里，你可以選擇或設置你需要的操作。

在對話框頂端（“Step 1: Description“），你可以編輯case的描述。描述是用來介紹原型的。特別是當你的原型的事件有多個cases而又沒有條件邏輯的時候。

在對話框左邊的列表（”Step 2: Add Actions“）增加一個或多個Action到case。

你選擇的Action會出現在中間的列表框內。（”Step 3: Organize Actions“）你可以增加一個Action多次。Action會按照顯示的順序響應。譬如，你先增加一個”Open Link in Current Window "之后再增加一個”Set Variable Value“ Action。執行的時候瀏覽器會先連接到下一個頁面再設置變量。
通過拖拽可以改變Action的順序?；蛘咄ㄟ^點擊之后出現在旁邊的箭頭（或右鍵Action）選擇向上或向下的選項。

在第三步（Step 3）中選擇Action，可以在右邊欄編輯屬性。（“Step 4: Configure actions“）
當你設置完成之后，點擊”OK“按鈕，case和action會出現在widget的屬性面板上面（Widget Properties Pane）。

Defining Multiple Cases

觸發一個事件會有不同的路徑或情景。重復增加case這一步會在一個事件上定義額外的cases。你可以用case的描述“case description”來描述腳本。譬如，在一個button的OnClick事件上，你可以有兩個cases。描述分別為“If Login Succeeds”和“If Login Fails”。在原型中，點擊一個button會顯示描述，你可以選擇其中一個描述來觸發操作。
一個好的case描述能夠與條件流的溝通更有效，并且便于維護和升級。當你需要你的原型自動執行，你可以在cases的操作中根據變量值或者用戶輸入的值定義條件邏輯。了解更多條件邏輯的文章。

?

---

Basic Interaction Tutorials (實例)

Page Links Tutorial

這個例子顯示如何增加一個page到page的鏈接。在一個新的瀏覽器選項卡中打開鏈接，鏈接會跳轉到前一個頁面，然后關閉當前瀏覽器選項卡/窗口。
例子：Go to Page Links Tutorial

Multiple Cases Tutorial

這個例子說明了，如何在一個不同路徑的用戶登錄腳本。事件里面增加多個cases和編輯case描述“case descriptions”。
例子：Go to Page Links Tutorial

Anchor Links Tutoral

這個例子在一個頁面用“Image Map Region”Widget和“Scroll to Image Map Region“操作來創建一個跳轉鏈接。
例子：Go to Page Links Tutorial

---

The Round Up

有了鏈接和多cases之后，東西就變得更加好玩了。
仍然需要幫助？進入論壇或發送郵件到support@axure.com

原文地址：http://www.axure.com/basic-interactionsAxure官方地址：http://www.axure.com/?PS：翻譯是為了更加透徹地理解文章和分享。英文一般，請輕度吐槽。

版權由原地址提供公司所有。

本文轉自 Ron Ngai 博客園博客，原文鏈接：http://www.cnblogs.com/rond/archive/2012/10/31/2748845.html??，如需轉載請自行聯系原作者

總結

以上是生活随笔為你收集整理的[翻译]Axure-Basic Interactions-原型设计工具Axure学习-第1.3节的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。