起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識用Axure做出手風(fēng)琴式聯(lián)動交互效果
聯(lián)動效果是一種較為常見的交互效果，本文將利用另外一種思路來教大家設(shè)計聯(lián)動交互效果。
聯(lián)動效果很常見，例如填寫地址時，選擇某省份，會自動出現(xiàn)本省份的市縣，選擇某戶主信息，會自動出現(xiàn)該家庭成員全部姓名等，可能省市下拉列表很常見，本文將提供另外一種思路，如下圖：
手風(fēng)琴式二級聯(lián)動應(yīng)用場景：
應(yīng)用場景1：電商后臺用戶管理系統(tǒng)，選定特定標簽的用戶，發(fā)送特別的福利卡券或者站內(nèi)營銷短信；
應(yīng)用場景2：公司內(nèi)部OA系統(tǒng)，公司秘書辦需要通知各部門主管召開部門總結(jié)會議，只給主管發(fā)送郵件通知；
如何制作手風(fēng)琴式二級聯(lián)動交互？
上圖案例中，有兩個交互效果：
效果1：隱藏和展開
默認顯示財務(wù)部人員列表，點擊技術(shù)部時，財務(wù)部列表隱藏，技術(shù)部展開，點擊運營部時，運營部展開，其他兩個部門列表隱藏；
這就是手風(fēng)琴風(fēng)格。
效果2：描紅 出現(xiàn)選中名單
點擊人員姓名，該姓名出現(xiàn)在右側(cè)選擇人員框中（點擊右側(cè)的×號，可以刪除選中的人員），且該人員姓名√描紅，
如何實現(xiàn)效果1和點擊描紅 ？
拉入矩形元件，分別命名為財務(wù)部，技術(shù)部，運營部，輸入對應(yīng)的文本內(nèi)容；
設(shè)置為同一選項組，設(shè)置選中效果，默認“財務(wù)部”為選中狀態(tài)；
分別拉入中繼器命名為“財務(wù)部”“技術(shù)部”“運營部”，在中繼器中，命名元件為“內(nèi)容1”；
拉入一個√，設(shè)置√的選中狀態(tài)為紅色，將√和“內(nèi)容1”合并組合；
鼠標點擊“內(nèi)容1”時，選中該組合。
該中繼器加載時，里面為人員姓名 “朱明”“劉紅”“王剛”：
將財務(wù)部中繼器右鍵設(shè)置為動態(tài)面板，命名為“1”其他部門中繼器也分別設(shè)置為動態(tài)面板“2”，“3”：
設(shè)置動態(tài)面板2,3載入時，隱藏并推動元件：
鼠標單擊財務(wù)部時，選中該元件，并且設(shè)置顯示動態(tài)面板“1”推動元件。
完成，預(yù)覽，點擊技術(shù)部時，財務(wù)部列表隱藏，技術(shù)部展開，點擊運營部時，運營部展開，其他兩個部門列表隱藏；手風(fēng)琴效果完成。
常規(guī)二級聯(lián)動效果做法如下，最簡單
第一步：拉入下拉列表框
拉入第一個下拉列表框；
把該下拉列表命名為“省”；
添加子列表，案例中添加了3個省份；
廣東省，2請選擇（什么都不選時，默認內(nèi)容），3河南省。
拉入第二個下拉列表框，轉(zhuǎn)化為動態(tài)面板，命名為“市”；
添加三個面板，分別命名為“請選擇”“河南省”“廣東省”和上個下拉列表元件省份名字一一對應(yīng)。
第二步：添加用例
“省”下拉列表元件添加用例，當(dāng)選項改變時，設(shè)置“市”動態(tài)面板切換，切換狀態(tài)為值Value；
將Value 的值賦值給“省”元件的被選項，當(dāng)用戶選擇“省”某一選項時，“市”動態(tài)面板自動切換為對應(yīng)的狀態(tài)。
本文由 @胖子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
優(yōu)秀，解決了我的問題