Axure中RP基本交互設計簡介
今天為大家介紹的是Axure RP基本交互設計簡介,希望大家會喜歡。
Axure RP基本交互設計
控件的交互
控件交互面板用於定義線框圖中控件的行為,包含定義簡單的鏈接和複雜的RIA 行為,所定義的交互都可以在將來生成的原型中進行操作執行。
在控件交互面板中可以定義控件的交互,交互事件(Events) 、場景( Cases)和動作(Actions)組成:
用户操作界面時就會觸發事件,如鼠標的 OnClick、OnMouseEnter 和 OnMouseOut;
每個事件可以包含多個場景,場景也就是事件觸發後要滿足的條件;
每個場景可執行多個動作,例如:打開鏈接、顯示面板、隱藏面板、移動面板。
定義鏈接
下列步驟説明如何在按鈕控件上定義一個鏈接:
1.首先,拖拉一個按鈕控件到線框圖中,並選擇這個按鈕;
2.然後,控件交互面板中鼠標雙擊“OnClick”這個事件,這時會出現“Interaction Case Properties”對話窗,在這個對話框中可以選擇要執行的動作;
3.在“Step 2”中,勾選“Open Link in Current Window”動作。
4.在“Step 3”中,點擊“Link”,在彈出的Link Properties 對話框中可以選擇要鏈接 的頁面或其它網頁地址 。
除了上面的步驟,加入一個鏈接的最快的方法是單擊控件交互面板頂部的“QuickLink” ,在彈出的 Link Properties 對話框中選擇要鏈接的頁面。
設置動作
除了簡單的鏈接之外,Axure還提供了許多豐富的動作,這些動作可以在任何觸發事件的場景中執行。以下是 Axure所支持的.動作:
Open Link in Current Window:在當前窗口打開一個頁面
Open Link in Popup Window:在彈出的窗口中打開一個頁面
Open Link in Parent Window:在父窗口中打開一個頁面
Close Current Window:關閉當前窗口
Open Link in Frame:在框架中打開一個頁面
Set Panel state(s) to State(s):為動態面板設定要顯示的狀態
Show Panel(s):顯示動態面板
Hide Panel(s):隱藏動態面板
Toggle Visibility for Panel(s):切換動態面板的顯示狀態(顯示/隱藏)
Move Panel(s):根據絕對座標或相對座標來移動動態面板
Set Variable and Widget value(s) equal to Value(s):設定變量值或控件值
Open Link in Parent Frame:在父頁面的嵌框架中打開一個頁面
Scroll to Image Map Region:滾動頁面到
Image Map 所在位置
Enable Widget(s):把對象狀態變成可用狀態
Disable Widget(s):把對象狀態變成不可用狀態
Wait Time(s):等待多少毫秒(ms)後再進行這個動作
Other:顯示動作的文字説明
多個場景(條件)
一個觸發事件可以包含有多個場景,根據條件執行流程或互動。
事件: OnPageLoad
Axure支持一個頁面層級的觸發事件:OnPageLoad,這個事件在原型載入頁面時觸發。
頁面 OnPageLoad事件在頁面備註面板中的Interactions 子面板中定義, OnPageLoad為事件添加場景的方式與控件事件相同
-
WAP教程:WML 鏈接和圖像
鏈接可以製作WML卡片來顯示WML的錨功能,圖像可以製作WML卡片來顯示圖像.鏈接可以製作WML卡片來顯示WML的錨功能。標籤總是要規定一個任務("go","prev",或"refresh")。任務定義了當用户選擇此鏈接時要做的事情。在本例中,當用户選擇"Nextpage",其任務是"前往":Next...
-
如何理解Javascript的caller,callee,call,apply區別
在提到上述的概念之前,首先想説説javascript中函數的隱含參數:argumentsarguments該對象代表正在執行的函數和調用它的函數的參數。[function.]arguments[n]參數function:選項。當前正在執行的Function對象的名字。n:選項。要傳遞給Function對象的從0開始的參數值...
-
javascript的return語句的作用
return語句在js中非常的重要,不僅僅具有返回函數值的功能,還具有一些特殊的用法,有個清晰的把握是非常有必要的。下面就結合實例簡單介紹一下return語句的作用。用來返回控制和函數結果:通常情況,return語句對於一個函數是很有必要的`,因為往往需要函數在一系列的代...
-
javascript操作select元素案例分析
本文實例講述了javascript操作select元素的.用法。分享給大家供大家參考。具體分析如下:這裏熟悉一下js對select元素的操作,html頁面中建立一個form,其中包含一個select元素和submit按鈕。當選擇select中某一項時改變其文字,當select中所有項的文字都改變後,重新恢...