Axure動態面板的使用

一、什麼是Axure的動態面板
      按照 Axure官方網站的解釋 ：動態面板控件（Dynamic Panel）可讓你實現高級的交互功能，實現原型的高保真度。動態面板包含有多個狀態（states），每一個狀態可包含一系列控件（你能夠把一個狀態理 解成一個獨立的頁面）。任什麼時候候都只有一個狀態（頁面）是可見的，或整個動態面板能夠被隱藏。結合交互動做，可讓動態面板的狀態進行隱藏、顯示和改變。 像添加其它控件同樣，能夠在控件面板中拖放動態面板控件到線框圖中。
      簡單的說，動態面板就是展現在頁面不跳轉的狀況下所能實現的交互狀態。而動態面板的每個狀態均可以看做是產生的一個新的交互結果。

二、Axure的動態面板能夠用來作什麼
      1）tab式頁籤的切換效果：Axure的官方給出的實例就是這個， AlipayUED的同窗 按照官方給出的作法制做了一個3tab的原型，不肯看英文說明的同窗能夠直接參照這篇博客。
      2）鼠標觸發式和點擊觸發式的下拉菜單效果：這個能夠結合Axure的默認組件中的「垂直菜單」、「水平菜單」來實現，經常使用於導航的原型製做。
      3）鼠標觸發式的浮窗效果：相似「Alt」的效果，經常使用於瀏覽提示和觸發式廣告。
      4）JS的鼠標點擊彈層效果：這個是目前使用被普遍使用的效果之一。
      5）註冊表單中的根據焦點判斷提示的效果：當焦點在輸入框內的時候提示該表單欄目填寫規範，當焦點離開輸入框的時候根據填寫的結果提示正確或者錯誤緣由，這個須要動用高級設計交互編輯功能結合Axure的邏輯條件和設置變量功能來實現。
      ….and so on…

三、如何使用Axure的動態面板
    1）動態面板屬於Axure的一個組件，在組件欄中選中它，直接拖到你但願它出現的位置。不用擔憂，即便在添加完狀態以後它的位置也是能夠隨時改變的。
    2）在動態面板上點擊右鍵——編輯動態面板——管理動態面板狀態。在彈出的窗口裏輸入動態面板的標籤名稱（默認是Unlabeled）、添加新的狀態。固然，也能夠在界面的右下角找到「動態面板管理」模塊來對動態面板進行操做。
    友情提示：
    a）默認的動態面板的狀態是顯示（藍色），咱們能夠把他設置成隱藏（×××）。
    b）狀態頁面中的藍色虛線外框表示動態面板的邊界範圍，超過這個邊界範圍外的內容在最終生成原型時將不可見。
    c）爲了避免影響其餘交互的製做，能夠點擊「動態面板管理」模塊右側的淡藍色小方塊在隱藏或顯示之間切換。或者，你能夠在頂部的頁面名稱（如Home）上點擊鼠標右鍵，選擇右鍵菜單所有隱藏或所有顯示，能夠隱藏或顯示頁面中全部的動態面板。
                                     
     3）雙擊添加完的動態面板狀態（State一、二、…），會在Axure的工做區打開一個新標籤。如今，把這個新標籤看成是一個全新的頁面來設計就OK了，不過，記住不要超過藍色虛線外框。
    4）給動態面板添加交互。Axure5.5中經常使用在動態面板上的交互行爲包括：Set Panel state to State（設置動態面板的狀態切換）、Show Panel（顯示動態面板）、Hide Panel（隱藏動態面板）、Toggle Visibility for Panel（切換動態面板可見屬性）、Move Panel（移動動態面板到一個設定的位置（x*y））、Bring Panel to Front（將動態面板置於最前）。交互行爲的添加與添加其餘組件的交互同樣，沒有什麼好解釋和介紹的。
   5）生成HTML發佈到web上、生成CHM分發給其餘團隊成員、創建Axure協做共享、….
   友情提示：
   a）使用 Axure漢化版本 會讓你使用更輕鬆，雖然漢化的還不是很是徹底，可是對於英文很差的同窗來講已是莫大的幫助了，向漢化的 生平一笑 同窗致敬！
   b）若是看Axure官方的使用說明很費勁，能夠參考目前陳良泳同窗翻譯的 快速原型設計 ，翻譯質量很不錯！
   c）從Axure5開始，能夠建立本身的組建庫和導入別人作好的組建庫了，官方提供了一套 雅虎的組件 ，我的以爲已經徹底夠用了。
   d）模塊和組件是2個徹底不一樣的概念，模塊的後綴是.rp而組件的後綴是.rplib。模塊和組件之間是能夠相互轉化的，你能夠利用組件去建立一些本身經常使用的模塊如網站頭部、底部等；你也能夠把模塊裏的內容分拆成組件單個使用。
   e）在生成chm格式的時候頁面名稱不要使用中文，中文名稱的頁面在chm裏會顯示成亂碼。

Read more: http://www.ikent.me/blog/1521