1、什麼是Axure的動態面板
按照Axure官方網站的解釋 ：動態面板控件（Dynamic Panel）可以讓你實現高級的交互功能，實現原型的高保真度。動態面板包含有多個狀態（states），每個狀態可包含一系列控件（你可以把一個狀態理 解成一個獨立的頁面）。任何時候都只有一個狀態（頁面）是可見的，或整個動態面板可以被隱藏。結合交互動作，可以讓動態面板的狀態進行隱藏、顯示和改變。 像添加其它控件一樣，可以在控件面板中拖放動態面板控件到線框圖中。
簡單的說，動態面板就是展示在頁面不跳轉的情況下所能實現的交互狀態。而動態面板的每一個狀態都可以看作是產生的一個新的交互結果。
按照Axure官方網站的解釋 ：動態面板控件（Dynamic Panel）可以讓你實現高級的交互功能，實現原型的高保真度。動態面板包含有多個狀態（states），每個狀態可包含一系列控件（你可以把一個狀態理 解成一個獨立的頁面）。任何時候都只有一個狀態（頁面）是可見的，或整個動態面板可以被隱藏。結合交互動作，可以讓動態面板的狀態進行隱藏、顯示和改變。 像添加其它控件一樣，可以在控件面板中拖放動態面板控件到線框圖中。
簡單的說，動態面板就是展示在頁面不跳轉的情況下所能實現的交互狀態。而動態面板的每一個狀態都可以看作是產生的一個新的交互結果。
2、Axure的動態面板可以用來做什麼
1）tab式頁籤的切換效果：Axure的官方給出的實例就是這個，AlipayUED的同學 按照官方給出的做法制作了一個3tab的原型，不願看英文說明的同學可以直接參照這篇博客。
2）鼠標觸發式和點擊觸發式的下拉菜單效果：這個可以結合Axure的默認組件中的“垂直菜單”、“水平菜單”來實現，常用於導航的原型製作。
3）鼠標觸發式的浮窗效果：類似“Alt”的效果，常用於瀏覽提示和觸發式廣告。
4）JS的鼠標點擊彈層效果：這個是目前使用被廣泛使用的效果之一。
5）註冊表單中的根據焦點判斷提示的效果：當焦點在輸入框內的時候提示該表單欄目填寫規範，當焦點離開輸入框的時候根據填寫的結果提示正確或者錯誤原因，這個需要動用高級設計交互編輯功能結合Axure的邏輯條件和設置變量功能來實現。
….and so on…
1）tab式頁籤的切換效果：Axure的官方給出的實例就是這個，AlipayUED的同學 按照官方給出的做法制作了一個3tab的原型，不願看英文說明的同學可以直接參照這篇博客。
2）鼠標觸發式和點擊觸發式的下拉菜單效果：這個可以結合Axure的默認組件中的“垂直菜單”、“水平菜單”來實現，常用於導航的原型製作。
3）鼠標觸發式的浮窗效果：類似“Alt”的效果，常用於瀏覽提示和觸發式廣告。
4）JS的鼠標點擊彈層效果：這個是目前使用被廣泛使用的效果之一。
5）註冊表單中的根據焦點判斷提示的效果：當焦點在輸入框內的時候提示該表單欄目填寫規範，當焦點離開輸入框的時候根據填寫的結果提示正確或者錯誤原因，這個需要動用高級設計交互編輯功能結合Axure的邏輯條件和設置變量功能來實現。
….and so on…
3、如何使用Axure的動態面板
1）動態面板屬於Axure的一個組件，在組件欄中選中它，直接拖到你希望它出現的位置。不用擔心，即使在添加完狀態之後它的位置也是可以隨時改變的。
2）在動態面板上點擊右鍵——編輯動態面板——管理動態面板狀態。在彈出的窗口裏輸入動態面板的標籤名稱（默認是Unlabeled）、添加新的狀態。當然，也可以在界面的右下角找到“動態面板管理”模塊來對動態面板進行操作。
友情提示：
a）默認的動態面板的狀態是顯示（藍色），我們可以把他設置成隱藏（黃色）。
b）狀態頁面中的藍色虛線外框表示動態面板的邊界範圍，超過這個邊界範圍外的內容在最終生成原型時將不可見。
c）爲了不影響其他交互的製作，可以點擊“動態面板管理”模塊右側的淡藍色小方塊在隱藏或顯示之間切換。或者，你可以在頂部的頁面名稱（如Home）上點擊鼠標右鍵，選擇右鍵菜單全部隱藏或全部顯示，可以隱藏或顯示頁面中所有的動態面板。
![]()
3）雙擊添加完的動態面板狀態（State1、2、…），會在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裏會顯示成亂碼。
1）動態面板屬於Axure的一個組件，在組件欄中選中它，直接拖到你希望它出現的位置。不用擔心，即使在添加完狀態之後它的位置也是可以隨時改變的。
2）在動態面板上點擊右鍵——編輯動態面板——管理動態面板狀態。在彈出的窗口裏輸入動態面板的標籤名稱（默認是Unlabeled）、添加新的狀態。當然，也可以在界面的右下角找到“動態面板管理”模塊來對動態面板進行操作。
友情提示：
a）默認的動態面板的狀態是顯示（藍色），我們可以把他設置成隱藏（黃色）。
b）狀態頁面中的藍色虛線外框表示動態面板的邊界範圍，超過這個邊界範圍外的內容在最終生成原型時將不可見。
c）爲了不影響其他交互的製作，可以點擊“動態面板管理”模塊右側的淡藍色小方塊在隱藏或顯示之間切換。或者，你可以在頂部的頁面名稱（如Home）上點擊鼠標右鍵，選擇右鍵菜單全部隱藏或全部顯示，可以隱藏或顯示頁面中所有的動態面板。
3）雙擊添加完的動態面板狀態（State1、2、…），會在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