AxureRP動態面板交互設計實例教程
主要是對AxureRP 動態面板交互設計實例教程的介紹,有需要的朋友可以參考一下。就跟隨本站小編一起去了解下吧,想了解更多相關信息請持續關注我們應屆畢業生考試網!
網站開發技術越來越豐富了,不管是AJAX或JavaScript,甚至是Flash、Silverlight、JavaFX,這些都被歸類為RIA(Rich Internet Application)的技術,能夠讓網站界面更豐富,展現更優質的人機交互。Axure RP能夠進行交互設計,且可以立即將結果呈現於原型上,而不是隻有文字敍述。且學習Axure RP的交互設計,並不需要學習HTML或Java Script語法,通過直觀設計就可以完成多樣的交互界面設計。在Axure RP設計出來的原型中,最簡單的交互設計是網頁鏈接,真正發揮Axure RP在交互設計上的驚人特色,並不是只有超鏈接這麼簡單的交互,下面通過介紹動態面板的操作與控制,來學習更豐富更友善的交互界面設計。
動態面板是專門用來設計動態原型功能的組件,每個動態面板可以包含一個或多個狀態,每個狀態本身是一個頁面,通過控制狀態的顯示順序或隱藏/顯示動態面板來達成交互界面的效果,像其它組件一樣,動態面板可以直接通過拖拽的方式從組件選擇面板加入到畫布中。
動態面板:本身可以包含很多個狀態,而每個狀態都是一個小網頁。被放置在最上層的狀態就是該面板的界面,即默認展示效果。
狀態:每個狀態都是一個小網頁,而這個小網頁的邊界與大小,與所屬的動態面板大小相同。不同的狀態可以重疊在同一個動態面板裏頭,只有放在最上層的狀態,才會呈現於原型的默認畫面中。以Axure RP所設計出來的多樣交互界面,大多由各種觸發事件來控制動態面板顯示或消失,或控制哪個狀態在最上層來仿真出實際的交互界面。
在動態面板上鼠標左鍵雙擊,會開啟動態面板狀態管理對話框。在這個對話窗口中,可以新增狀態、更改狀態名稱、調整狀態排序、刪除狀態與編輯狀態。在動態面板狀態管理對話框中選擇一個狀態,然後按下編輯狀態鈕或者直接雙擊改狀態,會開啟這個狀態的線框圖以供設計。或者可以選擇編輯所有狀態鈕,一口氣把所有的狀態頁面通通開啟。打開後就可以像設計其它線框圖一樣的設計狀態頁面, 每個狀態頁面的側邊藍色虛線外框就表示其所屬的動態面板的邊界。
動態面板可以預設為隱藏,做法是在動態面板上按鼠標右鍵,並選擇編輯動態面板->設為隱藏,這樣就可以隱藏面板的內容,而且動態面板也會從藍色變成黃色。已經預設隱藏的`動態面板,可以選擇編輯動態面板->設為可見來顯示。
在交互事件屬性對話框中有5種交互方式是專門用來控制動態面板的,分別是:
•Set Panel state(s) to State(s):設置動態面板的狀態轉換
•Show Panel(s):顯示動態面板
•Hide Panel(s):隱藏動態面板
•Toggle Visibility for Panel(s):切換動態面板可見屬性
•Move Panel(s):移動動態面板,可根據絕對座標或相對座標來移動
下面以最常見的Tab標籤切換效果來演示動態面板的交互效果。新增一個動態面板,設置兩個狀態,分別在兩個狀態中設計成如下小頁面:
設置狀態1在狀態2的前面,狀態1的頁面顯示產品的信息,狀態2的頁面顯示活動的信息,產品、活動等的抬頭是用矩形組件設計的,在相應的頁面設置單擊事件,如在狀態1的產品處設置單擊事件選擇為“設置動態面板的狀態轉換”,並在動態面板狀態管理中設置轉換效果為轉換至狀態1;在狀態2的產品處設置單擊事件選擇為“設置動態面板的狀態轉換”,並在動態面板狀態管理中設置轉換效果為轉換至狀態2.狀態1和狀態2的小頁面設計的不一樣,這樣切換的時候也會看出狀態切換的效果。需要注意的是,上述的單擊事件的設置在每個狀態的小頁面中都需要做相同的設置,可以直接複製粘貼。
全部設置好之後,生成原型即可查看效果。
該例子只用到了矩形組件和動態面板組件,比較簡單,如果需要比較美觀,可以在動態面板的各個狀態小頁面上的設計上下功夫,比如改變矩形的顯示樣式為圓角矩形,改變顏色等,但主要功能是一樣的。
-
asp.net 操作INI文件讀寫類實例代碼
操作INI文件讀寫類實例代碼複製代碼代碼如下:usingSystem;usingropServices;using;using;namespaceCommon{//////INI文件讀寫類。///publicclassINIFile{publicstringpath;publicINIFile(stringINIPath){path=INIPath;}[DllImport("kernel32")]privatestaticex...
-
學習JavaScript的7個理由
為什麼要學習JavaScript?學習JavaScript對我們的工作有什麼幫助麼?下面YJBYS小編為大家講解!需求我之所以這樣説的主要原因是,隨着JavaScript的日漸成熟,以及方案變得越來越可行,我們對JavaScript程序員的需求正在持續增長。JavaScript在需求比例上已經超過了C#,僅...
-
JavaScript 函數表達式
JavaScript中創建函數主要有兩種方法:函數聲明和函數表達式。這兩種方式都有不同的適用場景。這篇筆記主要關注的是函數表達式的幾大特點以及它的使用場景,下面一一描述。主要特點可選的函數名稱函數名稱是函數聲明的必需組成部分,這個函數名稱相當於一個變量,新定...
-
如何理解Javascript的caller,callee,call,apply區別
在提到上述的概念之前,首先想説説javascript中函數的隱含參數:argumentsarguments該對象代表正在執行的函數和調用它的函數的參數。[function.]arguments[n]參數function:選項。當前正在執行的Function對象的名字。n:選項。要傳遞給Function對象的從0開始的參數值...