編輯導(dǎo)語：Axure是一個專業(yè)的快速原型設(shè)計工具，它能快速、高效的創(chuàng)建原型，同時支持多人協(xié)作設(shè)計和版本控制管理。本文作者就針對Axure9，談了談動態(tài)面板如何實(shí)現(xiàn)頁面增刪改查模式彈窗效果。

其實(shí)相類似的文章很多，只是發(fā)現(xiàn)在9.0的版本下，沒有示例，所以做了一個簡單的示例說明。

區(qū)別于8.0的版本，Axure9.0一些細(xì)節(jié)的改變讓人感覺陌生了些。

步驟如下：

一、動態(tài)面板設(shè)置

1. 拖出動態(tài)頁面，雙擊進(jìn)入動態(tài)頁面設(shè)計頁面，增加相應(yīng)的狀態(tài)

比如增刪改查四個狀態(tài)，然后就在這四個狀態(tài)下，完成各自的設(shè)計：

其中確定按鈕，有個點(diǎn)擊事件，是用來隱藏動態(tài)面板，其實(shí)沒有這個事件，鼠標(biāo)點(diǎn)擊在頁面外也可以實(shí)現(xiàn)隱藏效果，只是增加了用戶操作學(xué)習(xí)的成本。

2.?設(shè)計完動態(tài)面板各個狀態(tài)之后，修改動態(tài)面板的幾個屬性

1. 勾上“自適應(yīng)內(nèi)容”；
2. 設(shè)置“固定到瀏覽器”，彈出后頁面的位置，我設(shè)置為橫豎居中；
3. 初始狀態(tài)“不可見”（這個很重要）。

實(shí)現(xiàn)彈出效果，不需要在動態(tài)面板上增加交互。

二、彈出的操作

1.?給增刪改查幾個按鈕，增加對應(yīng)的交互

每個交互都是類似的，列舉詳情按鈕。新建交互的時候，鼠標(biāo)在移動過程中會出現(xiàn)“添加情形”“添加目標(biāo)”“添加動作”這些提示（交互的設(shè)置個人覺得跟8.0版本區(qū)別比較大）。

打開交互編輯器，按順序：添加事件、添加情形、添加目標(biāo)、添加動作、設(shè)置動作：

1. 添加事件：單擊時；
2. 添加情形：“詳情”，注意的是，沒有設(shè)置任何條件，相當(dāng)于 if 1=1 的效果；
3. 添加目標(biāo)：選擇動態(tài)面板；
4. 添加動作：這里有2個動作“顯示/隱藏”、“設(shè)置面板狀態(tài)”，意思是：點(diǎn)擊詳情按鈕時，以燈箱效果來顯示動態(tài)面板的詳情頁。

2.?給其他幾個按鈕也設(shè)置類似的交互

每個按鈕需要顯示的動態(tài)面板狀態(tài)頁面不同。

效果：https://e6osrz.axshare.com

本文由 @頭發(fā)漸少脾氣漸漲 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Pexels，基于 CC0 協(xié)議