中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

在日常交互場景中，我們經常會使用“返回頂部”或者錨點定位功能，來快速到達自己想去的頁面。那么如果想利用Axure來實現這一交互設計的話，我們又可以如何進行呢？本文作者便進行了解讀，一起來看。

Axure 有一個【滾動到元件】的交互，這個交互在日常設計中用得最多的主要有兩種場景，分別是【返回頂部】和【錨點】，今天分享這兩種場景的設計。

一、返回頂部

這個功能在網頁設計中非常常見，但是我在網上搜了一下，卻發現很少有關于這塊的 Axure 教程，我猜想大佬們可能是覺得這個實在太簡單，沒有必要出教程。而剩下不多的教程中呢，基本上都非常復雜，很費勁才實現這個設計，看得人想罵娘，今天，我將分享可能是全網最簡單的，用 Axure 實現返回頂部的教程。

先找個實際網站看一下，以下是人人都是產品經理首頁的演示效果：

返回頂部的設計主要有3個要點：

1. 默認隱藏；
2. 頁面向下滑動一定距離后顯示；
3. 點擊按鈕返回到頁面頂部。

接下來開始動手做。

先畫個示意界面：

最上面的【矩形】假裝是頂部內容，下方的【占位符】表示頁面其他內容，右側是一個【動態面板】，里面放了一個【圓形】，并填充了文字“↑”。

首先頁面是可以持續滾動的，而【返回頂部】的按鈕是固定在頁面上的，所以需要對按鈕所在的【動態面板】配置【固定到瀏覽器】：

關于【動態面板】固定到瀏覽器我在《【Axure 教程】動態面板的救贖》有相關的分享，各位有興趣可以看看。

接下來給【動態面板】添加【滾動到元件】交互，目標設置為【頂部內容】的矩形，并選擇【垂直】，動畫一般設置【線性】，速度自己可以根據觀感調節即可：

設置完看看效果：

這個時候【返回頂部】的功能就做完了，但是當頁面已經處于頂部的時候，我們是不需要顯示返回按鈕的，而是當頁面向下滑動一定距離后才顯示，所以我們需要優化一下。

首先我們點一下工作區的空白處，不選擇任何元件，給頁面添加【窗口滾動時】的交互：

這里先判斷窗口垂直滑動的距離（Window.scrollY）是否超過【頂部內容】的高度，如果是，表示頂部內容板塊已經完全滑出瀏覽器頁面，這個時候就可以顯示【返回頂部】按鈕，如果還沒有，則無需顯示，最后再選擇【返回頂部】按鈕，設置為隱藏，看看效果：

返回頂部的功能就設計完了，如果各位看完覺得這還不簡單，也請不要罵娘，如果一定要罵的話，就罵我好了。

二、錨點

錨點一般是用于頁面較長時，通過分類導航來快速定位頁面的位置，以人人都是產品經理文章頁為例：

接下來用 Axure 來實現類似設計。

外觀如下：

放幾個標題，再放幾段文本段落，右邊放一個表格做錨點，同樣設為【動態面板】，并固定在頁面右下角。

接下來給表格的每個單元格添加滾動到元件，目標就是對應的標題：

設置完之后看看效果：

其他場景就請各位自己挖掘了。