Axure:如何快速“回到頂部”?

今天我們來分享一個瀏覽網頁時經常會遇到的一個操作,“回到頂部”。有了這個操作,瀏覽網頁時就非常方便了,特別是商城類的網站,這個操作是必不可少的了,一起來看看~


今天我們來分享一個瀏覽網頁時經常會遇到的一個操作,“回到頂部”。有了這個操作,瀏覽網頁時就非常方便了,特別是商城類的網站,這個操作是必不可少的了,一起來看看~

Axure:如何快速“回到頂部”?

這個原型一共用到兩個頁面:“首頁”和“內容頁面”。

第一步:首頁組件

  1. 一個矩形框,尺寸1024×120,作為網頁頭部,可放置logo和標題(尺寸大小不要求,自己喜歡就好);
  2. 一個內聯框架,尺寸1024×520,作為網頁主體(寬度與網頁頭部一致,高度不要求)。

Axure:如何快速“回到頂部”?

第二步:內容頁面組件

  1. 可以放置一些灰色方框,代表網頁內容,要有錯開放置,顯示的時候有回到頂部的效果就可以了(注意:放置的內容總高度要大于內聯框架的高度);
  2. 一條水平線放置在y軸為0的位置,命名為“頂部”;
  3. 一個50×50的動態面板放置在右下角,命名為“回到頂部”,動態面板state面板狀態中,放置一個50×50的箭頭,設置圖標顏色為淺灰色(icons 圖標中可找到)。

Axure:如何快速“回到頂部”?

第三步:為內聯框架添加鏈接屬性,設置內聯框架鏈接到“頁面內容”

雙擊內聯框架勾選鏈接頁面,并確定。

Axure:如何快速“回到頂部”?

第四步:為“回到頂部”設置固定到瀏覽器

右鍵“回到頂部”設置固定到瀏覽器,水平固定位置右邊距15,垂直固定位置下邊距15,始終保持頂部。

Axure:如何快速“回到頂部”?

最后一步:為“回到頂部”添加鼠標點擊時用例

設置為垂直滾動到“頂部”,線性,500毫秒。

Axure:如何快速“回到頂部”?

好啦,擁有火箭速度的回到頂部已經完成了,快去預覽看看效果吧!!

可以先瞧瞧完成的效果:https://k7ig8o.axshare.com

 

本文由 @方子 原創發布。未經許可,禁止轉載

題圖來自 Pixabay,基于 CC0 協議

原創文章,作者:金香檳運營,如若轉載,請注明出處:http://www.bgnhhk.tw/28883.html

三五六合图库大全