Axure9原型設計：動態面板實現頁面增刪改查模式彈窗效果
編輯導語：Axure是一個專業的快速原型設計工具，它能快速、高效的創建原型，同時支持多人協作設計和版本控制管理。本文作者就針對Axure9，談了談動態面板如何實現頁面增刪改查模式彈窗效果。
其實相類似的文章很多，只是發現在9.0的版本下，沒有示例，所以做了一個簡單的示例說明。
區別於8.0的版本，Axure9.0一些細節的改變讓人感覺陌生了些。
步驟如下：
一、動態面板設置
1. 拖出動態頁面，雙擊進入動態頁面設計頁面，增加相應的狀態
比如增刪改查四個狀態，然後就在這四個狀態下，完成各自的設計：
其中確定按鈕，有個點擊事件，是用來隱藏動態面板，其實沒有這個事件，鼠標點擊在頁面外也可以實現隱藏效果，只是增加了用戶操作學習的成本。
2. 設計完動態面板各個狀態之後，修改動態面板的幾個屬性
- 勾上“自適應內容”；
- 設置“固定到瀏覽器”，彈出後頁面的位置，我設置爲橫豎居中；
- 初始狀態“不可見”（這個很重要）。
實現彈出效果，不需要在動態面板上增加交互。
二、彈出的操作
1. 給增刪改查幾個按鈕，增加對應的交互
每個交互都是類似的，列舉詳情按鈕。新建交互的時候，鼠標在移動過程中會出現“添加情形”“添加目標”“添加動作”這些提示（交互的設置個人覺得跟8.0版本區別比較大）。
打開交互編輯器，按順序：添加事件、添加情形、添加目標、添加動作、設置動作：
- 添加事件：單擊時；
- 添加情形：“詳情”，注意的是，沒有設置任何條件，相當於 if 1=1 的效果；
- 添加目標：選擇動態面板；
- 添加動作：這裏有2個動作“顯示/隱藏”、“設置面板狀態”，意思是：點擊詳情按鈕時，以燈箱效果來顯示動態面板的詳情頁。
2. 給其他幾個按鈕也設置類似的交互
每個按鈕需要顯示的動態面板狀態頁面不同。
效果： https://e6osrz.axshare.com
本文由 @頭髮漸少脾氣漸漲 原創發佈於人人都是產品經理，未經許可，禁止轉載
題圖來自 Pexels，基於 CC0 協議
