導(dǎo)讀：下拉列表是網(wǎng)頁中一種最節(jié)省頁面空間的選擇方式，我們可以使用下拉列表快速選擇選項(xiàng)；如果選項(xiàng)太多時(shí)，我們還會(huì)用到下拉樹，對選項(xiàng)進(jìn)行分類，例如廣東-廣州-xxx營業(yè)廳，分類后可以讓客戶更容易找到對應(yīng)的選項(xiàng)。所以本期教程主要介紹如何在Axure里做一個(gè)高保真的下拉樹模板。

一、制作完成后應(yīng)具備以下效果

1. 彈窗效果：點(diǎn)擊下拉框后彈出樹彈窗，點(diǎn)擊其他內(nèi)容時(shí)自動(dòng)收起
2. 展開收起：點(diǎn)擊樹節(jié)點(diǎn)可以切換展開或者收起對應(yīng)子節(jié)點(diǎn)
3. 選擇回顯：選擇內(nèi)容后，將選擇內(nèi)容回顯至下拉框
4. 滾動(dòng)效果：內(nèi)容較多時(shí)，自動(dòng)顯示滾動(dòng)條，可以滾動(dòng)查看內(nèi)容

二、制作材料準(zhǔn)備

1、下拉框組合

下拉框組合由矩形和上下箭頭組成：

矩形——填充顏色為白色，邊線顏色為灰色，里面填寫默認(rèn)顯示文字，例如請選擇xxx；

下箭頭——矩形邊線顏色一致；

上箭頭默認(rèn)隱藏，如下圖所示擺放即可。

2、彈窗組合

彈窗組合由樹和矩形制作：

樹——本案例使用的是Axure自帶的樹元件，用自帶的樹元件優(yōu)點(diǎn)是展開和收起不需要自己寫邏輯，能夠直接使用，不過缺點(diǎn)也很明顯，第一，樹節(jié)點(diǎn)要一個(gè)個(gè)增加，操作麻煩浪費(fèi)時(shí)間；第二，不能做搜索效果或者多選效果，那如果想顯示該效果的話就要用中繼器來制作樹，今天我們就從簡單基礎(chǔ)的普通樹元件入手，后續(xù)如果大家對搜索和多選效果感興趣的話，我也會(huì)繼續(xù)更新教程。

在樹節(jié)點(diǎn)中我們可以修改他的交互樣式，鼠標(biāo)懸停時(shí)設(shè)置填充顏色為淺藍(lán)色，元件選中時(shí)填充顏色為深藍(lán)色。

動(dòng)態(tài)面板——?jiǎng)討B(tài)面板的作用是可以增加滾動(dòng)條，我們直接將樹轉(zhuǎn)為動(dòng)態(tài)面板，取消動(dòng)態(tài)面板自適應(yīng)內(nèi)容，調(diào)整到固定大小，然后設(shè)置顯示垂直滾動(dòng)條。

矩形——就是下拉框的一個(gè)背景，填充顏色為白色，邊線為深藍(lán)色。其實(shí)樣式你們都可以根據(jù)實(shí)際需求設(shè)置。

最后，將上面組合在一起，彈出組合默認(rèn)隱藏

三、交互設(shè)置

1、下拉框組合交互

鼠標(biāo)單擊下拉框組合時(shí)，顯示彈窗組合，這里我們要選擇置于頂層和燈箱效果

置于頂層就是將顯示的彈窗組合放到最上一層，這樣就不會(huì)被其他元件遮擋

燈箱效果就是如果鼠標(biāo)點(diǎn)擊除了彈窗組合外的內(nèi)容時(shí)，自動(dòng)收起彈窗組合。

2、彈出組合交互

彈出組合顯示時(shí)，我們要同時(shí)顯示上箭頭和隱藏下箭頭

彈出組合隱藏時(shí)，我們做相反的操作顯示下箭頭和隱藏上箭頭

有的同學(xué)可能會(huì)疑問，為什么顯示隱藏的交互不放在上面點(diǎn)擊下拉框的時(shí)候做呢？前半部分是ok的，可以點(diǎn)擊下拉框的時(shí)候顯示上箭頭，隱藏下箭頭，但是隱藏時(shí)呢？有些同學(xué)可能會(huì)說點(diǎn)擊了選項(xiàng)隱藏上箭頭顯示下箭頭就可以的，的確也是可以，但是也忽視了一點(diǎn)，就是點(diǎn)擊其他地方收起彈窗的情況，因?yàn)槲覀冏隽藷粝湫Ч渣c(diǎn)擊其他地方也可以收起彈窗，這樣就沒了觸發(fā)箭頭顯示隱藏的事件了，所以我們在彈窗組合隱藏時(shí)寫這個(gè)交互就可以一鳥百鳥了。

3、樹節(jié)點(diǎn)鼠標(biāo)單擊時(shí)

樹節(jié)點(diǎn)單擊時(shí)，我們要做兩個(gè)交互

設(shè)置文本：設(shè)置下拉框默認(rèn)的文字為當(dāng)前單擊節(jié)點(diǎn)的文字，為了方便我們直接用this.text就可以了，這個(gè)操作就是回顯文字，可以知道是否已選擇和選擇了哪一個(gè)選項(xiàng)。

隱藏：隱藏彈窗組合，因?yàn)檫@個(gè)是單選的樹，所以選擇選項(xiàng)后，一般邏輯都是自動(dòng)隱藏彈窗的。

然后我們需要把這個(gè)鼠標(biāo)單擊時(shí)的交互，復(fù)制粘貼到每一個(gè)可以選擇的樹節(jié)點(diǎn)里。

這樣我們就完成了整個(gè)元件了，將它組合在一起，以后就可以直接復(fù)制或者從元件庫用拖出來使用

以上就是高保真原型——下拉樹的制作方法了，感興趣的同學(xué)們可以動(dòng)手試試，謝謝您的閱讀。

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

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