編輯導語:在使用Axure時,我們常常會需要用到錨點滾動效果,但是在做的時候,有幾個細節容易被忽略。作者總結了在使用Axure做錨點滾動時遇到的一些問題,並分享了其製作的步驟,一起來看看。
今天講的是Axure9的錨點滾動效果。錨點滾動,就是根據滑鼠點選,頁面滾動到事先設定好的位置。
效果如圖:
做到這個效果有兩步,以及一個容易忽略的注意事項。
為元件設計互動-單擊時滾到到元件。
設定動態面板-固定到瀏覽器
Tip:注意畫面有足夠空間,讓最下邊的元件也可以實現滾動。
那麼就讓我們詳細看一下吧。
一、準備工作
側邊欄
:拖出一個較窄深色的長方形矩形。拖出四個相同大小,同色的小矩形,命名為“paragraph 1”等,覆蓋在大矩形上。
主頁面
:拖出一個較寬的淺色長方形矩形,並在上面設計好每段落的內容。
Tip
:特別注意,主頁面最後一段下方要留夠空間,不然paragraph 4很難實現滾動,變成下面這樣:
準備工作完成以後,就進入正式的設計階段了。
二、為元件設計互動-單擊時滾到到元件
選擇左側導航欄中的任一元件,點選Axure9右側互動按鈕,選擇在
單擊時滾動到元件
的互動。
設定動作裡的目標為主頁裡對應名稱的元件,即左側paragraph 1對應主頁paragraph 1。
方向選擇垂直,動畫選擇線性,這樣會呈現一個流暢的畫面。
其他幾個左側導航欄按鈕類似。
三、設定動態面板-固定到瀏覽器
經過上面的步驟以後,我們點選側邊欄中的元件,可以實現畫面的滾動。但是由於側邊欄沒有固定,給我們添加了操作上面的難度。
利用
動態面板-固定到瀏覽器
這個功能,可以完美解決這個問題。
我們首先選中側邊欄中四個元件,然後右擊選擇轉換為動態面板。
點選該動態面板,在右側的樣式中選擇固定到瀏覽器,在水平固定中選擇左側,垂直固定中選擇頂部。勾選始終保持頂層。
完成這些步驟以後,這個效果就完成了。
本文由 @艾筱說 原創釋出於人人都是產品經理,未經許可,禁止轉載
題圖來自pexels,基於 CC0 協議