作品名稱：錨點(diǎn)滾動(dòng)效果

作品編號(hào)：Case006

軟件版本：Axure9

作品類型：交互案例

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

原型預(yù)覽鏈接（附源文件下載鏈接）：http://daisyaxure.com/demo/Case006

交互效果說(shuō)明?

1.點(diǎn)擊左側(cè)菜單選項(xiàng)，頁(yè)面滾動(dòng)至右側(cè)對(duì)應(yīng)內(nèi)容板塊。

2.頁(yè)面滾動(dòng)時(shí)，左側(cè)導(dǎo)航菜單固定，右側(cè)內(nèi)容滾動(dòng)，滾動(dòng)到每個(gè)內(nèi)容板塊時(shí)選中左側(cè)對(duì)應(yīng)菜單選項(xiàng)。

效果預(yù)覽：

?

元件準(zhǔn)備?

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

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

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

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

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

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

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

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

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

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

- 制作交互效果?-

第一步：制作點(diǎn)擊左側(cè)菜單選項(xiàng)，頁(yè)面滾動(dòng)至右側(cè)對(duì)應(yīng)內(nèi)容板塊效果。

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

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

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

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

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

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

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

第二步：制作右側(cè)內(nèi)容滾動(dòng)，滾動(dòng)到每個(gè)內(nèi)容板塊時(shí)，選中左側(cè)對(duì)應(yīng)菜單選項(xiàng)效果。

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

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

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

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

設(shè)置完這一步，我們的整個(gè)交互就完成了。

---

更多高保真原型及交互案例請(qǐng)?jiān)L問(wèn)：http://daisyaxure.com

總結(jié)

以上是生活随笔為你收集整理的【Axure交互教程】 锚点滚动效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。