編輯導語：在頁面的設(shè)計中經(jīng)常會遇到一些動態(tài)面板的設(shè)計，對于這類設(shè)計需要注意很多細節(jié)方面以及邏輯方面的問題；本文作者分享了關(guān)于如何運用動態(tài)面板，繪制省市區(qū)三級聯(lián)動下拉菜單的方法，我們一起來學習一下。

動態(tài)面板在Axure原型設(shè)計中，可以說是應(yīng)用最廣泛的了。本次課程我們就來學習一下，動態(tài)面板的應(yīng)用。

本篇我們來講解一下，如何運用動態(tài)面板，繪制省市區(qū)三級聯(lián)動下拉菜單。

完成效果圖

我們先來看看完成效果圖，大家可以看到，省市區(qū)聯(lián)動下拉菜單的交互主要包括：

• 初始狀態(tài)時，省份菜單顯示，城市菜單和區(qū)縣菜單不顯示；
• 選擇省份時，城市菜單顯示，區(qū)縣菜單不顯示；
• 選擇城市時，區(qū)縣菜單顯示；
• 切換省份時，城市菜單復(fù)原，區(qū)縣菜單不顯示；
• 切換城市時，區(qū)縣菜單復(fù)原。

下拉菜單初稿

為了節(jié)省時間，這里提前把下拉菜單初稿準備好了，下面來給大家講解一下設(shè)置聯(lián)動交互的步驟。

01 第一步：創(chuàng)建動態(tài)面板

首先選中北京城市菜單，點擊右鍵，在彈出菜單中選擇轉(zhuǎn)換為動態(tài)面板；然后把左側(cè)欄切換為概要，將動態(tài)面板命名為城市（適當?shù)拿煞奖惴直媾c查找元件）。

在北京城市菜單上，點擊右鍵選擇轉(zhuǎn)換為動態(tài)面板

將動態(tài)面板命名為城市

在動態(tài)面板State1上點擊右鍵，在彈出菜單中選擇添加狀態(tài)，新增一個State2狀態(tài)；將河北城市菜單，拖入State2，并在動態(tài)面板中拖動其對齊省份菜單。

在State1上點擊右鍵，選擇添加狀態(tài)，新增為State2

將河北城市拖入State2

在動態(tài)面板中，拖動河北城市菜單對齊省份菜單

接著回到正常畫布，選中北京區(qū)縣菜單，點擊右鍵，在彈出菜單中選擇轉(zhuǎn)換為動態(tài)面板；然后左側(cè)欄的概要中，將動態(tài)面板命名為區(qū)縣。

在北京區(qū)縣菜單上，點擊右鍵選擇轉(zhuǎn)換為動態(tài)面板

將動態(tài)面板命名為區(qū)縣

在區(qū)縣動態(tài)面板的State1上點擊右鍵，在彈出菜單中選擇添加狀態(tài)，新增2個狀態(tài)為State2和State3；然后將石家莊區(qū)縣菜單拖入State 2，將唐山區(qū)縣菜單拖入State 3，并在動態(tài)面板中拖動其對齊省份菜單。

在State1上點擊右鍵，選擇添加狀態(tài)，新增2個狀態(tài)為State2和State3

石家莊區(qū)縣拖入State 2，將唐山區(qū)縣拖入State 3

在動態(tài)面板中，拖動石家莊區(qū)縣和唐山區(qū)縣菜單對齊省份菜單

02 第二步：設(shè)置省份菜單的聯(lián)動交互

首先回到正常畫布，選中省份菜單，在右側(cè)欄的交互中點擊新建交互，再依次點擊選項改變時_顯示隱藏_城市動態(tài)面板，設(shè)置為隱藏；然后點擊右上角的添加目標，選擇區(qū)縣動態(tài)面板（默認為隱藏），再點擊完成。

選中省份菜單，在右側(cè)欄點擊新建交互

依次點擊選項改變時_顯示隱藏_城市動態(tài)面板

設(shè)置為隱藏

點擊添加目標，選擇區(qū)縣動態(tài)面板

默認為隱藏，直接點擊完成

接著點擊啟用情形，在情形編輯彈窗上點擊添加條件，保持各個菜單為默認項，再直接點擊確定。

點擊啟用情形，打開情形編輯窗

在情形編輯窗上點擊添加條件，再點擊確定

這里的交互是指，我們通過判斷省份菜單的選項，來確定城市/區(qū)縣菜單的顯示狀態(tài)：

• 情形一，當選項為請選擇省/直轄市時，隱藏城市菜單和區(qū)縣菜單；
• 情形二，當選項為北京時，顯示城市菜單State 1（北京城市），區(qū)縣菜單不顯示；
• 情形三，當選項為河北時，顯示城市菜單State 2（河北城市），區(qū)縣菜單不顯示。

所以我們接著依照前面的步驟，來添加這第二種情形；首先點擊選項改變時的添加情形，打開情形編輯窗，在彈窗中點擊添加條件，最后的下拉菜單選擇北京。

點擊交互右上角的添加情形，打開情形編輯窗

在彈窗中點擊添加條件，修改條件的最后一個菜單為北京

接著在右側(cè)欄的情形2中，點擊添加動作，再依次點擊設(shè)置面板狀態(tài)_城市動態(tài)面板，勾選如果隱藏則顯示；然后再次點擊添加動作，依次點擊設(shè)置列表選中項_北京城市；再一次點擊添加動作，依次點擊顯示隱藏_區(qū)縣動態(tài)面板，設(shè)置為隱藏。

點擊情形2上的添加動作

再依次點擊設(shè)置面板狀態(tài)_城市動態(tài)面板，勾選如果隱藏則顯示

再次點擊添加動作，點擊設(shè)置列表選中項_北京城市

再一次點擊添加動作，點擊顯示隱藏_區(qū)縣動態(tài)面板，設(shè)置為隱藏

我們接著再添加第三種情形，點擊選項改變時的添加情形，打開情形編輯窗，在彈窗中點擊添加條件，最后的下拉菜單選擇河北。

再次點擊添加情形，添加情形3

在情形編輯窗中點擊添加條件，最后的下拉菜單選擇河北

接著在右側(cè)欄的情形3中點擊添加動作，依次點擊設(shè)置面板狀態(tài)_城市動態(tài)面板，點擊State菜單，選擇State 2（河北城市），勾選如果隱藏則顯示。

在情形3中點擊添加動作

點擊設(shè)置面板狀態(tài)_城市動態(tài)面板，State選擇State2，勾選如果隱藏則顯示

再次點擊添加動作，依次點擊設(shè)置列表選中項_河北城市；再一次點擊添加動作，依次點擊顯示隱藏_區(qū)縣動態(tài)面板，設(shè)置為隱藏。

再次點擊添加動作，點擊設(shè)置列表選中項_河北城市

再一次點擊添加動作，點擊顯示隱藏_區(qū)縣動態(tài)面板，設(shè)置為隱藏

第二步省份菜單的所有交互

03 第三步：設(shè)置北京城市菜單的聯(lián)動交互

首先在左側(cè)欄概要里選中北京城市，在右側(cè)欄上點擊新建交互，依次點擊選項改變時_顯示隱藏_區(qū)縣動態(tài)面板，設(shè)置為隱藏。

選中北京城市，在右側(cè)欄點擊新建交互

點擊選項改變時_顯示隱藏_區(qū)縣動態(tài)面板

設(shè)為隱藏

接著點擊啟用情形，打開情形編輯窗，在彈窗上點擊添加條件，保持各個菜單為默認項，再直接點擊確定。

點擊啟用情形

在情形編輯窗上點擊添加條件，再點擊確定

這里的交互是指，我們通過判斷城市菜單的選項，來確定區(qū)縣菜單的顯示狀態(tài)：

• 情形一，當選項為請選擇市時，隱藏區(qū)縣菜單；
• 情形二，當選項為北京時，顯示區(qū)縣菜單。

所以我們接著依照前面的步驟，來添加這第二種情形；首先點擊選項改變時的添加情形，打開情形編輯窗，在彈窗中點擊添加條件，最后的下拉菜單選擇北京。

點擊添加情形，打開情形編輯窗

在情形編輯窗中點擊添加條件，最后的下拉菜單選擇北京

接著在右側(cè)欄中點擊添加動作，依次點擊設(shè)置面板狀態(tài)_區(qū)縣動態(tài)面板，勾選如果隱藏則顯示；再點擊添加動作，依次點擊設(shè)置列表選中項_北京區(qū)縣，再直接點擊確定。

點擊添加動作，再點擊設(shè)置面板狀態(tài)_區(qū)縣動態(tài)面板，勾選如果隱藏則顯示

再點擊添加動作，依次點擊設(shè)置列表選中項_北京區(qū)縣

第三步北京城市菜單的所有交互

04 第四步：設(shè)置河北城市菜單的聯(lián)動交互

首先在左側(cè)欄的概要里選中河北城市，在右側(cè)欄上點擊新建交互，再依次點擊選項改變時_顯示隱藏_區(qū)縣動態(tài)面板，設(shè)置為隱藏。

選中河北城市，點擊右側(cè)欄的新建交互

點擊選項改變時_顯示隱藏_區(qū)縣動態(tài)面板，設(shè)置為隱藏

接著點擊啟用情形，打開情形編輯窗，在彈窗中點擊添加條件，保持各個菜單為默認項，再直接點擊確定。

點擊啟用情形，打開情形編輯窗

在情形編輯窗中點擊添加條件，再點擊確定

與第三步一樣，這里的交互是指，我們通過判斷城市菜單的選項，來確定區(qū)縣菜單的顯示狀態(tài)：

• 情形一，當選項為請選擇市時，隱藏區(qū)縣菜單；
• 情形二，當選項為石家莊時，顯示石家莊區(qū)縣菜單；
• 情形三，當選項為唐山時，顯示唐山區(qū)縣菜單。

所以我們接著依照前面的步驟，來添加第二種情形。首先點擊添加情形，打開情形編輯彈窗，在彈窗中點擊添加條件，最后的下拉菜單選擇石家莊。

點擊添加情形，打開情形編輯窗

在情形編輯窗中點擊添加條件，最后的下拉菜單選擇石家莊

接著在情形2上點擊添加動作，依次點擊設(shè)置面板狀態(tài)_區(qū)縣動態(tài)面板，點擊State菜單，在彈出菜單中選擇State 2（石家莊區(qū)縣），勾選如果隱藏則顯示；再點擊添加動作，依次點擊設(shè)置列表選中項_石家莊區(qū)縣，然后直接點擊確定。

點擊情形2的添加動作

點擊設(shè)置面板狀態(tài)_區(qū)縣動態(tài)面板，State選擇State 2，勾選如果隱藏則顯示

再點擊添加動作，點擊設(shè)置列表選中項_石家莊區(qū)縣

我們接著添加第三種情形，首先點擊添加情形，打開情形編輯窗，在彈窗中點擊添加條件，最后的下拉菜單選擇唐山。

點擊添加情形，打開情形編輯窗再點擊添加條件，在最后的菜單選擇唐山

接著在情形3上點擊添加動作，依次點擊設(shè)置面板狀態(tài)_區(qū)縣動態(tài)面板，點擊State菜單，在彈出菜單中選擇State 3（唐山區(qū)縣），再勾選如果隱藏則顯示；再次點擊添加動作，依次點擊設(shè)置列表選中項_唐山區(qū)縣，然后直接點擊確定。

在情形3上點擊添加動作

點擊設(shè)置面板狀態(tài)_區(qū)縣動態(tài)面板，State選擇State 3，再勾選如果隱藏則顯示

再次點擊添加動作，點擊設(shè)置列表選中項_唐山區(qū)縣

第四步河北城市菜單的所有交互

05 第五步：隱藏城市/區(qū)縣菜單

首先回到正常畫布，選中城市動態(tài)面板和區(qū)縣動態(tài)面板，然后設(shè)置為隱藏。

將城市動態(tài)面板和區(qū)縣動態(tài)面板設(shè)為隱藏

06 結(jié)語

OK了，一個省市區(qū)三級聯(lián)動下拉菜單就繪制完成了。以上就是本次的全部內(nèi)容，你學會了嗎？

作者：默林如斯，公眾號：默林如斯工作室

本文由 @默林如斯工作室 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

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