1. 程式人生 > >青銅修煉手冊:Axure回到頂部互動設計

青銅修煉手冊:Axure回到頂部互動設計

“回到頂部”這個互動我們經常在瀏覽網站的時候遇到,所以今天想分享一下這個互動是如何實現的

步驟:

(1)首先我們在畫布放置一個灰色矩形和一個內聯框架,矩形內填寫文字“網頁首部”

(2)新增一個內容頁面,在裡面隨意新增內容,內容的高度要高於內聯框架的高度,在這裡我隨意添加了幾個矩形

          (3)點選內聯框架連結到【內容頁面】

           (4)放置一條水平線在y軸為“0”的地方,並取名為“頂部”

       (5)放置一個50*50的動態面板在畫布中並取名為“回到頂部”,然後在動態面板State1狀態中新增一個50*50的【灰色】箭頭

          (6)點選“回到頂部”並右鍵選單選固定到瀏覽器,在出來的彈框上選擇“水平固定”為【右】15,“垂直固定”為【下】15

       (7)為“回到頂部”新增互動方式,點選【滑鼠點選時】->【滾動到元件<錨鏈接>】->【頂部(水平線)】->【僅垂直滾動】->【動畫“線性”500毫秒】

          (8)完成,點選瀏覽檢視效果

    原型檢視效果地址:

https://pm84rb.axshare.com

    原型RP檔案下載地址:https://download.csdn.net/download/qq_27884377/10633782