如何用Axure做出導(dǎo)航欄吸附同時(shí)可在不同的Tab模塊之間切換的效果呢？本篇文章將為我們演示這一進(jìn)階玩法。

前段時(shí)間寫了一篇如何制作導(dǎo)航欄吸附效果的文章，意猶未盡，正好自己也在做運(yùn)動(dòng)類型知識付費(fèi)課程的產(chǎn)品，其中一些部分也用到這個(gè)效果，借著這個(gè)思路再分享一篇進(jìn)階的玩法，導(dǎo)航欄吸附同時(shí)可在不同的Tab模塊之間切換。

效果如下：

與上篇文章中一樣（傳送門），頂部的導(dǎo)航欄顯示與隱藏用相同的方式實(shí)現(xiàn)，通過頁面滾動(dòng)到相應(yīng)位置時(shí)的條件判斷顯示和隱藏導(dǎo)航欄。

既然顯示了導(dǎo)航欄，就要發(fā)揮導(dǎo)航欄的作用，通過導(dǎo)航欄做進(jìn)一步的操作，一般都是切換不同的模塊，在有些產(chǎn)品中也可以是篩選欄，具體就看產(chǎn)品類型，接下來就講解下懸浮后的導(dǎo)航欄如何與其它部分進(jìn)行聯(lián)動(dòng)。

以效果動(dòng)畫中的案例為例，思路如下：

根據(jù)產(chǎn)品需求，導(dǎo)航欄對應(yīng)控制三個(gè)部分的內(nèi)容，分別是：課程介紹、課程列表、用戶評價(jià)：

• 當(dāng)頁面滾動(dòng)到設(shè)定條件判斷的位置是，顯示/隱藏導(dǎo)航欄；
• 顯示導(dǎo)航欄后，點(diǎn)擊不同的分類，切換到不同內(nèi)容模塊；
• 頂部的導(dǎo)航欄隱藏后，在頁面中還可以繼續(xù)通過分類Tab控制內(nèi)容模塊。

01

• 根據(jù)思路，我們先準(zhǔn)備各部分對應(yīng)的內(nèi)容，由于元件太多，我就不一一列出了，首先在元件庫區(qū)域中拖入一個(gè)【動(dòng)態(tài)面板】命名為“內(nèi)容框架”；
• 在屬性中找到「滾動(dòng)條」選項(xiàng)，選擇為“自動(dòng)顯示滾動(dòng)條”；
• 雙擊該動(dòng)態(tài)面板，進(jìn)入“State1”狀態(tài)。

如上圖所示，為動(dòng)態(tài)面板添加以上元件，主要分為三部分：固定內(nèi)容區(qū)、Tab、內(nèi)容模塊。

02

• 雙擊動(dòng)態(tài)面板“Tab”，新建三個(gè)狀態(tài)，分別命名為：課程介紹、課程列表、用戶評價(jià)；
• 為三個(gè)狀態(tài)中增加如上圖所示元件，并設(shè)置好樣式，用以區(qū)分不同的狀態(tài)。

• 雙擊動(dòng)態(tài)面板“內(nèi)容模塊”，創(chuàng)建三個(gè)狀態(tài)并分別命名為：課程介紹、課程列表、用戶評價(jià)
• 如上圖所示增加所需要的元件；
• 動(dòng)態(tài)面板“內(nèi)容模塊”屬性中的「滾動(dòng)條」選項(xiàng)選擇為“自動(dòng)顯示滾動(dòng)條”。

03

復(fù)制一個(gè)動(dòng)態(tài)面板“Tab”到主頁面，并修改命名為“懸浮Tab”，同時(shí)置于動(dòng)態(tài)面板“內(nèi)容框架”的上層。

• 雙擊“懸浮Tab”，先進(jìn)入第一個(gè)狀態(tài)‘課程介紹’，進(jìn)入后為「課程列表」設(shè)置鼠標(biāo)單擊時(shí)的交互用例，設(shè)置動(dòng)態(tài)面板”懸浮Tab“和”Tab“的狀態(tài)為‘課程列表’，同時(shí)設(shè)置動(dòng)態(tài)面板”內(nèi)容模版“的面板狀態(tài)也為‘課程列表’；
• 同樣的為元件【用戶評價(jià)】也設(shè)置對應(yīng)單擊時(shí)的用例動(dòng)作；
• 隨后為“懸浮Tab”動(dòng)態(tài)面板中的第二個(gè)狀態(tài)‘課程列表’中的三個(gè)分類元件設(shè)置同樣的單擊時(shí)用例；
• 最后為“懸浮Tab”動(dòng)態(tài)面板中的第三個(gè)狀態(tài)‘用戶評價(jià)’中的分類元件設(shè)置單擊時(shí)用例，規(guī)則與前兩個(gè)一樣。

04

雙擊動(dòng)態(tài)面板“內(nèi)容框架”，隨后再雙擊動(dòng)態(tài)面板“Tab”，分別為三個(gè)狀態(tài)中的分類元件設(shè)置跟動(dòng)態(tài)面板“懸浮Tab”完全一樣的交互用例，即可完成所有的設(shè)置。

具體的動(dòng)作設(shè)置在第03部分中已展示，關(guān)于懸浮導(dǎo)航欄的設(shè)置方法已經(jīng)在上篇文章中說明，可以參考后進(jìn)行實(shí)踐，如有問題歡迎在評論區(qū)或者后臺留言。

End

（收藏文章，不怕找不到?）

作者：杰森，公眾號：十八般產(chǎn)品

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

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