聯(lián)動(dòng)效果是一種較為常見的交互效果，本文將利用另外一種思路來教大家設(shè)計(jì)聯(lián)動(dòng)交互效果。

聯(lián)動(dòng)效果很常見，例如填寫地址時(shí)，選擇某省份，會(huì)自動(dòng)出現(xiàn)本省份的市縣，選擇某戶主信息，會(huì)自動(dòng)出現(xiàn)該家庭成員全部姓名等，可能省市下拉列表很常見，本文將提供另外一種思路，如下圖：

手風(fēng)琴式二級(jí)聯(lián)動(dòng)應(yīng)用場(chǎng)景：

應(yīng)用場(chǎng)景1：電商后臺(tái)用戶管理系統(tǒng)，選定特定標(biāo)簽的用戶，發(fā)送特別的福利卡券或者站內(nèi)營(yíng)銷短信；

應(yīng)用場(chǎng)景2：公司內(nèi)部OA系統(tǒng)，公司秘書辦需要通知各部門主管召開部門總結(jié)會(huì)議，只給主管發(fā)送郵件通知；

如何制作手風(fēng)琴式二級(jí)聯(lián)動(dòng)交互？

上圖案例中，有兩個(gè)交互效果：

效果1：隱藏和展開

默認(rèn)顯示財(cái)務(wù)部人員列表，點(diǎn)擊技術(shù)部時(shí)，財(cái)務(wù)部列表隱藏，技術(shù)部展開，點(diǎn)擊運(yùn)營(yíng)部時(shí)，運(yùn)營(yíng)部展開，其他兩個(gè)部門列表隱藏；

這就是手風(fēng)琴風(fēng)格。

效果2：描紅 出現(xiàn)選中名單

點(diǎn)擊人員姓名，該姓名出現(xiàn)在右側(cè)選擇人員框中（點(diǎn)擊右側(cè)的×號(hào)，可以刪除選中的人員），且該人員姓名√描紅，

如何實(shí)現(xiàn)效果1和點(diǎn)擊描紅 ？

拉入矩形元件，分別命名為財(cái)務(wù)部，技術(shù)部，運(yùn)營(yíng)部，輸入對(duì)應(yīng)的文本內(nèi)容；

設(shè)置為同一選項(xiàng)組，設(shè)置選中效果，默認(rèn)“財(cái)務(wù)部”為選中狀態(tài)；

分別拉入中繼器命名為“財(cái)務(wù)部”“技術(shù)部”“運(yùn)營(yíng)部”，在中繼器中，命名元件為“內(nèi)容1”；

拉入一個(gè)√，設(shè)置√的選中狀態(tài)為紅色，將√和“內(nèi)容1”合并組合；

鼠標(biāo)點(diǎn)擊“內(nèi)容1”時(shí)，選中該組合。

該中繼器加載時(shí)，里面為人員姓名 “朱明”“劉紅”“王剛”：

將財(cái)務(wù)部中繼器右鍵設(shè)置為動(dòng)態(tài)面板，命名為“1”其他部門中繼器也分別設(shè)置為動(dòng)態(tài)面板“2”，“3”：

設(shè)置動(dòng)態(tài)面板2,3載入時(shí)，隱藏并推動(dòng)元件：

鼠標(biāo)單擊財(cái)務(wù)部時(shí)，選中該元件，并且設(shè)置顯示動(dòng)態(tài)面板“1”推動(dòng)元件。

完成，預(yù)覽，點(diǎn)擊技術(shù)部時(shí)，財(cái)務(wù)部列表隱藏，技術(shù)部展開，點(diǎn)擊運(yùn)營(yíng)部時(shí)，運(yùn)營(yíng)部展開，其他兩個(gè)部門列表隱藏；手風(fēng)琴效果完成。

常規(guī)二級(jí)聯(lián)動(dòng)效果做法如下，最簡(jiǎn)單

第一步：拉入下拉列表框

拉入第一個(gè)下拉列表框；

把該下拉列表命名為“省”；

添加子列表，案例中添加了3個(gè)省份；

廣東省，2請(qǐng)選擇（什么都不選時(shí)，默認(rèn)內(nèi)容），3河南省。

拉入第二個(gè)下拉列表框，轉(zhuǎn)化為動(dòng)態(tài)面板，命名為“市”；

添加三個(gè)面板，分別命名為“請(qǐng)選擇”“河南省”“廣東省”和上個(gè)下拉列表元件省份名字一一對(duì)應(yīng)。

第二步：添加用例

“省”下拉列表元件添加用例，當(dāng)選項(xiàng)改變時(shí)，設(shè)置“市”動(dòng)態(tài)面板切換，切換狀態(tài)為值Value；

將Value 的值賦值給“省”元件的被選項(xiàng)，當(dāng)用戶選擇“省”某一選項(xiàng)時(shí)，“市”動(dòng)態(tài)面板自動(dòng)切換為對(duì)應(yīng)的狀態(tài)。

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