Axure使用
(一) Axure rp的界面
1-主菜單工具欄
大部分類似office軟件,不做詳細解釋,鼠標移到按鈕上都有對應的提示。
2-主操作界面
繪制產品原型的操作區域,所有的用到的元件都拖到該區域。
3-站點地圖
所有頁面文件都存放在這個位置,可以在這里增加、刪除、修改、查看頁面,也可以通過鼠標拖動調整頁面順序以及頁面之間的關系。
4-axure元件庫
或者叫axure組件庫、axure部件庫,所有軟件自帶的元件和加載的元件庫都在這里,這里可以執行創建、加載、刪除axure元件庫的操作,也可以根據需求顯示全部元件或某一元件庫的元件。
5-母版管理
這里可以創建、刪除、像頁面頭部、導航欄這種出現在每一個頁面的元素,可以繪制在母版里面,然后加載到需要顯示的頁面,這樣在制作頁面時就不用再重復這些操作。
6-頁面屬性
這里可以設置當前頁面的樣式,添加與該頁面有關的注釋,以及設置頁面加載時觸發的事件onpageload。
7-元件屬性
這里可以設置選中元件的標簽、樣式,添加與該元件有關的注釋,以及設置頁面加載時觸發的事件;
A-交互事件:元件屬性區域閃電樣式的小圖標代表交互事件;
B-元件注釋:交互事件左面的圖標是用來添加元件注釋的,在這里我們能夠添加一些元件限定條件的注釋,比如:文本框的話,可以添加注釋指出輸入字符長度不能超過20。
C-元件樣式:交互事件右側的圖標是用來設置元件樣式的,可以在這里更改原件的字體、尺寸、旋轉角度等,當然也可以進行多個元件的對齊、組合等設置。
8 動態面板
這個是很重要的區域,在這里可以添加、刪除動態面板的狀態,以及狀態的排序,也可以在這里設置動態面板的標簽;當繪制原型動態面板被覆蓋時,我們可以在這里通過點擊選中相應的動態面板,也可以雙擊狀態進入編輯。
如果不小心關閉了,可以通過主菜單工具欄—視圖—重置視圖來找回。
(二)Axure rp的線框圖元件
l 圖片
圖片元件拖入編輯區后,可以通過雙擊選擇本地磁盤中的圖片,將圖片載入到編輯區,axure會自動提示將大圖片進行優化,以避免原型文件過大;選擇圖片時可以選擇圖片原始大小,或保持圖片元件的大小。
l 文本
在網頁中文本的名稱是lable,用于頁面中添加說明文字、文字連接,或一些動態的提示。
l 矩形
矩形的應用比較廣泛,比如作為頁面的背景、按鈕、以及一些元件的遮蓋等;矩形的形狀可以通過鼠標右鍵點擊–編輯選項—改變形狀,來變成我們需要的形狀,比如做選項卡時候我們需要頂部圓角的矩形,就可以通過改變矩形的形狀來實現。
l 占位符
制作原型時,可以用它來代替對一些沒有交互或者交互比較簡單容易說明的區域;也可以做成關閉按鈕。占位符在保真比較高的產品原型中作用不大。
l 圓角矩形
這個個人認為是因為圓角矩形應用廣泛,所以單獨拿出來作為元件給使用者,免去了對矩形的設置。
l 動態面板
非常重要的axure元件,必須要學會使用的元件,動態面板的顯示、隱藏、多狀態等,都是非常有用的。
l 水平線
就是一條水平的線,可以作為表示頁面一些區域分割時使用,比如在兩塊不同區域之間添加一條水平線,來明顯的區分。水平線可以通過設置元件屬性中的角度Roto變成斜線來使用。
l 垂直線
沒什么好說的,和水平線一樣的作用。
l 圖片熱區
用于點擊圖片中某個區域產生交互事件時使用,圖片熱區也是矩形的一種,可以通過設置矩形無邊框,背景色100%透明度來實現。
l 文本框(單行)
用于輸入文字的axure元件,用于登錄、標題、密碼框(鼠標右鍵–編輯選項–隱藏文本)等功能。
l 文本框(多行)
從字面意思就知道了它的功能,用于實現更多文字內容輸入的axure元件,用于回復、評論、微博發布框這類的功能。
l 下拉列表(框)
鼠標點擊時展開多個選項的axure元件,主要用來類別選擇或多條件查詢效果時使用。
l 列表框
一個多選項的列表,帶滾動條效果,個人認為樣子很丑,應用不是很多,應用場景可以參考word自定義快速訪問工具欄中選擇添加項的效果。
l 復選框
復選框用于同類別內容可以同時選擇多個時候使用,比如注冊時候個人興趣的選擇,又比如批量刪除郵件時選擇多個郵件的功能。
l 單選按鈕
多個選項僅能選擇其一時候使用,比如性別選擇。多個單選按鈕聯動效果需要同時選中多個需要聯動的單選按鈕—鼠標右鍵—編輯選項–指定單選按鈕組來實現。不嫌麻煩的話也可以通過設置每個單選按鈕的onclick事件來實現。
l 內部框架
用于在頁面中嵌入其他頁面的axure元件,可以設置好大小后雙擊它,指定要嵌入的頁面。框架可以通過編輯選項取消滾動條,應用場景多見于網站后臺原型和移動互聯網產品原型。
l 表格
表格很常見,就不多做解釋,每個表格都可以設置單獨的事件,但是axure還不支持單元格的合并。
l 菜單縱向
主要用于網站導航。多使用于網站后臺。
l 菜單橫向
主要用于網站導航,多使用于網站前臺。
l 樹
主要用于網站導航。多使用于網站后臺。
(三)Axure rp元件的觸發事件
l OnClick(點擊時)
鼠標點擊事件,除了動態面板的所有的其他元件的點擊時觸發。比如點擊按鈕。
l OnMouseEnter(鼠標移入時)
鼠標進入到某個元件范圍時觸發,比如當鼠標移到某張圖片時顯示該圖片的介紹。
l OnMouseOut(鼠標移出時)
鼠標離開某個元件范圍時觸發。比如鼠標離開圖片時,圖片介紹消失。
l OnKeyUp(按鍵彈起時)
文本框(單行與多行)編輯時,鍵盤按下某一個按鍵松開時觸發,不支持其他axure元件。比如統計文本框輸入的字數。
l OnFocus(獲取焦點時)
當一個元件通過點擊或切換獲取焦點時觸發。比如搜索框編輯時,清空“請輸入關鍵字”的提示。
l OnLostFocus(失去焦點時)
當一個組件失去焦點時觸發。比如用戶名、密碼的驗證。
l OnChange(選中項改變時)
下拉列表框或列表框的選中項改變時觸發,不支持其他元件。比如選擇地址時,選擇不同的省份,顯示對應的省內城市。
l OnMove(移動時)
當動態面板移動時觸發。是指通過其他事件的觸發控制面板移動時,比如當進度條移動時,進度比例的變化。
l The OnShow and OnHide events(顯示或隱藏時)
當動態面板隱藏或顯示時觸發。比如圖片顯示時按鈕文字是關閉圖片,圖片隱藏時按鈕文字變為打開圖片。
l OnPanelStateChange(狀態改變時)
當動態面板更改面板的狀態時觸發。比如通過改變動態面板狀態實現的進度條效果,當狀態改變時改變相應的進度比例。
l OnDragStart: Occurs when the drag begins(開始拖動面板時)
當開始拖動動態面板時觸發。比如在動態面板拖動開始時,顯示“拖動開始”的文字提示。
l OnDrag: Occurs as the panel is dragged(面板拖動時)
動態面板拖動時觸發,比如拖動一塊動態面板另外一塊跟隨移動。
l OnDragDrop: Occurs when the panel is dropped(面板拖動結束時)
當拖拽結束時觸發。比如滑動解鎖,面板拖動結束時根據滑塊的位置設置相應的效果。
(四)條件生成器
在axure原型制作的過程中,很多時候我們需要觸發一個又一個事件,以交互設計效果展示的需求。在這些事件里我們經常需要在滿足某一條件時完成指定的動作。比如:文本框文字為空的時候點擊按鈕無效。或者拖動動態面板沒到達指定位置退回原位等。
這一節教程我們就講一下,如何使用條件生成器,至于條件的設置,以后結合相關的案例再逐漸深入。
(一)條件邏輯
條件生成器是在我們雙擊某一事件打開用例編輯器后才能打開。如截圖里1的位置,藍色的“添加條件”點擊后即打開條件生成器。
打開條件生成器后,2的位置有2個選項,一個是“全部”一個是“任何”。
全部:是指事件觸發后必須同時滿足條件生成器里設置的所有條件時才繼續下一步動作,否則不執行任何動作。用白話來舉例:如果個稅滿五年(條件1)并且繳納時間未間斷(條件2),就能參加搖號(下一步動作)。這個例子舉得好心酸:(。
任何:是指事件觸發后只要滿足條件生成器里的任意一個條件即執行下一步動作。用白話舉例:如果連續5年繳納個稅(條件1)或者連續60個月繳納社保(條件2),就可以買房(下一步動作)。尼瑪,心更酸了!
(二)可設置的條件
可設置的條件是指圖片中3的位置包含的內容。
分別是:
l 變量值
軟件內自帶了一個變量“onloadvariable”,也可以添加、刪除、重命名變量,管理變量可以從菜單欄左數第四個(漢化版本的“線框圖”)中的第三項“管理變量”進行上述操作。當然在條件編輯器里選擇變量時最后一項“新建”也可以完成對變量的管理。變量值可以是字母、數字、特殊字符和漢字或者是它們的任意組合。
l 變量長度
是指變量值的字符個數,在axure里一個漢字的長度是1。變量長度的值可以通過axure自帶函數進行獲取。
l 元件文字
是指每個元件上面可編輯的文字。不包含:動態面板、圖片熱區、垂直線、水平線、內部框架、下拉列表、列表框。
l 元件值長度
僅包含單行和多行文本框、下拉列表和列表框。
l 選中于
僅適用于單選按鈕和復選框,選中時值為“真”,未選中時值為“假”。
l 選中項于
僅適用于下拉列表和列表框,通過獲取元件當前值來確定選中狀態。
l 動態面板狀態
動態面板專用,以獲取事件激發時動態面板的狀態作為判斷條件。
l 動態面板可見性
動態面板專用,以動態面板顯示或隱藏作為判斷條件。
l 焦點元件上的文字
即通過鼠標點擊或Tab切換被選中的元件上的文字,比如文本框獲取焦點時,光標在文本框內閃動;按鈕獲取焦點時四周會出現虛線。
l 值
可以是字母、數字、漢字、符號、函數、公式;可以直接輸入,或者點擊fx進入編輯。可以設置等于、不等于大于、包含、是、不是等條件。具體使用方法以后結合案例詳解。
l 拖放光標
是指拖動動態面板時光標(鼠標指針)的位置,以拖放光標是否進入某個元件的范圍為條件。
l 元件范圍
是指元件覆蓋的范圍,以是否觸碰到指定元件為條件。
(五)系統函數與變量
1、變量的種類:
全局變量:可以在整個原型的任意位置調用和修改。
局部變量:僅作用于某一事件的某一動作內。
自定義變量:自行新建的全局變量。
2、axure函數
特殊變量:特殊變量其實是軟件自帶的函數,就像excel中的函數一樣,可以調用獲得一些特定的值。
功能:除了運算符之外的三個函數,可以對變量進行進一步操作以獲取需要的值。比如:截取變量字符串中的某一段或者計算變量字符串的長度。
3、特殊變量的使用
使用時我們只需要點擊選擇相應的變量或直接輸入[[變量名稱]],再通過不同的表達式就能得到我們要的效果。比如我們想在文本框內顯示當前的日期(yy-mm-dd格式),就可以通過下面的表達式實現:[[Year]]-[[Month]]-[[Day]]
4、函數的使用
功能中的函數都是通過“變量名.函數名(參數)”來實現:
例1:截取變量“頁面名稱”中的前三個字符
[[PageName.substring(0, 3)]]
例2:獲取頁面名稱字符的長度
[[PageName.length]]
例3:將變量轉換成小數點后保留兩位的數值
[[自定義變量名.toFixed(2)]]
5、變量的使用情景
1)記錄登錄狀態;
2)顯示編輯框還能輸入多少漢字;
3)滾動條的實現;
4)根據不同的變量跳轉至不同的頁面
N)……
太多,就不一一列舉了。
簡單說,變量的使用一般程序:添加變量,修改變量值,判斷變量值,根據不同的值執行不同的動作。
值得注意的是,在事件中設置在當前頁打開新窗口時,如果同時對變量有操作,記得把變量操作寫在跳轉頁面之前,寫在后面變量會不起作用。
總結
- 上一篇: (原)人体姿态识别Light weigh
- 下一篇: CentOS安装rzsz命令