Axure如何制作網(wǎng)頁(yè)目錄的選中跳轉(zhuǎn)效果
對(duì)于原型工具,在工作的過(guò)程中會(huì)遇到不知道某個(gè)效果怎么制作出來(lái)的情況,本文介紹了如何制作網(wǎng)頁(yè)目錄的選中效果,選中目錄跳轉(zhuǎn)到對(duì)應(yīng)頁(yè),該目錄變色,且目錄之間互斥,希望能夠給你帶來(lái)幫助。
畫原型是產(chǎn)品經(jīng)理的基本功,但有時(shí)候不知道這個(gè)效果怎么制作出來(lái),去網(wǎng)上搜也搜不到,靠自己慢慢琢磨出來(lái)的笨方法,在這里記錄一下,也方便大家使用。
本次介紹如何制作網(wǎng)頁(yè)目錄的選中效果,選中目錄跳轉(zhuǎn)到對(duì)應(yīng)頁(yè),該目錄變色,且目錄之間互斥,參考下方動(dòng)圖:
一共分為以下幾步:
新建母版
建立母版是為了組件的復(fù)用,母版里設(shè)置好,那么引用這個(gè)母版的所有頁(yè)面都會(huì)跟著變。這里我們的目錄設(shè)定為:A、B,點(diǎn)擊目錄分別跳轉(zhuǎn)到不同頁(yè)面。
然后在頁(yè)面A、B里,增加這個(gè)母版。
設(shè)置元件選中的樣式
讓我們回到母版。給當(dāng)前A、B按鈕都分別新增一個(gè)“元件選中的樣式”,這個(gè)樣式就是我們鼠標(biāo)點(diǎn)擊后按鈕變成的樣子。
設(shè)置單擊動(dòng)作
那么,什么時(shí)候這個(gè)按鈕該切換為“被選中”的樣式呢?當(dāng)然是被點(diǎn)擊的時(shí)候。所以需要在“交互”中,增加點(diǎn)擊后“設(shè)置選中”值為“真”。
設(shè)置選項(xiàng)組
如何快速的設(shè)置A、B兩個(gè)按鈕點(diǎn)擊效果互斥?——設(shè)置選項(xiàng)組,則選A的時(shí)候B恢復(fù),選B的時(shí)候A恢復(fù)。
這里選項(xiàng)組隨便起個(gè)名字就行。
設(shè)置頁(yè)面載入后的狀態(tài)
如果想跳轉(zhuǎn)到該頁(yè)面后,目錄一直保持選中的狀態(tài),就可以設(shè)置該頁(yè)面載入時(shí),“母版-按鈕A”的選中狀態(tài)為“真”,頁(yè)面B同理。
以上就是全部方法,快打開(kāi)Axure試試吧~
本文由 @PhoebeFeng 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash,基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
感謝分享,才知道用選項(xiàng)組使選中狀態(tài)互斥。