起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識Axure教程——中繼器聯(lián)動（二級下拉列表案例）
編輯導(dǎo)語：在畫高保真原型的過程中，常常出現(xiàn)需要兩個或者以上中繼器聯(lián)動的情況，此時需要用中繼器聯(lián)動來制作這種效果。本文作者分享了用中繼器制作下拉列表以及兩個下拉列表之間的聯(lián)動交互方法，感興趣的一起來學(xué)習(xí)一下吧，希望對你有幫助。
我們在畫高保真原型的時候，經(jīng)常會遇到需要兩個或者以上中繼器聯(lián)動的情況，例如，我們可以選著一二級行政區(qū)，二級行政區(qū)又要根據(jù)一級的選擇而發(fā)生改變，這時我們就需要用到中繼器聯(lián)動來制作這種效果。
所以今天就和大家分享中繼器聯(lián)動教程，我們以二級下拉列表為案例，教大家如何用中繼器制作下拉列表，以及兩個下拉列表之間的聯(lián)動交互。
制作完成之應(yīng)具備以下交互效果：
- 下拉列表由中繼器制作，在中繼器表格中填寫選項，自動生成交互效果；
- 選擇對應(yīng)的一級行政區(qū)后，顯示二級行政區(qū)的下拉列表，并且只顯示該一級行政區(qū)下的城市。
原型地址：https://cyu84n.axshare.com/#g=1
一、基本材料的準(zhǔn)備
矩形、上下箭頭、中繼器。
矩形+上下箭頭組和默認(rèn)顯示的部分，這里上箭頭也是默認(rèn)隱藏的。
中繼器+矩形（背景框）組合彈出選項，默認(rèn)隱藏。
如果鼠標(biāo)單擊矩形+上下箭頭組合是，我們用顯示的交互將中繼器+矩形（背景框）的彈出組合顯示出來，這里記得選擇燈箱效果，這樣點擊空白地方才能自動收起列表。
同時，當(dāng)中繼器+矩形（背景框）的彈出組合顯示時，我們用顯示隱藏的交互，將上箭頭顯示，下箭頭隱藏；當(dāng)中繼器+矩形（背景框）的彈出組合隱藏時，我們放過來將上箭頭隱藏，下箭頭顯示。
二、用中繼器制作一級選項列表
我們新增一個中繼器，中繼器里面的矩形我們根據(jù)自身ui需要，修改樣式和尺寸。
矩形的選中樣式，選中的樣式就是鼠標(biāo)移入時變色（淺藍(lán)色的樣式），這里為什么不用鼠標(biāo)懸停時呢，因為中繼器里面用懸停時，然后點擊變色之后，在點擊其他選項，原來的選項還會有懸停的變色，這應(yīng)該是bug，所以我們就用選中的樣式來制作懸停效果。
鼠標(biāo)移入時，我們用選中的交互，設(shè)置當(dāng)前矩形選中狀態(tài)為真；鼠標(biāo)移出是，我們用取消選中的交互，設(shè)置當(dāng)前矩形選中狀態(tài)為假。
矩形的禁用樣式，禁用樣式為深藍(lán)色，就是鼠標(biāo)點擊選擇選項后該選項高亮的效果。
我們需要在中繼器表格里增加兩列,第一列原本就有的，我們將名字改為text，代表選項的文本，第二列是true，代表是否被選擇，默認(rèn)為空，就是沒有被選擇。
在中繼器每項加載時，因為是中繼器自帶的矩形，所以有一個默認(rèn)的交互，就是將text列的值設(shè)置到矩形里，這個交互我們不需要修改。
我們要新增一種情況,如果true列里面該行的值等于1，這代表了這個選項被選中了，我們用禁用的交互，把矩形禁用，再用設(shè)置文本的交互，讓默認(rèn)文字設(shè)置為當(dāng)前的選項值。
鼠標(biāo)單擊中繼器內(nèi)矩形選項時，我們就更新true列的值就可以控制是否選中了。
首先我們要更新中繼器內(nèi)所有的行，將他們true列的值更新為0，因為不知道前面有沒有被選中的選項，這樣相當(dāng)于先重置。
然后我們再用更新行的交互，將當(dāng)前行的true列的值更新為1，這樣就自動選擇變色了。
然后還可以根據(jù)效果設(shè)置，有些下拉列表是選擇了選項就隱藏器列表，我們就用隱藏的交互將他隱藏就可以了，有些選擇了不默認(rèn)隱藏的，就不需要操作，具體效果可以根據(jù)你們需要設(shè)置。
三、制作二級下拉列表
我們把上面的兩部分內(nèi)容直接復(fù)制出來一份，就變成二級下拉列表組合了，唯一不同的是，我們要在中繼器里增加一列，上一級對應(yīng)該二級選項對應(yīng)的一級選項的內(nèi)容是什么。
四、一二級下拉列表聯(lián)動交互
二級下拉列表默認(rèn)隱藏，在一級選項選擇后，就是鼠標(biāo)單擊了一級選項之后顯示出來，這里我們用顯示的交互，將二級下拉列表顯示出來。
顯示后，我們不能列出所有的選項，所以我們要用篩選的交互，將屬于選中的一級選項下的二級選項篩選出來，因為上一級這一列對應(yīng)的是一級的選項，所以篩選條件就是一級下拉列表的選項值等于二級下來列表里上一級的值
那么以上就是Axure高保真原型——中繼器聯(lián)動（二級下拉列表案例）的制作教程了。
感謝您的閱讀，我們下期見，88~
本文由 @Axure高保真原型 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 Unsplash，基于 CC0 協(xié)議。
- 目前還沒評論，等你發(fā)揮！
