起點課堂會員權益
職業(yè)體系課特權
線下行業(yè)大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識Axure使用技巧：錨點滾動
編輯導語：在使用Axure時，我們常常會需要用到錨點滾動效果，但是在做的時候，有幾個細節(jié)容易被忽略。作者總結了在使用Axure做錨點滾動時遇到的一些問題，并分享了其制作的步驟，一起來看看。
今天講的是Axure9的錨點滾動效果。錨點滾動，就是根據(jù)鼠標點擊，頁面滾動到事先設定好的位置。
效果如圖：
做到這個效果有兩步，以及一個容易忽略的注意事項。
- 為元件設計交互-單擊時滾到到元件。
- 設置動態(tài)面板-固定到瀏覽器
Tip：注意畫面有足夠空間，讓最下邊的元件也可以實現(xiàn)滾動。
那么就讓我們詳細看一下吧。
一、準備工作
側邊欄：拖出一個較窄深色的長方形矩形。拖出四個相同大小，同色的小矩形，命名為“paragraph 1”等，覆蓋在大矩形上。
主頁面：拖出一個較寬的淺色長方形矩形，并在上面設計好每段落的內(nèi)容。
Tip：特別注意，主頁面最后一段下方要留夠空間，不然paragraph 4很難實現(xiàn)滾動，變成下面這樣：
準備工作完成以后，就進入正式的設計階段了。
二、為元件設計交互-單擊時滾到到元件
選擇左側導航欄中的任一元件，點擊Axure9右側交互按鈕，選擇在單擊時滾動到元件的交互。
設置動作里的目標為主頁里對應名稱的元件，即左側paragraph 1對應主頁paragraph 1。
方向選擇垂直，動畫選擇線性，這樣會呈現(xiàn)一個流暢的畫面。
其他幾個左側導航欄按鈕類似。
三、設置動態(tài)面板-固定到瀏覽器
經(jīng)過上面的步驟以后，我們點擊側邊欄中的元件，可以實現(xiàn)畫面的滾動。但是由于側邊欄沒有固定，給我們添加了操作上面的難度。
利用動態(tài)面板-固定到瀏覽器這個功能，可以完美解決這個問題。
我們首先選中側邊欄中四個元件，然后右擊選擇轉換為動態(tài)面板。
點擊該動態(tài)面板，在右側的樣式中選擇固定到瀏覽器，在水平固定中選擇左側，垂直固定中選擇頂部。勾選始終保持頂層。
完成這些步驟以后，這個效果就完成了。
本文由 @艾筱說 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉載
題圖來自pexels，基于 CC0 協(xié)議
我做的完全滾不動
可能是側邊欄元件在做交互的時候，沒有和右側主頁面的元件對應上，才會導致頁面完全沒有滾動
對應了呀，就是點擊左邊的菜單欄，然后做交互設置單擊時滾動到元件，元件選擇的是右側對應的段落文字
“三、設置動態(tài)面板-固定到瀏覽器”這段上邊的圖片忽略，這是排版錯誤多出來的圖。
您說的這個步驟完成以后，選中左側四個元件，然后整體轉換為動態(tài)面板。再給動態(tài)面板固定到瀏覽器。
主頁面也是需要創(chuàng)建動態(tài)面板嗎？要不然出畫面的內(nèi)容怎么滾動？
我到底是哪一步錯了，為啥做不出來