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