玩轉Axure:導航欄吸附進階之模塊切換
如何用Axure做出導航欄吸附同時可在不同的Tab模塊之間切換的效果呢?本篇文章將為我們演示這一進階玩法。
前段時間寫了一篇如何制作導航欄吸附效果的文章,意猶未盡,正好自己也在做運動類型知識付費課程的產品,其中一些部分也用到這個效果,借著這個思路再分享一篇進階的玩法,導航欄吸附同時可在不同的Tab模塊之間切換。
效果如下:
與上篇文章中一樣(傳送門),頂部的導航欄顯示與隱藏用相同的方式實現,通過頁面滾動到相應位置時的條件判斷顯示和隱藏導航欄。
既然顯示了導航欄,就要發揮導航欄的作用,通過導航欄做進一步的操作,一般都是切換不同的模塊,在有些產品中也可以是篩選欄,具體就看產品類型,接下來就講解下懸浮后的導航欄如何與其它部分進行聯動。
以效果動畫中的案例為例,思路如下:
根據產品需求,導航欄對應控制三個部分的內容,分別是:課程介紹、課程列表、用戶評價:
- 當頁面滾動到設定條件判斷的位置是,顯示/隱藏導航欄;
- 顯示導航欄后,點擊不同的分類,切換到不同內容模塊;
- 頂部的導航欄隱藏后,在頁面中還可以繼續通過分類Tab控制內容模塊。
01
- 根據思路,我們先準備各部分對應的內容,由于元件太多,我就不一一列出了,首先在元件庫區域中拖入一個【動態面板】命名為“內容框架”;
- 在屬性中找到「滾動條」選項,選擇為“自動顯示滾動條”;
- 雙擊該動態面板,進入“State1”狀態。
如上圖所示,為動態面板添加以上元件,主要分為三部分:固定內容區、Tab、內容模塊。
02
- 雙擊動態面板“Tab”,新建三個狀態,分別命名為:課程介紹、課程列表、用戶評價;
- 為三個狀態中增加如上圖所示元件,并設置好樣式,用以區分不同的狀態。
- 雙擊動態面板“內容模塊”,創建三個狀態并分別命名為:課程介紹、課程列表、用戶評價
- 如上圖所示增加所需要的元件;
- 動態面板“內容模塊”屬性中的「滾動條」選項選擇為“自動顯示滾動條”。
03
復制一個動態面板“Tab”到主頁面,并修改命名為“懸浮Tab”,同時置于動態面板“內容框架”的上層。
- 雙擊“懸浮Tab”,先進入第一個狀態‘課程介紹’,進入后為「課程列表」設置鼠標單擊時的交互用例,設置動態面板”懸浮Tab“和”Tab“的狀態為‘課程列表’,同時設置動態面板”內容模版“的面板狀態也為‘課程列表’;
- 同樣的為元件【用戶評價】也設置對應單擊時的用例動作;
- 隨后為“懸浮Tab”動態面板中的第二個狀態‘課程列表’中的三個分類元件設置同樣的單擊時用例;
- 最后為“懸浮Tab”動態面板中的第三個狀態‘用戶評價’中的分類元件設置單擊時用例,規則與前兩個一樣。
04
雙擊動態面板“內容框架”,隨后再雙擊動態面板“Tab”,分別為三個狀態中的分類元件設置跟動態面板“懸浮Tab”完全一樣的交互用例,即可完成所有的設置。
具體的動作設置在第03部分中已展示,關于懸浮導航欄的設置方法已經在上篇文章中說明,可以參考后進行實踐,如有問題歡迎在評論區或者后臺留言。
End
(收藏文章,不怕找不到?)
作者:杰森,公眾號:十八般產品
本文由 @杰森 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
評論
作者您的公眾號多少呢,唉我要卡死在這里了,誰來教教我
公眾號沒了嗎?
吸附
右邊的滾動條如何隱藏呢?
轉換為動態面板,然后屬性中有一個滾動條的設置
這個元件可以分享一下嘛
我公眾號:十八般產品,回復關鍵詞:190219