編輯導(dǎo)語：錨點滾動是常見的效果，常與導(dǎo)航結(jié)合使用。那么，你知道如何利用Axure9來實現(xiàn)錨點滾動效果嗎？本篇文章里，作者以左側(cè)固定導(dǎo)航結(jié)合熱區(qū)為例，講解了如何使用Axure來實現(xiàn)錨點滾動的方法，一起來看一下。

錨點滾動效果即點擊錨點，頁面滾動到指定的位置的效果，經(jīng)常與導(dǎo)航結(jié)合起來運(yùn)用。錨點滾動在Axure中有多種實現(xiàn)方式，本案例以左側(cè)固定導(dǎo)航結(jié)合熱區(qū)來講講如何實現(xiàn)此效果。

一、交互效果說明點擊左側(cè)菜單選項，頁面滾動至右側(cè)對應(yīng)內(nèi)容板塊。頁面滾動時，左側(cè)導(dǎo)航菜單固定，右側(cè)內(nèi)容滾動，滾動到每個內(nèi)容板塊時選中左側(cè)對應(yīng)菜單選項。

效果預(yù)覽：

原型預(yù)覽地址：

二、元件準(zhǔn)備

所需要的內(nèi)容主要有三個部分：頂部導(dǎo)航欄/左側(cè)菜單欄/右側(cè)滾動內(nèi)容區(qū)。

1. 首先制作頂部導(dǎo)航

拖入所有元件，設(shè)置好元件樣式，選中所有元件右鍵【轉(zhuǎn)化為動態(tài)面板】，【填充顏色】，勾選【100%寬度】，點擊【固定在瀏覽器窗口】，水平固定【左側(cè)】，垂直固定。

設(shè)置完成后頂部導(dǎo)航欄將固定在頂部，不隨著頁面滾動而滾動。

2. 制作左側(cè)菜單欄

左側(cè)菜單欄拖入6個【文本標(biāo)簽】以及一個【矩形元件】，給文本標(biāo)簽做好命名并分別設(shè)置內(nèi)容。

同樣選中這部分所有元件右鍵【轉(zhuǎn)化為動態(tài)面板】，【設(shè)置坐標(biāo)為（20，100）】，點擊【固定在瀏覽器窗口】，水平固定【左側(cè)】，垂直固定。

設(shè)置完成后左側(cè)菜單欄將被固定，不隨著頁面滾動而滾動。

3. 制作右側(cè)滾動內(nèi)容區(qū)

設(shè)置6個板塊內(nèi)容，內(nèi)容可自定義，分別進(jìn)行分組及命名，和左側(cè)的菜單保持一致。

三、制作交互效果1. 第一步：制作點擊左側(cè)菜單選項，頁面滾動至右側(cè)對應(yīng)內(nèi)容板塊效果

1）雙擊左側(cè)菜單欄進(jìn)入動態(tài)面板，分別選中文本標(biāo)簽，點擊右鍵，選擇【交互樣式】，添加【鼠標(biāo)懸?！亢汀具x中】時的交互效果，這里設(shè)置的是字體顏色效果。

2）在右側(cè)交互面板中分別添加【鼠標(biāo)單擊時】【選中】當(dāng)前元件的交互，設(shè)置選項組名稱為「菜單單選組」，默認(rèn)勾選第一個菜單文本標(biāo)簽為選中狀態(tài)。

3）在右側(cè)內(nèi)容區(qū)域每一個板塊的內(nèi)容上方拖入一個【熱區(qū)】元件，高度為第一個內(nèi)容板塊至頂部的距離，這里為150px。

給拖入的熱區(qū)元件分別做好命名，拖入對應(yīng)的內(nèi)容板塊組合中。

熱區(qū)：是一個透明的元件，在原型中不可見的特性使得其可以覆蓋在任意元件上添加交互效果而不影響原型的美觀度。這里使用熱區(qū)是防止?jié)L動時被頂部導(dǎo)航遮蓋住一部分內(nèi)容，使?jié)L動區(qū)域可以到達(dá)我們想要的位置。

4）給左側(cè)菜單欄的6個菜單選項分別添加【鼠標(biāo)單擊時】【滾動到元件】的交互，目標(biāo)為右側(cè)內(nèi)容區(qū)對應(yīng)板塊上方的熱區(qū)，動畫為線性，200毫秒。

這一步完成后，點擊左側(cè)導(dǎo)航菜單，已經(jīng)可以滾動到對應(yīng)的板塊內(nèi)容區(qū)域了。

2. 第二步：制作右側(cè)內(nèi)容滾動，滾動到每個內(nèi)容板塊時，選中左側(cè)對應(yīng)菜單選項效果

1）拖入一條【水平線】元件，顏色透明度設(shè)置為0%，將其右鍵轉(zhuǎn)化為動態(tài)面板，點擊【固定到瀏覽器】中，水平固定【左側(cè)】，垂直固定【居中】，將此動態(tài)面板命名為「觸發(fā)線」。

2）在右側(cè)交互面板中選擇【頁面滾動時】的交互，點擊【啟用情形】，設(shè)置條件【元件范圍——「觸發(fā)線」——接觸元件范圍——「護(hù)膚品類-組合」】，添加動作【選中】左側(cè)菜單的「護(hù)膚品類」選項。

按照此方法依次設(shè)置條件及選中效果，使頁面滾動至右側(cè)每個板塊的內(nèi)容區(qū)域時，接觸到設(shè)置好的居中的「接觸線」元件，都可以選中左側(cè)菜單欄中的對應(yīng)選項。

所有交互添加完的交互如下：

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

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