前不久，我們分享了Axure自制版本的“下拉框”控件，雖然在交互效果上遠(yuǎn)勝默認(rèn)版本，但設(shè)置“選項”仍需手動添加和布局排版，略顯繁瑣。為此，引入了“中繼器”功能，讓“下拉框”控件更加完善。 Axure版

前不久，我們分享了Axure自制版本的“下拉框”控件，雖然在交互效果上遠(yuǎn)勝默認(rèn)版本，但設(shè)置“選項”仍需手動添加和布局排版，略顯繁瑣。為此，引入了“中繼器”功能，讓“下拉框”控件更加完善。

Axure版本升級：打造“下拉框”控件

首先，與早期自制版本相似，布局包括“文本框：option”和頂層“熱區(qū)：zone”。接著新建“中繼器”和“矩形”，將“中繼器”命名為“option”，“矩形”命名為“block”，并可為其添加陰影效果（尺寸根據(jù)“中繼器”調(diào)整）。

在“中繼器：option”中新建一個“文本標(biāo)簽”并命名為“text”，設(shè)置尺寸為200*40。在“content”列輸入“選項一”和“選項二”，并為“每項加載時”的交互動作設(shè)置文本值和矩形尺寸隨內(nèi)容自適應(yīng)。

控件組合及交互設(shè)計

將“矩形：block”和“中繼器：option”按圖方式組合成“option_all”，并隱藏。在“鼠標(biāo)單擊時”交互動作中，顯示“option_all”并移動到指定位置。設(shè)置局部變量使控件位置動態(tài)調(diào)整，優(yōu)化用戶體驗。

最后，在“文本標(biāo)簽：text”“鼠標(biāo)點擊時”的交互動作中，設(shè)定文本框值、隱藏“option_all”并平滑移動至初始位置。這樣，只需更新“中繼器：option”內(nèi)容即可輕松添加新選項，操作簡便高效。

結(jié)語

通過“中繼器”功能的巧妙運(yùn)用，Axure設(shè)計中的“下拉框”控件得以精致升級，操作更加便捷，交互效果更為出色。若您喜歡本文介紹的設(shè)計方法，請不吝點贊支持哦！