Axure使用技巧:錨點滾動

編輯導語:在使用Axure時,我們常常會需要用到錨點滾動效果,但是在做的時候,有幾個細節容易被忽略。作者總結了在使用Axure做錨點滾動時遇到的一些問題,並分享了其製作的步驟,一起來看看。

Axure使用技巧:錨點滾動

今天講的是Axure9的錨點滾動效果。錨點滾動,就是根據滑鼠點選,頁面滾動到事先設定好的位置。

效果如圖:

Axure使用技巧:錨點滾動

做到這個效果有兩步,以及一個容易忽略的注意事項。

為元件設計互動-單擊時滾到到元件。

設定動態面板-固定到瀏覽器

Tip:注意畫面有足夠空間,讓最下邊的元件也可以實現滾動。

那麼就讓我們詳細看一下吧。

一、準備工作

側邊欄

:拖出一個較窄深色的長方形矩形。拖出四個相同大小,同色的小矩形,命名為“paragraph 1”等,覆蓋在大矩形上。

主頁面

:拖出一個較寬的淺色長方形矩形,並在上面設計好每段落的內容。

Tip

:特別注意,主頁面最後一段下方要留夠空間,不然paragraph 4很難實現滾動,變成下面這樣:

Axure使用技巧:錨點滾動

準備工作完成以後,就進入正式的設計階段了。

二、為元件設計互動-單擊時滾到到元件

選擇左側導航欄中的任一元件,點選Axure9右側互動按鈕,選擇在

單擊時滾動到元件

的互動。

設定動作裡的目標為主頁裡對應名稱的元件,即左側paragraph 1對應主頁paragraph 1。

方向選擇垂直,動畫選擇線性,這樣會呈現一個流暢的畫面。

Axure使用技巧:錨點滾動

其他幾個左側導航欄按鈕類似。

Axure使用技巧:錨點滾動

三、設定動態面板-固定到瀏覽器

經過上面的步驟以後,我們點選側邊欄中的元件,可以實現畫面的滾動。但是由於側邊欄沒有固定,給我們添加了操作上面的難度。

利用

動態面板-固定到瀏覽器

這個功能,可以完美解決這個問題。

我們首先選中側邊欄中四個元件,然後右擊選擇轉換為動態面板。

點選該動態面板,在右側的樣式中選擇固定到瀏覽器,在水平固定中選擇左側,垂直固定中選擇頂部。勾選始終保持頂層。

Axure使用技巧:錨點滾動

完成這些步驟以後,這個效果就完成了。

本文由 @艾筱說 原創釋出於人人都是產品經理,未經許可,禁止轉載

題圖來自pexels,基於 CC0 協議

頂部