當(dāng)我們使用APP的時(shí)候總會(huì)遇到篩選標(biāo)簽的情況，那么篩選標(biāo)簽的效果是怎么實(shí)現(xiàn)的呢？

前期準(zhǔn)備

• 軟件：Axure 9.0
• 硬件：Windows/Mac電腦
• 篩選標(biāo)簽效果圖：

教程

（1）找到一個(gè)手機(jī)殼素材庫(kù)，繪制界面如下圖：

（2）在已選中標(biāo)簽中添加一個(gè)中繼器并命名，中繼器內(nèi)添加一個(gè)矩形，長(zhǎng)度根據(jù)展示的界面自由調(diào)整，這里不做限制，設(shè)置中繼器交互，使中繼器展示選中的可選標(biāo)簽的文字：

（3）設(shè)置可選標(biāo)簽矩形選中樣式，設(shè)置選中后顏色及字色變化。

（4）設(shè)置可選標(biāo)簽矩形點(diǎn)擊交互，實(shí)現(xiàn)鼠標(biāo)單擊可選標(biāo)簽時(shí)，切換標(biāo)簽的選中狀態(tài)：

（5）設(shè)置可選標(biāo)簽選中時(shí)交互，實(shí)現(xiàn)標(biāo)簽選中時(shí)，中繼器中增加行：

（6）設(shè)置可選標(biāo)簽矩形未選中時(shí)交互，標(biāo)簽取消選中時(shí)，刪除行：

（7）復(fù)制可選標(biāo)簽交互，將可選標(biāo)簽的矩形交互復(fù)制粘貼到其他矩形控件上：

結(jié)語(yǔ)

今天主要運(yùn)用到了中繼器這個(gè)元件實(shí)現(xiàn)篩選標(biāo)簽的效果，值得注意的就是這個(gè)函數(shù)的使用。

大家可以關(guān)注一下，是不是很簡(jiǎn)單呢？快動(dòng)手試一下吧～

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

題圖來(lái)自Unsplash，基于CC0協(xié)議