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

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

效果如下：

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

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

以效果動畫中的案例為例，思路如下：

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

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

01

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

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

02

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

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

03

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

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

04

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

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

End

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

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

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

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