在B端、電商類的產(chǎn)品原型中，多級(jí)下拉選擇器是一種常見的交互，應(yīng)用于類別、地址等類型的選擇。這篇文章，作者分享了如何在原型中設(shè)計(jì)的方法，供大家參考。

Axure選擇器是一種在交互設(shè)計(jì)中常用的組件，這期內(nèi)容，我們來探討Axure中多級(jí)下拉選擇器設(shè)計(jì)與交互技巧。

下拉列表選擇輸入框元件

創(chuàng)建選擇輸入框所需的元件

1.在元件庫中拖出一個(gè)矩形元件。

2.選中矩形元件，在樣式窗格中將按鈕元件的寬設(shè)置為200，高設(shè)置為32，文本左側(cè)對(duì)齊，線段填充顏色灰色（#D9D9D9）線寬為1,圓角半徑5，邊距左右側(cè)10。

3.在iconfont搜索向下和向上icon，復(fù)制SVG代碼，粘貼到畫布上。

4.拖入一個(gè)動(dòng)態(tài)面板，在樣式窗格中將動(dòng)態(tài)面板的寬高設(shè)置為32，并將向下icon剪切粘貼到動(dòng)態(tài)面板內(nèi)State1中，將向上剪切粘貼到動(dòng)態(tài)面板內(nèi)State2中。

5.選中動(dòng)態(tài)面板基于矩形框右對(duì)齊，選中矩形和動(dòng)態(tài)面板右鍵組合。

創(chuàng)建下拉選擇列表所需的元件

1.在元件庫中拖入一個(gè)矩形，將寬設(shè)為120，高設(shè)置為160，線段設(shè)為0，陰影設(shè)為灰色 （#7F7F7F） 透明度35%，模糊設(shè)為7。

2.在元件庫中拖入一個(gè)中繼器元件。

3.雙擊中繼器元件，選中中繼器內(nèi)部矩形元件，在樣式窗格將矩形寬設(shè)為120，高設(shè)為32，線寬設(shè)為0，邊距左側(cè)10。

4.在iconfont搜索向右icon，復(fù)制SVG代碼 粘貼到畫布上，基于中繼器矩形向右對(duì)齊 右鍵轉(zhuǎn)為動(dòng)態(tài)面板，雙擊動(dòng)態(tài)面板 選中向右icon 右鍵變換圖片 轉(zhuǎn)換SVG圖片為圖形 居中對(duì)齊，復(fù)制State1狀態(tài)到State2，選中State2向右icon 將填充顏色設(shè)為藍(lán)色 （#0052D9）。

選中中繼間矩形，在樣式窗格將數(shù)據(jù)窗格Column0 修改為type1，并在type1列輸入文本。

5.選中中繼器和矩形 右鍵 組合 。

選中中繼器元件，在交互窗格中，將隔離列表之間的選項(xiàng)組取消勾選。

選中中繼器矩形，在樣式窗格中將文本內(nèi)容設(shè)為左對(duì)齊。

6.復(fù)制兩個(gè)組合列表元件。

選中第二個(gè)中繼間矩形，在樣式窗格將數(shù)據(jù)窗格type1修改為type2，并在type1、2列輸入文本，type1、type2文本必須有關(guān)聯(lián)性，不然篩選時(shí)可能會(huì)出錯(cuò)。

7.第三個(gè)中繼器同步以上操作，將icon動(dòng)態(tài)面板刪除，替換為勾選icon 。

8.選中中繼器組合元件，在樣式窗格元件名稱分別命名 一級(jí)分類、二級(jí)分類、三級(jí)分類。

創(chuàng)建交互

創(chuàng)建“選擇輸入框”的交互狀態(tài)

1.選中選中輸入框元件，在交互窗格點(diǎn)擊新建交互，添加單擊時(shí)顯示/隱藏 顯示 一級(jí)分類，設(shè)置選中 當(dāng)前 為“真” ，設(shè)置icon動(dòng)態(tài)面板 到 State2 。

創(chuàng)建icon動(dòng)態(tài)面板 的交互狀態(tài)

1.選中icon動(dòng)態(tài)面板，在交互窗格中創(chuàng)建單擊時(shí)交互，啟用情形判斷。

情形1: 元件可見 一級(jí)分類 等于 假

設(shè)置顯示/隱藏 顯示 一級(jí)分類， 設(shè)置選中 矩形 （選擇輸入框）為 “真”，設(shè)置面板狀態(tài) 當(dāng)前 到 State2。

情形2：元件可見 一級(jí)分類 等于 “真”，設(shè)置顯示/隱藏 隱藏 一級(jí)分類， 設(shè)置選中 矩形 （選擇輸入框）為 “假”，設(shè)置面板狀態(tài) 當(dāng)前 到 State1。

創(chuàng)建“下拉選擇列表”的交互狀態(tài)

1.選中一級(jí)分類元件，雙擊中繼器，到中繼器內(nèi)部矩形，在交互窗格 創(chuàng)建 單擊時(shí)交互，顯示/隱藏 顯示 二級(jí)分類 設(shè)置選中 當(dāng)前 為 真。

添加篩選 二級(jí)分類 中繼器 規(guī)則 插入變量函數(shù) [[TargetItem.type1 ==Item.type1]]

再看一遍完整規(guī)則

添加動(dòng)作 顯示/隱藏 隱藏 三級(jí)分類

2. 添加全局變量，單擊項(xiàng)目選項(xiàng)，全局變量，新增 type1、type2、type3 變量。

3.設(shè)置變量值 type1 值 插入變量或函數(shù) [[Item.type1]]

好的，來看一下完整交互 。

4.設(shè)置文本 矩形 （（選擇輸入框）） 文本 插入變量或函數(shù) [[type1]]

看一下完整交互。

5.新建交互 選中 設(shè)置icon動(dòng)態(tài)面板 到 State 2，新建交互 取消選中時(shí) 設(shè)置icon動(dòng)態(tài)面板 到State 1。

6.設(shè)置形狀屬性 點(diǎn)擊顯示全部 交互樣式 鼠標(biāo)懸停的樣式 填充顏色 灰色 （#F2F2F2），元件選中的樣式 字色 藍(lán)色（#0052D9），選項(xiàng)組 1

同步設(shè)置 二級(jí)分類

7.選中三級(jí)分類元件，雙擊中繼器，到中繼器內(nèi)部矩形，在交互窗格 創(chuàng)建單擊時(shí)交互，設(shè)置選中 當(dāng)前 為 “真”，設(shè)置變量值 type3 為 [[Item.type3]]，設(shè)置文本 矩形 （篩選輸入框） 為 [[type1 + ‘-‘ + type2 + ‘-‘ + type3]]。

新建交互，選中 顯示 / 隱藏 顯示 形狀 （勾選），新建交互，選中 顯示 / 隱藏 隱藏 形狀 （勾選）

選中 勾選 icon 設(shè)為隱藏

8.設(shè)置形狀屬性 點(diǎn)擊顯示全部 交互樣式 鼠標(biāo)懸停的樣式 填充顏色 灰色 （#F2F2F2），元件選中的樣式 字色 藍(lán)色（#0052D9），選項(xiàng)組 3

9.在元件庫中拖入一個(gè)內(nèi)聯(lián)框架，選中內(nèi)聯(lián)框架，在樣式窗格中勾選隱藏邊框，右鍵轉(zhuǎn)為動(dòng)態(tài)面板，選中動(dòng)態(tài)面板，將框設(shè)為 148 高設(shè)為160 ，右鍵 滾動(dòng)條 設(shè)為垂直滾動(dòng)，剪切三級(jí)分類元件 粘貼到動(dòng)態(tài)面板內(nèi)。

在元件庫中拖入一個(gè)動(dòng)態(tài)面板，遮住三級(jí)分類下拉選項(xiàng)滾動(dòng)條，復(fù)制背景，粘貼到動(dòng)態(tài)面板內(nèi)。

剪切三級(jí)分類下拉選項(xiàng)元件，粘貼到動(dòng)態(tài)面板內(nèi)。

10.因?yàn)榀B加了動(dòng)態(tài)面板，所以，一級(jí)分類中繼器內(nèi)矩形元件的顯示/隱藏 隱藏 中繼器的交互需要重新設(shè)置，二級(jí)分類中繼器內(nèi)矩形元件單擊時(shí) 顯示/隱藏 顯示中繼器的交互也需要重新配置。

選中三級(jí)分類下拉元件，設(shè)置為隱藏。

再用同樣的方式，設(shè)置二級(jí)分類，調(diào)整一級(jí)分類單擊時(shí)，顯示/隱藏 交互。

選中一級(jí)分類元件，右鍵 轉(zhuǎn)為動(dòng)態(tài)面板，將二級(jí)分類，三級(jí)分類粘貼到一級(jí)分類動(dòng)態(tài)面板內(nèi)。

、

選中整個(gè)動(dòng)態(tài)面板，設(shè)為隱藏，并修改 矩形（下拉輸入框）單擊時(shí) 顯示/隱藏 一級(jí)分類改為整個(gè)動(dòng)態(tài)面板和向下icon動(dòng)態(tài)面板，情形條件中元件可見于 一級(jí)分類、顯示/隱藏 一級(jí)分類。

預(yù)覽交互

點(diǎn)擊預(yù)覽，在預(yù)覽頁面鼠標(biāo)下拉列表選擇輸入框可以選擇對(duì)應(yīng)的選項(xiàng)。

預(yù)覽地址：https://yfeynz.axshare.com

OK，這期內(nèi)容到這里就結(jié)束了。