Axure教程:導航欄如何根據滾動條同步選中(熱區的使用)
編輯導讀:本文跟大家分享,如何用Axure完成導航欄根據滾動條同步選中效果,作者從預覽圖,到所需原件,再到操作步驟都一一展開了分析,并對過程中需要注意的問題進行了介紹,希望對你有所啟發。
現在網頁使用滾動條展示信息的場景越來越多,但是信息條太長會讓用戶感覺不知道滾動到什么位置了,對網站架構不太清楚,也不能快速定位到自己需要看到的信息,由此引入滾動條與導航欄關聯同步的功能,比如京東商城PC端、天貓PC端等等。
去年我也整理過關于實現此功能的文章,但是現在覺得之前的實現方案不太方便快捷,今天我將引入熱區元件來實現導航欄與滾動條同步選中的功能。
效果如下:
01 熱區
熱區的用途非常靈活,使用示例:
- 使用熱區元件來區分一個圖片中的不同交互區域。在圖片的不同區域上添加熱區元件,這樣就可以給這些區域添加交互了;
- 如果錨點鏈接需要定位到一個沒有元件的位置,那么熱區元件可以作為其定位目標。(比如高于元件的一個空白區域)
今天我要使用的是第二個功能,將熱區作為定位目標
02 元件的使用
- 熱區:放在相應的位置,用戶標識內容塊的起始位置;
- 矩形:用于放置內容塊信息;
- 動態面板:用戶設置導航欄;
頁面使用的元件情況入下圖:
03 交互設置
1. 導航欄
(1)設置導航欄動態面板為固定到瀏覽器;
(2)將所有導航菜單添加到同一個選項組;
(3)導航菜單均設置:“鼠標點擊”導航菜單事件,事件內容為:“滾動元件”到對應的熱區;
2. 設置頁面“窗體滾動”事件
設置思路:
窗體滾動時,
當窗體.Y坐標>=熱區1.Y時,選中內容1對應的導航菜單;
當窗體.Y>=熱區1.Y且窗體.Y<熱區2.Y時,選中內容2對應的導航菜單;
…
依此內推;
設置完成后的內容為下圖:
是不是很方便、快捷?
本文由 @戀 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
評論
- 目前還沒評論,等你發揮!