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

PhoebeFeng
1 評論 8813 瀏覽 8 收藏 4 分鐘
🔗 B端产品经理需要更多地关注客户的商业需求、痛点、预算、决策流程等,而C端产品经理需要更多地关注用户的个人需求

對于原型工具,在工作的過程中會遇到不知道某個效果怎么制作出來的情況,本文介紹了如何制作網(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è)置選項(xiàng)組

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

這里選項(xiàng)組隨便起個名字就行。

設(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. 感謝分享,才知道用選項(xiàng)組使選中狀態(tài)互斥。

    來自四川 回復(fù)
专题
33742人已学习17篇文章
作为产品经理,你真的懂什么是敏捷开发吗?
专题
49332人已学习14篇文章
产品经理往往会承担一定的项目管理职能,那么该如何做好项目管理呢?
专题
12464人已学习12篇文章
现如今,越来越多的企业开始重视私域,很多的企业都对私域的发展进行了布局。本专题的文章分享了如何搭建私域模型。
专题
16385人已学习15篇文章
产品经理的许多工作都需要使用数据来进行辅助,如:利用用户使用数据为后续的产品迭代提供依据、如何向上级领导汇报产品成果、如何做精细化的运营活动等。本专题的文章分享了数据埋点方案的撰写。
专题
33775人已学习16篇文章
信息流背后有着怎样的逻辑和策略?
专题
19483人已学习14篇文章
合同管理系统的建设,实现公司对合同的录入登记、审批、履约管理、监控执行、查询、统计等功能。本专题的文章分享了合同管理的设计指南。