中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

完成效果圖

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

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

下拉菜單初稿

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

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

首先選中北京城市菜單，點(diǎn)擊右鍵，在彈出菜單中選擇轉(zhuǎn)換為動(dòng)態(tài)面板；然后把左側(cè)欄切換為概要，將動(dòng)態(tài)面板命名為城市（適當(dāng)?shù)拿?，可方便分辨與查找元件）。

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

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

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

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

將河北城市拖入State2

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

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

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

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

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

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

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

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

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

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

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

依次點(diǎn)擊選項(xiàng)改變時(shí)_顯示隱藏_城市動(dòng)態(tài)面板

設(shè)置為隱藏

點(diǎn)擊添加目標(biāo)，選擇區(qū)縣動(dòng)態(tài)面板

默認(rèn)為隱藏，直接點(diǎn)擊完成

接著點(diǎn)擊啟用情形，在情形編輯彈窗上點(diǎn)擊添加條件，保持各個(gè)菜單為默認(rèn)項(xiàng)，再直接點(diǎn)擊確定。

點(diǎn)擊啟用情形，打開情形編輯窗

在情形編輯窗上點(diǎn)擊添加條件，再點(diǎn)擊確定

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

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

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

點(diǎn)擊交互右上角的添加情形，打開情形編輯窗

在彈窗中點(diǎn)擊添加條件，修改條件的最后一個(gè)菜單為北京

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

點(diǎn)擊情形2上的添加動(dòng)作

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

再次點(diǎn)擊添加動(dòng)作，點(diǎn)擊設(shè)置列表選中項(xiàng)_北京城市

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

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

再次點(diǎn)擊添加情形，添加情形3

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

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

在情形3中點(diǎn)擊添加動(dòng)作

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

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

再次點(diǎn)擊添加動(dòng)作，點(diǎn)擊設(shè)置列表選中項(xiàng)_河北城市

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

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

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

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

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

點(diǎn)擊選項(xiàng)改變時(shí)_顯示隱藏_區(qū)縣動(dòng)態(tài)面板

設(shè)為隱藏

接著點(diǎn)擊啟用情形，打開情形編輯窗，在彈窗上點(diǎn)擊添加條件，保持各個(gè)菜單為默認(rèn)項(xiàng)，再直接點(diǎn)擊確定。

點(diǎn)擊啟用情形

在情形編輯窗上點(diǎn)擊添加條件，再點(diǎn)擊確定

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

• 情形一，當(dāng)選項(xiàng)為請(qǐng)選擇市時(shí)，隱藏區(qū)縣菜單；
• 情形二，當(dāng)選項(xiàng)為北京時(shí)，顯示區(qū)縣菜單。

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

點(diǎn)擊添加情形，打開情形編輯窗

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

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

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

再點(diǎn)擊添加動(dòng)作，依次點(diǎn)擊設(shè)置列表選中項(xiàng)_北京區(qū)縣

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

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

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

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

點(diǎn)擊選項(xiàng)改變時(shí)_顯示隱藏_區(qū)縣動(dòng)態(tài)面板，設(shè)置為隱藏

接著點(diǎn)擊啟用情形，打開情形編輯窗，在彈窗中點(diǎn)擊添加條件，保持各個(gè)菜單為默認(rèn)項(xiàng)，再直接點(diǎn)擊確定。

點(diǎn)擊啟用情形，打開情形編輯窗

在情形編輯窗中點(diǎn)擊添加條件，再點(diǎn)擊確定

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

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

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

點(diǎn)擊添加情形，打開情形編輯窗

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

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

點(diǎn)擊情形2的添加動(dòng)作

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

再點(diǎn)擊添加動(dòng)作，點(diǎn)擊設(shè)置列表選中項(xiàng)_石家莊區(qū)縣

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

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

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

在情形3上點(diǎn)擊添加動(dòng)作

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

再次點(diǎn)擊添加動(dòng)作，點(diǎn)擊設(shè)置列表選中項(xiàng)_唐山區(qū)縣

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

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

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

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

06 結(jié)語

OK了，一個(gè)省市區(qū)三級(jí)聯(lián)動(dòng)下拉菜單就繪制完成了。以上就是本次的全部?jī)?nèi)容，你學(xué)會(huì)了嗎？

作者：默林如斯，公眾號(hào)：默林如斯工作室

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

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