Axure的基本介紹
Axure是一款專業的原型設計工具, 讓負責定義需求設計;功能和界面的人員能快速設計出所需產品,其中不僅包含了對軟件產品的界面,交互邏輯的原型設計,還包含了流程圖;web網站的線框圖,並且能導出說明文檔。下面將對該工具進行詳細介紹:
(1)界面介紹:下圖即為工作區的基本頁面布局。頂部的一般就是我們的菜單,左部是設計的界面,左下方是元件庫,里面有我們需要的大部分控件和圖標,其中還可以自定義組件,中部最大區域就是我門的設計界面,右邊是用到的組件的所有屬性,交互事件,和自定義說明。
站點地圖是一個頁面導航面板, 在這里面可以對所設計的頁面進行添加、刪除、重命名和組織
組件面板中有線框圖組件和流程圖組件,用這些組件進行線框圖和流程圖的設計。這里顯示的是所有的組件,后面的一部分是流程圖組件 。
線框圖組件中,常用的有圖片、文本塊、矩形、占位符、形狀按鈕、圖片影射區域、動態面板。其中,在完成一些交互動作時,動態面板用的最多。
組件的使用:
所有的組件都是用鼠標單擊選中后拖入到工作區域.
對組件的編輯除了交互動作的設置之外,還可以對這些組件進行填充顏色或漸變、設置邊框顏色或粗細、以及編輯文字。
圖片的操作比較簡單,雙擊,選擇一張圖片打開即可。
需要重新添加圖片是,在原來的圖片上雙擊再選擇。
這幾個組件的操作都比較簡單,直接拖入到工作區域使用即可。
可以改變尺寸、顏色、邊框,可以輸入文字。由於Axure對中文支持不好,所以有時在矩形、占位符里輸入中文時會出現問題。
矩形、占位符、形狀按鈕都有很多形狀可以變化、彼此之間也可以相互轉換。
下面的構件可以對格式以及形狀進行修改。
矩形的形狀變化,其中,圓角的大小是可以控制的; 使用不同的形狀進行組合可以得到一些組合形狀。
模塊是一種可重復利用的頁面,比如頁面的模板、導航欄、頁首、頁腳等這些類似的元素都可以通過模塊來調用。
使用模塊的好處是:修改模塊時,原型中所有使用該模塊的地方都會跟着一起修改。這樣在設計時可以提高效率並且易於管理。
模塊的面板和站點地圖有點類似。可以添加、組織、編輯。
模塊的行為有三種:正常、作為背景、自定義組件
正常:這是默認狀態,就是修改模塊時,引用到頁面的模塊會跟着一起修改。
作為背景:當把模塊調用到頁面時會放置底層並且鎖定。
自定義:這種模塊可以在頁面中進行修改而不會引起其他模塊變化,類似於復制。
Axure里的交互大致有四種:
① 定義連接
② 設置動作
③ 多個條件場景
④ 頁面上的交互
目前Axure RP 支持的事件如下:
OnClick:鼠標點擊
OnMouseEnter:鼠標的指針移動到對象上
OnMouseOut:鼠標的指針移動出對象外
OnFocus:鼠標的指針進入文字輸入狀態(獲得焦點)
OnLostFocus:鼠標的指針離開文字輸入狀態 (失去焦點)
OnPageLoad:頁面或模塊載入
OnKeyUp: 釋放按鍵
如下圖,可清晰看出事件、場景和動作的關系。
在Axure里提供了四種鏈接方式:
1、鏈接到設計中的頁面
2、連接到外部網址或文件
3、重新載入當前頁面
4、返回上個頁面
如下所示,即可創建類似於我們在WEB端的按鈕或者超鏈接的時間處理,讓用戶能有類似在實際系統中使用一般。
除了定義鏈接之外,Axure里還可以設置豐富的動作,在Axure里,任何可以出發的事件中都可以執行這些動作。
除以上之外,還有一些可以比較實用的功能。
Open Link in Current Window:在當前窗口打開一個頁面
Open Link in Popup Window:在彈出的窗口中打開一個頁面
Open Link in Parent Window:在父窗口中打開一個頁面
Close Current Window:關閉當前窗口
Open Link in Frame:在框架中打開鏈接
Open Link in Parent Frame:在父框架中打開鏈接
Set Panel state(s) to State(s):設置動態面板的狀態轉換
Show Panel(s):顯示動態面板
Hide Panel(s):隱藏動態面板
Toggle Visibility for Panel(s):切換動態面板的可見屬性(顯示/隱藏)
Move Panel(s):根據絕對坐標或相對坐標來移動動態面板
Bring Panel to Front:將動態面板置為最前端
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):把對象狀態變成不可用狀態
Set Focus on Widget:設置焦點
Wait Time(s):等待多少毫秒(ms)后再進行這個動作
Expand Tree Node:展開樹狀節點
Collapse Tree Node:折疊樹狀節點
Other:顯示動作的文字說明
一個事件的發生在不同的場景中結果是不一樣的,比如發送信息,發送失敗和發送成功返回的結果是不一樣的。
在Axure里,這樣的多個場景的事件,可以通過條件設置來編輯,不同的條件會觸發不同的場景。
在發送信息時,有“發送成功”和“發送失敗”兩個場景:對於“發送成功”來說,有這樣的一連串事件:顯示“正在發送”、輸入框變為空白、等待一段時間后、顯示“發送成功”。
類似的,發送失敗時也有這樣一串動作。
而判斷消息發送是否成功則是根據實際應用中發送的情況而定。
Axure還支持頁面層級的觸發事件,當載入一個頁面時,就會觸發OnPageLoad事件。
OnPageLoad事件可以為我們設置頁面在載入時的初始狀態,並可以觸發一些我們需要的場景的條件。
例如,一個導航會有一個初始狀態和一個選中狀態,當我們從一個入口進入到一個頁面時,我們希望那個對應的導航按鈕時處於選中狀態,此時就需要使用OnPageLoad事件來設置。
Axure中很多的交互是由動態面板來實現的。
動態面板里面可以包含多個狀態,所以通過一些事件可以對動態面板的狀態進行切換,以此來實現交互效果。但任何時候都是只有一個狀態是可見的,或者整個動態面板是被隱藏的。
動態面板的第一個狀態時它的默認狀態。選擇編輯之后可以對其進行設計,像畫線框圖一樣。
動態面板的顯示范圍是在一個藍色的虛線框內,這個也是動態面板對事件的響應范圍。
動態面板管理面板。在這里也可以對動態面板進行添加、刪除、組織等操作。雙擊可以對其進行編輯。
有時,動態面板較多時,在屏幕上的顯示會讓人覺得不方便,此時可以通過點擊藍色的方塊對其取消顯示(不會改變它的可見屬性)
設置動態面板的轉換狀態
顯示動態面板
隱藏動態面板
切換動態面板可見屬性
移動動態面板
將動態面板置為最前