本文從原型設(shè)計的角度來探究背后的交互邏輯，研究如何利用經(jīng)典原型工具Axure實現(xiàn)這樣的交互效果。

目前各大應(yīng)用主要采取兩種下拉刷新方式，一種以簡書、知乎為代表的內(nèi)容版塊固定的刷新方式，另一種以微博、今日頭條為代表的內(nèi)容版塊向下滑動的刷新方式。

一、以簡書、知乎為代表的下拉刷新

1.觀察交互動作

• 向下滑動時：刷新按鈕緩緩向下垂直移動，并以自身為中心點進行旋轉(zhuǎn)，當(dāng)向下移動到一定距離時停止移動。
• 滑動結(jié)束時：手指松開屏幕時，刷新按鈕消失，刷新按鈕的初始位置出現(xiàn)加載按鈕，并以自身為中心點進行旋轉(zhuǎn)；旋轉(zhuǎn)結(jié)束后，系統(tǒng)更新頁面內(nèi)容，同時在內(nèi)容的上方出現(xiàn)了一段提示內(nèi)容更新數(shù)量的toast文字，幾秒后提示信息消失。

簡書交互分析（元件名參照下文）

2.準(zhǔn)備元件

首先準(zhǔn)備好相關(guān)元件，元件素材中需要用到兩個動態(tài)面板：

• 第一個動態(tài)面板：承載內(nèi)容，設(shè)置3個面板狀態(tài)，每個狀態(tài)為不同的內(nèi)容。為了便于區(qū)分內(nèi)容，本案例中將不同面板內(nèi)的文字和占位符通過不同的顏色來進行區(qū)分。該動態(tài)面板命名為”信息流“。
• 第二個動態(tài)面板：主要用于處理下滑過程中和下滑結(jié)束時，刷新按鈕、加載按鈕和推薦提示的切換顯示，我們將第二個動態(tài)面板命名為“刷新”，3個狀態(tài)分別命名為刷新、加載和推薦，默認(rèn)隱藏該面板。

3.設(shè)置交互用例

1).信息流動態(tài)面板—設(shè)置拖動時用例：

• 動作1：設(shè)置“刷新”動態(tài)面板的狀態(tài)為“刷新”；
• 動作2：垂直拖動“刷新”動態(tài)面板，移動范圍在當(dāng)前元件的Y軸坐標(biāo)到Y(jié)軸坐標(biāo)+200之間；
• 動作3：旋轉(zhuǎn)刷新圖標(biāo)按鈕，以自身中心點為參照，順時針旋轉(zhuǎn)180度，旋轉(zhuǎn)時的動畫效果為緩慢退出，動畫時間為500毫秒。

設(shè)置拖動時用例的動作

2).信息流動態(tài)面板—設(shè)置拖動結(jié)束時用例

• 動作1：移動刷新動態(tài)面板回到拖動前位置，動畫效果設(shè)置為線性動畫，時間500毫秒;
• 動作2：設(shè)置刷新動態(tài)面板狀態(tài)為加載，進入和退出動畫效果為逐漸，時間均為500毫秒;
• 動作3：旋轉(zhuǎn)加載圖標(biāo)按鈕，以自身中心點為參照，順時針旋轉(zhuǎn)1080度。旋轉(zhuǎn)時的動畫效果為緩進緩出，動畫時間為1000毫秒（1秒）；
• 動作4：等待2000毫秒（2秒）；
• 動作5：隱藏刷新動態(tài)面板；
• 動作6：設(shè)置信息流動態(tài)面板為向后循環(huán)下一個狀態(tài)，進入和退出的動畫效果為逐漸，時間均為500毫秒；
• 動作7：設(shè)置刷新動態(tài)面板的狀態(tài)為推薦，進入動畫效果為向下滑動，時間為500毫秒，并勾選顯示面板；
• 動作8：等待1000毫秒（1秒）；
• 動作9：隱藏刷新動態(tài)面板，動畫效果為向上滑動，時間為500毫秒。

設(shè)置拖動結(jié)束時用例的動作

二、以微博、頭條為代表的下拉刷新

1.觀察交互動作

• 向下滑動時：內(nèi)容向下移動至一定距離時，頁面的背景層出現(xiàn)刷新提示文字信息。過一段時間后，刷新提示文字變化，提醒釋放刷新內(nèi)容。
• 滑動結(jié)束時：內(nèi)容向上移動一段距離時，頁面背景層提示正在進行內(nèi)容刷新；等待一段時間后，內(nèi)容發(fā)生了變更，同時在頁面上方出現(xiàn)了推薦提示信息，提示推薦了xx條新內(nèi)容。

微博交互分析（元件名參照下文）

2.關(guān)于準(zhǔn)備元件的一些說明

首先我們需要添加兩個動態(tài)面板：

• 第一個動態(tài)面板用來設(shè)置刷新過程中的文案提示和圖標(biāo)切換，共有3個狀態(tài)：下拉刷新、釋放刷新和加載，命名為刷新提示；
• 另外一個動態(tài)面板用來存放切換的內(nèi)容，該動態(tài)面板有3個狀態(tài)，不同面板內(nèi)的文字和占位符通過不同的顏色來進行區(qū)分，命名為內(nèi)容。

將兩個動態(tài)面板選中轉(zhuǎn)換為新的動態(tài)面板，命名為顯示層；再將顯示層轉(zhuǎn)換為新的動態(tài)面板，命名為操作層。

這里我們對顯示的內(nèi)容完成了兩層的嵌套，里面一層顯示層主要用來切換顯示的內(nèi)容，外面一層作為我們拖動的操作層，拖動事件的交互用例都通過操作層來進行設(shè)置。

最后我們還需要單獨準(zhǔn)備一個矩形框，用來顯示推薦內(nèi)容的數(shù)量,默認(rèn)設(shè)置為隱藏。

3.設(shè)置交互用例

1).加載圖標(biāo)-載入時用例：為刷新提示動態(tài)面板的加載狀態(tài)設(shè)定一個載入事件，載入時循環(huán)切換指示器動態(tài)面板的狀態(tài)，從而利用指示器的狀態(tài)改變來實現(xiàn)加載圖標(biāo)的自動旋轉(zhuǎn)。

設(shè)置載入事件

2).指示器-狀態(tài)改變用例：拖動一個空動態(tài)面板，設(shè)置3個狀態(tài)，狀態(tài)改變時，1000毫秒內(nèi)順時針旋轉(zhuǎn)720度，動畫效果為線性。

設(shè)置狀態(tài)改變事件

3).操作層動態(tài)面板-拖動時用例

• 動作1：垂直拖動顯示層動態(tài)面板，拖動范圍限定在操作層底部以上的300個像素；
• 動作2：設(shè)置刷新提示動態(tài)面板狀態(tài)為下拉；
• 動作3：等待1000毫秒（1秒）；
• 動作4：設(shè)置刷新提示動態(tài)面板狀態(tài)為釋放，進入和退出的動畫效果為逐漸，時間500毫秒。

設(shè)置拖動時用例的動作

4).操作層動態(tài)面板-拖動結(jié)束時用例

• 動作1：移動顯示層動態(tài)面板到坐標(biāo)（0,40），這個位置正好刷新提示的內(nèi)容顯示出來；
• 動作2：設(shè)置刷新提示動態(tài)面板狀態(tài)為加載中；
• 動作3：等待2000毫秒（2秒）；
• 動作4：移動顯示層動態(tài)面板到拖動前位置，即回歸初始位置；
• 動作5：設(shè)置內(nèi)容動態(tài)面板循環(huán)切換下一個狀態(tài)；
• 動作6：顯示推薦提示語內(nèi)容，動畫效果為逐漸顯示，時間為500毫秒，并選擇至于頂層；
• 動作7：等待1000毫秒（1秒）；
• 動作8：隱藏推薦提示語，動畫效果為逐漸隱藏，時間為500毫秒。

設(shè)置拖動結(jié)束時用例的動作

上述的講解，希望能夠幫助到有興趣學(xué)習(xí)的同學(xué)。大家看完以后，如果還有一些細(xì)節(jié)上的東西存在疑問，可以下載源文件，來進一步的觀摩和分析。

下載鏈接：https://pan.baidu.com/s/1mkmV2FQ 密碼：subx

本文由 @kevin 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CCO協(xié)議