下拉重新整理怎麼實現
本文從原型設計的角度來探究背後的互動邏輯，研究如何利用經典原型工具Axure實現這樣的互動效果。
目前各大應用主要採取兩種下拉重新整理方式，一種以簡書、知乎為代表的內容版塊固定的重新整理方式，另一種以微博、今日頭條為代表的內容版塊向下滑動的重新整理方式。
一、以簡書、知乎為代表的下拉重新整理
1.觀察互動動作
向下滑動時：
重新整理按鈕緩緩向下垂直移動，並以自身為中心點進行旋轉，當向下移動到一定距離時停止移動。
滑動結束時：
手指鬆開螢幕時，重新整理按鈕消失，重新整理按鈕的初始位置出現載入按鈕，並以自身為中心點進行旋轉；旋轉結束後，系統更新頁面內容，同時在內容的上方出現了一段提示內容更新數量的toast文字，幾秒後提示資訊消失。
簡書互動分析（元件名參照下文）
2。準備元件
首先準備好相關元件，元件素材中需要用到兩個動態面板：
第一個動態面板：
承載內容，設定3個面板狀態，每個狀態為不同的內容。為了便於區分內容，本案例中將不同面板內的文字和佔位符透過不同的顏色來進行區分。該動態面板命名為”資訊流“。
第二個動態面板：
主要用於處理下滑過程中和下滑結束時，重新整理按鈕、載入按鈕和推薦提示的切換顯示，我們將第二個動態面板命名為“重新整理”，3個狀態分別命名為重新整理、載入和推薦，預設隱藏該面板。
3。設定互動用例
1).資訊流動態面板—設定拖動時用例：
動作1：
設定“重新整理”動態面板的狀態為“重新整理”；
動作2：
垂直拖動“重新整理”動態面板，移動範圍在當前元件的Y軸座標到Y軸座標+200之間；
動作3：
旋轉重新整理圖示按鈕，以自身中心點為參照，順時針旋轉180度，旋轉時的動畫效果為緩慢退出，動畫時間為500毫秒。
設定拖動時用例的動作
2).資訊流動態面板—設定拖動結束時用例
動作1：
移動重新整理動態面板回到拖動前位置，動畫效果設定為線性動畫，時間500毫秒；
動作2：
設定重新整理動態面板狀態為載入，進入和退出動畫效果為逐漸，時間均為500毫秒；
動作3：
旋轉載入圖示按鈕，以自身中心點為參照，順時針旋轉1080度。旋轉時的動畫效果為緩進緩出，動畫時間為1000毫秒（1秒）；
動作4：
等待2000毫秒（2秒）；
動作5：
隱藏重新整理動態面板；
動作6：
設定資訊流動態面板為向後迴圈下一個狀態，進入和退出的動畫效果為逐漸，時間均為500毫秒；
動作7：
設定重新整理動態面板的狀態為推薦，進入動畫效果為向下滑動，時間為500毫秒，並勾選顯示面板；
動作8：
等待1000毫秒（1秒）；
動作9：
隱藏重新整理動態面板，動畫效果為向上滑動，時間為500毫秒。
設定拖動結束時用例的動作
二、以微博、頭條為代表的下拉重新整理
1。觀察互動動作
向下滑動時：
內容向下移動至一定距離時，頁面的背景層出現重新整理提示文字資訊。過一段時間後，重新整理提示文字變化，提醒釋放重新整理內容。
滑動結束時：
內容向上移動一段距離時，頁面背景層提示正在進行內容重新整理；等待一段時間後，內容發生了變更，同時在頁面上方出現了推薦提示資訊，提示推薦了xx條新內容。
微博互動分析（元件名參照下文）
2。關於準備元件的一些說明
首先我們需要新增兩個動態面板：
第一個動態面板
用來設定重新整理過程中的文案提示和圖示切換，共有3個狀態：下拉重新整理、釋放重新整理和載入，命名為重新整理提示；
另外一個動態面板
用來存放切換的內容，該動態面板有3個狀態，不同面板內的文字和佔位符透過不同的顏色來進行區分，命名為內容。
將兩個動態面板選中轉換為新的動態面板，命名為顯示層；再將顯示層轉換為新的動態面板，命名為操作層。
這裡我們對顯示的內容完成了兩層的巢狀，裡面一層顯示層主要用來切換顯示的內容，外面一層作為我們拖動的操作層，拖動事件的互動用例都透過操作層來進行設定。
最後我們還需要單獨準備一個矩形框，用來顯示推薦內容的數量，預設設定為隱藏。
3。設定互動用例
1).載入圖示-載入時用例
：為重新整理提示動態面板的載入狀態設定一個載入事件，載入時迴圈切換指示器動態面板的狀態，從而利用指示器的狀態改變來實現載入圖示的自動旋轉。
設定載入事件
2).指示器-狀態改變用例
：拖動一個空動態面板，設定3個狀態，狀態改變時，1000毫秒內順時針旋轉720度，動畫效果為線性。
設定狀態改變事件
3).操作層動態面板-拖動時用例
動作1：
垂直拖動顯示層動態面板，拖動範圍限定在操作層底部以上的300個畫素；
動作2：
設定重新整理提示動態面板狀態為下拉；
動作3：
等待1000毫秒（1秒）；
動作4：
設定重新整理提示動態面板狀態為釋放，進入和退出的動畫效果為逐漸，時間500毫秒。
設定拖動時用例的動作
4).操作層動態面板-拖動結束時用例
動作1：
移動顯示層動態面板到座標（0，40），這個位置正好重新整理提示的內容顯示出來；
動作2：
設定重新整理提示動態面板狀態為載入中；
動作3：
等待2000毫秒（2秒）；
動作4：
移動顯示層動態面板到拖動前位置，即迴歸初始位置；
動作5：
設定內容動態面板迴圈切換下一個狀態；
動作6：
顯示推薦提示語內容，動畫效果為逐漸顯示，時間為500毫秒，並選擇至於頂層；
動作7：
等待1000毫秒（1秒）；
動作8：
隱藏推薦提示語，動畫效果為逐漸隱藏，時間為500毫秒。
設定拖動結束時用例的動作
上述的講解，希望能夠幫助到有興趣學習的同學。大家看完以後，如果還有一些細節上的東西存在疑問，可以下載原始檔，來進一步的觀摩和分析。
下載連結：https：//pan。baidu。com/s/1mkmV2FQ 密碼：subx
本文由 @kevin 原創釋出於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CCO協議