整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
次教各位小伙伴使用內聯框架來實現頁面滾動，除此之外還會有一些小案例 ~
先來看看 天貓 首頁 頂部欄 的效果 ~
（以上圖片已是上傳的極限， 各位看官要是看不清，請自行下載天貓，打開首頁觀看）
所以今天我們就拿天貓首頁的頂部欄為例子，來講解在 Axure 里面是如何制作的 ！！
先看圖：
（以上圖片分三部分講，背景元件色值為：#E4E4E4，下面不重復講）
1.首先新建 Axure 文件，頂部電量條可由大家隨意制作（ w：375 ，h：20 ），如果有相關組件庫的小伙伴可直接拖入 ；
2.頂部欄區域，拖進一個元件當做背景（ w：375 ，h：44 ），從 阿里巴巴矢量圖標庫 （ http://www.iconfont.cn ）下載以下 icon 如圖擺放即可 ；
3.在頂部欄區域的下面，拖進一個元件當做背景（ w：375 ，h：44 ），再在該元件上面放置一個純白色矩形（ w：335 ，h：30 ），命名：“ 輸入框背景 ”、一個文本框（ w：290 ，h：28 ），命名：“ 輸入框 ” 、一個搜索 icon （ w：14 ，h：14 ），命名：“ 搜索 icon ” 。把 輸入框背景、輸入框、搜索icon 選中右鍵點擊組合，命名：“ 輸入框控件 ” ，完成 ；
完成以上的元件準備，然后我們先把他放置在一旁，等待使用…
4.然后把第一個頁面命名為：“ 外頁 ” ，在新增一個頁面命名為：“ 內頁 ” ，拖動 “ 內頁 ” 為 “ 外頁 ” 的子級，如圖 ：
5.然后我們雙擊進入 外頁 的頁面，從左側組件庫拖進一個內聯框架（ w：375 ，h：667 ），為了美觀我們在這個內聯框架底部再拖進一個矩形（ w：377 ，h：669 ），然后我們點擊內聯框架，在右側屬性 – 內聯框架 – 選擇框架目標 – 內頁 – 確定。
繼續點擊內聯框架，右鍵點擊 – 轉換成動態面板 ，把該面板“ 自動調整為內容尺寸 ”，然后進入該動態面板，把內聯框架的寬高都增加 17 px，如圖 ：
6.把剛才步驟 1 – 3 的內容，放入到內頁里面（ x ：0 ，y ：0 ），內頁的內容比較緊靠左上角，這樣才不會出現待會移動的時候體驗不好，如圖 ：
7.全選以上圖片所有內容，右鍵點擊 轉換為動態面板 ，在右側屬性設置 – 固定在瀏覽器 – 水平固定：左 、垂直固定：上 。如圖：
8.然后我們在該原型的下方任意放置矩形，在每個矩形里添加 1、2、3 文字，增加識別度 ：
完成以上的所有部分，可以先生成預覽看一下效果了 ~
以上就做好了所有的元件準備，內容比較多（ 因為有些小伙伴剛接觸 Axure ，拆分得比較細，各位老司機將就一下 ~ ），弄完之后我們就可以開始下一步操作了 ~
1.雙擊進入內頁，在頁面的空白處設置 窗口滾動時（Case 1） ：
a.設置條件：值 – [[Window.scrollY]] – 大于等于 – 5 ；
b.移動輸入框控件 – 移動：絕對 – x 為：60 ，y 為：27 – 動畫：線性 – 時間：250 毫秒 ；
c.設置尺寸：“ 輸入框 ” w ：170 ，h ：28 – 錨點：左上角 – 動畫：線性 – 時間：250 毫秒 、“ 輸入框背景 ” w ：215 ，h ：30 – 錨點：左上角 – 動畫：線性 – 時間：250 毫秒 ；
d.設置 “ 背景 ” – 隱藏 – 動畫：向上滑動 – 時間：500毫秒 ；
2.雙擊進入內頁，在頁面的空白處設置 窗口滾動時（Case 2） ：
a.設置條件：值 – [[Window.scrollY]] – 小于 – 5 ；
b.設置 “ 背景 ” – 顯示 – 動畫：向下滑動 – 時間：500毫秒 ；
c.移動輸入框控件 – 移動：絕對 – x 為：20 ，y 為：71 – 動畫：線性 – 時間：250 毫秒 ；
d.設置尺寸：“ 輸入框 ” w ：290 ，h ：28 – 錨點：左上角 – 動畫：線性 – 時間：250 毫秒 、“ 輸入框背景 ” w ：335 ，h ：30 – 錨點：左上角 – 動畫：線性 – 時間：250 毫秒 ；
以上完成之后就可以得到以下效果了，是不是很簡單？
然后我們完成以上步驟之后，我們還可以在該頁面的下面放置一個 “ 返回頂部 ” 的 icon ，意為：當我們下滑到一定位置時，顯示 “ 返回頂部 ” icon ，點擊該 icon 時，返回至頂部并隱藏 “ 返回頂部 ” icon …
下面我們來開始制作 ~
1.從左側元件庫拉出一條橫向水平線，長度小于 375 px 即可，命名為：“ 頂部 ” ，然后置于底層；
2.拉入一個作為 “ 返回頂部 ” 的 icon （ w：40，y：40 ），或者隨意拉一個矩形代替都可以；
3.點擊 icon 右鍵轉換為動態面板，右側設置固定到瀏覽器（此處跟以上相同設置即可）；
4.設置 “ 返回頂部 ” icon 交互用戶，鼠標單擊時 – 滾動到元件<錨鏈接> – 勾選：頂部 – 僅垂直滾動 – 動畫：線性 – 時間：250 毫秒 ；
5.把 “ 返回頂部 ” icon 放置在內頁（ x：315，y:586 ）的位置，點擊隱藏 ；
6.在內頁的空白處設置 窗口滾動時（Case 3） ：
a.設置條件：值 – [[Window.scrollY]] – 大于等于 – 500 ；
b.顯示 “ 返回頂部 ” icon – 動畫：逐漸 – 時間：250 毫秒；
7.在內頁的空白處設置 窗口滾動時（Case 4） ：
a.設置條件：值 – [[Window.scrollY]] – 小于 – 500 ；
b.隱藏 “ 返回頂部 ” icon – 動畫：逐漸 – 時間：250 毫秒；
完成以上設置就可以了，下面我們來看一下效果 ~
好的，以上就是本次的所有講解，謝謝大家！！
需要的可以下載看看。同時有相關問題的可在以下留言區留言，我將第一時間回復 ~
本文由 @李桂東 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
語：今天，本文作者和大家分享一下如何通過Axure實現網站Tab導航欄切換內容頁和返回頂部交互，希望看后對你能有所幫助。
我們在使用知乎時，會發現向下滾動頁面，網站Tab導航欄會發生內容切換；同時滾動超過一定距離，會出現回到頂部按鈕，點擊該按鈕，即可返回頁面頂部。
頂部欄兩種狀態及下滑頁面準備，我是通過截圖的方式準備的：
回到頂部按鈕、鼠標移入按鈕時所顯示的浮窗，將該組合命名為“回到頂部-總”：
將頂部欄的兩種狀態分別放入動態面板中的狀態1與狀態2中，將動態面板命名為statusBar；
添加鼠標移入回到頂部按鈕顯示”回到頂部”氣泡：
添加向下、向上滑動頁面，頂部狀態欄切換；
其次，對窗口添加交互：
將“回到頂部-總”組合轉為動態面板，將該動態面板命名為“回到頂部-總panel”，固定動態面板顯示位置，并隱藏：
添加錨點元件，我們在此選擇熱區元件，因為熱區具有透明的特性，將其命名為TopLocation：
為“回到頂部”按鈕增加交互，鼠標移入顯示“回到頂部”氣泡，移除隱藏“回到頂部”氣泡；為“回到頂部”按鈕添加【單擊時】用例，設置動作【滾動到元件】，選擇TopLocation，垂直線性滾動500毫秒。
在上面交互的應用中，我們會用到Window.scrollY函數，該函數為窗口函數；窗口函數一共包括以下四種：
本文由 @小青 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自 Unsplash，基于 CC0 協議
在日常交互場景中，我們經常會使用【返回頂部】或者【錨點定位】功能，來快速到達自己想去的頁面，那么如何使用 Axure 實現這一交互效果呢，本文將利用 Axure 中【滾到元件】的交互去實現這兩個功能。
這個功能在日常使用中非常常見，其實最簡單的方式就三點
1、默認隱藏【返回頂部】；
2、頁面向下滑動一定距離后顯示【返回頂部】；
3、點擊【返回頂部】返回到頁面頂部
接下來開始動手做吧:
最上面的矩形作為頂部內容，再畫一塊矩形拉長頁面，最后用一個動態面板畫一個回到頂部的按鈕。
首先頁面是可以持續滾動的，而【返回頂部】的按鈕是固定在頁面上的，所以需要對按鈕所在的【動態面板】配置【固定到瀏覽器】
接下來給【動態面板】設置【單擊】【滾動到原件】，目標為【頂部矩形】
這個時候【返回頂部】的功能就做完了，但是當頁面已經處于頂部的時候，通常情況下是不需要顯示返回按鈕的，而是當頁面向下滑動一定距離后才顯示，所以可以優化一下
我們點一下畫布的空白處，給頁面添加【窗口滾動時】的交互，當窗口垂直滑動的距離大于頂部矩形高度的手則【顯示】 【動態面板】 ，否則就【隱藏】
交互設置完成之后我們再去默認隱藏【動態面板】就完成了
當網頁內容較長時，通過設置錨點，用戶可以通過點擊鏈接直接跳轉到頁面的特定區域。
這種方式不僅提升了頁面的可訪問性，也使得用戶在瀏覽大量信息時更加快捷。
接下來模擬這樣一個場景：四個內容四個標題，一個動態面板
然后給動態面板設置【單擊】【滾動到原件】的事件，目標就是對應的標題，一 一對應設置好就完成啦
感謝您的閱讀，希望本文能夠啟發您的設計靈感，期待在設計的道路上與您相遇
– 歡迎點贊、關注、轉發、收藏【我碼玄黃】，gonghao同名
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
