青銅修煉手冊: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

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章