下拉刷新的由來與應用
下拉刷新這一偉大的交互設計來源於設計師Loren Brichter的發明創造，並將其首次應用於Twitter這一應用中，通過向下滑動的手勢動作輕鬆獲取推薦信息。現在，下拉刷新的交互幾乎無處不在，但即便如此也讓人無法輕易忽視它帶來的快感。國外的從Twitter 到 Gmail，國內的從QQ到新浪微博再到知乎、簡書、今日頭條等，它幾乎存在於你觸手可及的每一個應用當中，幾乎已經成為一個應用的標配功能。
本文從原型設計的角度來探究背後的交互邏輯，研究如何利用經典原型工具Axure實現這樣的交互效果。目前各大應用主要採取兩種下拉刷新方式，一種以簡書、知乎為代表的內容版塊固定的刷新方式，另一種以微博、今日頭條為代表的內容版塊向下滑動的刷新方式。
簡書與微博
通過觀察，不難看出，下拉刷新這一交互效果主要由向下滑動時和滑動結束時這兩個交互事件來完成。那麼我們來看看，上述兩種刷新方式在這兩個事件中都通過哪些不同的動作來實現這一交互設計？
以簡書、知乎為代表的下拉刷新
01觀察交互動作
向下滑動時：刷新按鈕緩緩向下垂直移動，並以自身為中心點進行旋轉，當向下移動到一定距離時停止移動。
滑動結束時：手指鬆開屏幕時，刷新按鈕消失，刷新按鈕的初始位置出現加載按鈕，並以自身為中心點進行旋轉；旋轉結束後，系統更新頁面內容，同時在內容的上方出現了一段提示內容更新數量的toast文字，幾秒後提示信息消失。
簡書交互分析（元件名參照下文）
02準備元件
首先準備好相關元件，元件素材中需要用到兩個動態面板，第一個動態面板承載內容，設置3個面板狀態，每個狀態為不同的內容。為了便於區分內容，本案例中將不同面板內的文字和佔位符通過不同的顏色來進行區分。該動態面板命名為”信息流“。
第二個動態面板主要用於處理下滑過程中和下滑結束時，刷新按鈕、加載按鈕和推薦提示的切換顯示，我們將第二個動態面板命名為“刷新”，3個狀態分別命名為刷新、加載和推薦，默認隱藏該面板。
03設置交互用例
信息流動態面板—設置拖動時用例
動作1：設置“刷新”動態面板的狀態為“刷新”
動作2：垂直拖動“刷新”動態面板，移動範圍在當前元件的Y軸座標到Y軸座標+200之間
動作3：旋轉刷新圖標按鈕，以自身中心點為參照，順時針旋轉180度，旋轉時的動畫效果為緩慢退出，動畫時間為500毫秒。
拖動時
信息流動態面板—設置拖動結束時用例
動作1：移動刷新動態面板回到拖動前位置，動畫效果設置為線性動畫，時間500毫秒
動作2：設置刷新動態面板狀態為加載，進入和退出動畫效果為逐漸，時間均為500毫秒
動作3：旋轉加載圖標按鈕，以自身中心點為參照，順時針旋轉1080度，旋轉時的動畫效果為緩進緩出，動畫時間為1000毫秒（1秒）
動作4：等待2000毫秒（2秒）
動作5：隱藏刷新動態面板
動作6：設置信息流動態面板為向後循環下一個狀態，進入和退出的動畫效果為逐漸，時間均為500毫秒
動作7：設置刷新動態面板的狀態為推薦，進入動畫效果為向下滑動，時間為500毫秒，並勾選顯示面板
動作8：等待1000毫秒（1秒）
動作9：隱藏刷新動態面板，動畫效果為向上滑動，時間為500毫秒
拖動結束時
以微博、頭條為代表的下拉刷新
01觀察交互動作
向下滑動時：內容向下移動至一定距離時，頁面的背景層出現刷新提示文字信息，過一段時間後，刷新提示文字變化，提醒釋放刷新內容。
滑動結束時：內容向上移動一段距離時，頁面背景層提示正在進行內容刷新；等待一段時間後，內容發生了變更，同時在頁面上方出現了推薦提示信息，提示推薦了xx條新內容。
微博交互分析（元件名參考下文）
02關於準備元件的一些說明
首先我們需要添加兩個動態面板，第一個動態面板用來設置刷新過程中的文案提示和圖標切換，共有3個狀態：下拉刷新、釋放刷新和加載，命名為刷新提示；另外一個動態面板用來存放切換的內容，該動態面板有3個狀態，不同面板內的文字和佔位符通過不同的顏色來進行區分，命名為內容。
將兩個動態面板選中轉換為新的動態面板，命名為顯示層，在將顯示層轉換為新的動態面板，命名為操作層。這裡我們對顯示的內容完成了兩層的嵌套，裡面一層顯示層主要用來切換顯示的內容，外面一層作為我們拖動的操作層，拖動事件的交互用例都通過操作層來進行設置。
最後我們還需要單獨準備一個矩形框，用來顯示推薦內容的數量,默認設置為隱藏。
03設置交互用例
加載圖標-載入時用例：為刷新提示動態面板的加載狀態設定一個載入事件，載入時循環切換指示器動態面板的狀態，從而利用指示器的狀態改變來實現加載圖標的自動旋轉。
載入時
指示器-狀態改變用例：拖動一個空動態面板，設置3個狀態，狀態改變時，1000毫秒內順時針旋轉720度，動畫效果為線性。
狀態改變時
操作層動態面板-拖動時用例
動作1：垂直拖動顯示層動態面板，拖動範圍限定在操作層底部以上的300個像素
動作2：設置刷新提示動態面板狀態為下拉
動作3：等待1000毫秒（1秒）
動作4：設置刷新提示動態面板狀態為釋放，進入和退出的動畫效果為逐漸，時間500毫秒
拖動時
操作層動態面板-拖動結束時用例
動作1：移動顯示層動態面板到座標（0,40），這個位置正好刷新提示的內容顯示出來
動作2：設置刷新提示動態面板狀態為加載中
動作3：等待2000毫秒（2秒）
動作4：移動顯示層動態面板到拖動前位置，即迴歸初始位置
動作5：設置內容動態面板循環切換下一個狀態
動作6：顯示推薦提示語內容，動畫效果為逐漸顯示，時間為500毫秒，並選擇至於頂層
動作7：等待1000毫秒（1秒）
動作8：隱藏推薦提示語，動畫效果為逐漸隱藏，時間為500毫秒
拖動結束時
上述的講解，希望能夠幫助到有興趣學習的同學，大家看完以後，如果還有一些細節上的東西存在疑問，可以下載源文件，來進一步的觀摩和分析。
下載鏈接：https://pan.baidu.com/s/1mkmV2FQ 密碼：subx
閱讀更多 努力拼搏的80後 的文章
