Axure如何制作網(wǎng)頁目錄的選中跳轉(zhuǎn)效果

PhoebeFeng
1 評論 8786 瀏覽 8 收藏 4 分鐘
B端产品经理要负责对目标行业和市场进行深入的分析和调研,了解客户的需求、痛点、期望和行为,找到产品的价值主张 🔗

對于原型工具,在工作的過程中會遇到不知道某個效果怎么制作出來的情況,本文介紹了如何制作網(wǎng)頁目錄的選中效果,選中目錄跳轉(zhuǎn)到對應(yīng)頁,該目錄變色,且目錄之間互斥,希望能夠給你帶來幫助。

畫原型是產(chǎn)品經(jīng)理的基本功,但有時候不知道這個效果怎么制作出來,去網(wǎng)上搜也搜不到,靠自己慢慢琢磨出來的笨方法,在這里記錄一下,也方便大家使用。

本次介紹如何制作網(wǎng)頁目錄的選中效果,選中目錄跳轉(zhuǎn)到對應(yīng)頁,該目錄變色,且目錄之間互斥,參考下方動圖:

一共分為以下幾步:

新建母版

建立母版是為了組件的復(fù)用,母版里設(shè)置好,那么引用這個母版的所有頁面都會跟著變。這里我們的目錄設(shè)定為:A、B,點(diǎn)擊目錄分別跳轉(zhuǎn)到不同頁面。

然后在頁面A、B里,增加這個母版。

設(shè)置元件選中的樣式

讓我們回到母版。給當(dāng)前A、B按鈕都分別新增一個“元件選中的樣式”,這個樣式就是我們鼠標(biāo)點(diǎn)擊后按鈕變成的樣子。

設(shè)置單擊動作

那么,什么時候這個按鈕該切換為“被選中”的樣式呢?當(dāng)然是被點(diǎn)擊的時候。所以需要在“交互”中,增加點(diǎn)擊后“設(shè)置選中”值為“真”。

設(shè)置選項組

如何快速的設(shè)置A、B兩個按鈕點(diǎn)擊效果互斥?——設(shè)置選項組,則選A的時候B恢復(fù),選B的時候A恢復(fù)。

這里選項組隨便起個名字就行。

設(shè)置頁面載入后的狀態(tài)

如果想跳轉(zhuǎn)到該頁面后,目錄一直保持選中的狀態(tài),就可以設(shè)置該頁面載入時,“母版-按鈕A”的選中狀態(tài)為“真”,頁面B同理。

以上就是全部方法,快打開Axure試試吧~

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

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

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 感謝分享,才知道用選項組使選中狀態(tài)互斥。

    來自四川 回復(fù)
专题
14303人已学习13篇文章
作为一名运营,需要持续对自己的经验进行总结并不断更新迭代。本专题的文章分享了运营方法论。
专题
12862人已学习11篇文章
在工作中我们会跟客户/boss/用户等人对接需求,并把需求交付给设计师/开发等人,那么应该怎么做呢,本专题的文章分享了如何对接和交付需求。
专题
12850人已学习13篇文章
对数据进行监控,分析异常数据,是数据分析常见的工作内容。本专题的文章分享了如何做好数据异常分析。
专题
31214人已学习16篇文章
在线教育的现状、趋势和未来。
专题
12777人已学习17篇文章
在一些老系统可能会有流程复杂、扩展性不强的问题,此时便需要进行重构。本专题的文章分享了产品重构指南。