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

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

Axure版本升級(jí)：打造“下拉框”控件

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

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

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

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

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

結(jié)語

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