Axure教程：篩選標簽展示效果

0 評論 7696 瀏覽 30 收藏 4 分鐘

當我們使用APP的時候總會遇到篩選標簽的情況，那么篩選標簽的效果是怎么實現(xiàn)的呢？

前期準備

  • 軟件：Axure 9.0
  • 硬件：Windows/Mac電腦
  • 篩選標簽效果圖：

教程

（1）找到一個手機殼素材庫，繪制界面如下圖：

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

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

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

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

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

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

結(jié)語

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

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

 

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

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

更多精彩內(nèi)容，請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
藍汐
8篇作品 61690總閱讀量
09-281879 瀏覽
小綠書“拍了拍”小紅書
04-121987 瀏覽
游戲化實戰(zhàn)（五）：金融-讓錢生錢更容易
08-023949 瀏覽
希望這四點，能幫你打破產(chǎn)品的認知?。?></a> </div> <div id=
09-192533 瀏覽
存量內(nèi)卷，低成本盤活老用戶做轉(zhuǎn)化，難嗎？
01-033230 瀏覽
我干直播帶貨這一年：粉絲是主播的最大“底氣”
評論
評論請登錄
  1. 目前還沒評論，等你發(fā)揮！