下拉刷新的由來與應(yīng)用
下拉刷新這一偉大的交互設(shè)計(jì)來源于設(shè)計(jì)師Loren Brichter的發(fā)明創(chuàng)造吓坚，并將其首次應(yīng)用于Twitter這一應(yīng)用中瞧栗，通過向下滑動的手勢動作輕松獲取推薦信息。現(xiàn)在纹蝴，下拉刷新的交互幾乎無處不在庄萎，但即便如此也讓人無法輕易忽視它帶來的快感。國外的從Twitter 到 Gmail塘安，國內(nèi)的從QQ到新浪微博再到知乎糠涛、簡書、今日頭條等兼犯，它幾乎存在于你觸手可及的每一個(gè)應(yīng)用當(dāng)中忍捡，幾乎已經(jīng)成為一個(gè)應(yīng)用的標(biāo)配功能。
本文從原型設(shè)計(jì)的角度來探究背后的交互邏輯切黔，研究如何利用經(jīng)典原型工具Axure實(shí)現(xiàn)這樣的交互效果砸脊。目前各大應(yīng)用主要采取兩種下拉刷新方式，一種以簡書纬霞、知乎為代表的內(nèi)容版塊固定的刷新方式凌埂，另一種以微博、今日頭條為代表的內(nèi)容版塊向下滑動的刷新方式诗芜。
通過觀察瞳抓，不難看出，下拉刷新這一交互效果主要由向下滑動時(shí)和滑動結(jié)束時(shí)這兩個(gè)交互事件來完成伏恐。那么我們來看看孩哑，上述兩種刷新方式在這兩個(gè)事件中都通過哪些不同的動作來實(shí)現(xiàn)這一交互設(shè)計(jì)？
以簡書脐湾、知乎為代表的下拉刷新
01觀察交互動作
向下滑動時(shí)：刷新按鈕緩緩向下垂直移動臭笆，并以自身為中心點(diǎn)進(jìn)行旋轉(zhuǎn)，當(dāng)向下移動到一定距離時(shí)停止移動秤掌。
滑動結(jié)束時(shí)：手指松開屏幕時(shí)愁铺，刷新按鈕消失，刷新按鈕的初始位置出現(xiàn)加載按鈕闻鉴，并以自身為中心點(diǎn)進(jìn)行旋轉(zhuǎn)茵乱；旋轉(zhuǎn)結(jié)束后，系統(tǒng)更新頁面內(nèi)容孟岛，同時(shí)在內(nèi)容的上方出現(xiàn)了一段提示內(nèi)容更新數(shù)量的toast文字瓶竭，幾秒后提示信息消失。
02準(zhǔn)備元件
首先準(zhǔn)備好相關(guān)元件渠羞，元件素材中需要用到兩個(gè)動態(tài)面板斤贰，第一個(gè)動態(tài)面板承載內(nèi)容，設(shè)置3個(gè)面板狀態(tài)次询，每個(gè)狀態(tài)為不同的內(nèi)容荧恍。為了便于區(qū)分內(nèi)容，本案例中將不同面板內(nèi)的文字和占位符通過不同的顏色來進(jìn)行區(qū)分屯吊。該動態(tài)面板命名為”信息流“送巡。
第二個(gè)動態(tài)面板主要用于處理下滑過程中和下滑結(jié)束時(shí)，刷新按鈕盒卸、加載按鈕和推薦提示的切換顯示骗爆，我們將第二個(gè)動態(tài)面板命名為“刷新”，3個(gè)狀態(tài)分別命名為刷新蔽介、加載和推薦摘投，默認(rèn)隱藏該面板。
03設(shè)置交互用例
信息流動態(tài)面板—設(shè)置拖動時(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)按鈕谷朝，以自身中心點(diǎn)為參照，順時(shí)針旋轉(zhuǎn)180度武花，旋轉(zhuǎn)時(shí)的動畫效果為緩慢退出圆凰，動畫時(shí)間為500毫秒。
信息流動態(tài)面板—設(shè)置拖動結(jié)束時(shí)用例
動作1：移動刷新動態(tài)面板回到拖動前位置体箕，動畫效果設(shè)置為線性動畫专钉，時(shí)間500毫秒
動作2：設(shè)置刷新動態(tài)面板狀態(tài)為加載，進(jìn)入和退出動畫效果為逐漸累铅，時(shí)間均為500毫秒
動作3：旋轉(zhuǎn)加載圖標(biāo)按鈕跃须，以自身中心點(diǎn)為參照，順時(shí)針旋轉(zhuǎn)1080度娃兽，旋轉(zhuǎn)時(shí)的動畫效果為緩進(jìn)緩出菇民，動畫時(shí)間為1000毫秒（1秒）
動作4：等待2000毫秒（2秒）
動作5：隱藏刷新動態(tài)面板
動作6：設(shè)置信息流動態(tài)面板為向后循環(huán)下一個(gè)狀態(tài)，進(jìn)入和退出的動畫效果為逐漸，時(shí)間均為500毫秒
動作7：設(shè)置刷新動態(tài)面板的狀態(tài)為推薦第练，進(jìn)入動畫效果為向下滑動阔馋，時(shí)間為500毫秒，并勾選顯示面板
動作8：等待1000毫秒（1秒）
動作9：隱藏刷新動態(tài)面板娇掏，動畫效果為向上滑動呕寝，時(shí)間為500毫秒
以微博、頭條為代表的下拉刷新
01觀察交互動作
向下滑動時(shí)：內(nèi)容向下移動至一定距離時(shí)婴梧，頁面的背景層出現(xiàn)刷新提示文字信息下梢，過一段時(shí)間后，刷新提示文字變化塞蹭，提醒釋放刷新內(nèi)容孽江。
滑動結(jié)束時(shí)：內(nèi)容向上移動一段距離時(shí)，頁面背景層提示正在進(jìn)行內(nèi)容刷新番电；等待一段時(shí)間后岗屏，內(nèi)容發(fā)生了變更，同時(shí)在頁面上方出現(xiàn)了推薦提示信息钧舌，提示推薦了xx條新內(nèi)容担汤。
02關(guān)于準(zhǔn)備元件的一些說明
首先我們需要添加兩個(gè)動態(tài)面板，第一個(gè)動態(tài)面板用來設(shè)置刷新過程中的文案提示和圖標(biāo)切換洼冻，共有3個(gè)狀態(tài)：下拉刷新崭歧、釋放刷新和加載，命名為刷新提示撞牢；另外一個(gè)動態(tài)面板用來存放切換的內(nèi)容率碾，該動態(tài)面板有3個(gè)狀態(tài)，不同面板內(nèi)的文字和占位符通過不同的顏色來進(jìn)行區(qū)分屋彪，命名為內(nèi)容所宰。
將兩個(gè)動態(tài)面板選中轉(zhuǎn)換為新的動態(tài)面板，命名為顯示層畜挥，在將顯示層轉(zhuǎn)換為新的動態(tài)面板仔粥，命名為操作層。這里我們對顯示的內(nèi)容完成了兩層的嵌套蟹但，里面一層顯示層主要用來切換顯示的內(nèi)容躯泰，外面一層作為我們拖動的操作層，拖動事件的交互用例都通過操作層來進(jìn)行設(shè)置华糖。
最后我們還需要單獨(dú)準(zhǔn)備一個(gè)矩形框麦向，用來顯示推薦內(nèi)容的數(shù)量,默認(rèn)設(shè)置為隱藏。
03設(shè)置交互用例
加載圖標(biāo)-載入時(shí)用例：為刷新提示動態(tài)面板的加載狀態(tài)設(shè)定一個(gè)載入事件客叉，載入時(shí)循環(huán)切換指示器動態(tài)面板的狀態(tài)诵竭，從而利用指示器的狀態(tài)改變來實(shí)現(xiàn)加載圖標(biāo)的自動旋轉(zhuǎn)话告。
指示器-狀態(tài)改變用例：拖動一個(gè)空動態(tài)面板，設(shè)置3個(gè)狀態(tài)卵慰，狀態(tài)改變時(shí)沙郭，1000毫秒內(nèi)順時(shí)針旋轉(zhuǎn)720度，動畫效果為線性呵燕。
操作層動態(tài)面板-拖動時(shí)用例
動作1：垂直拖動顯示層動態(tài)面板棠绘，拖動范圍限定在操作層底部以上的300個(gè)像素
動作2：設(shè)置刷新提示動態(tài)面板狀態(tài)為下拉
動作3：等待1000毫秒（1秒）
動作4：設(shè)置刷新提示動態(tài)面板狀態(tài)為釋放件相，進(jìn)入和退出的動畫效果為逐漸再扭，時(shí)間500毫秒
操作層動態(tài)面板-拖動結(jié)束時(shí)用例
動作1：移動顯示層動態(tài)面板到坐標(biāo)（0,40），這個(gè)位置正好刷新提示的內(nèi)容顯示出來
動作2：設(shè)置刷新提示動態(tài)面板狀態(tài)為加載中
動作3：等待2000毫秒（2秒）
動作4：移動顯示層動態(tài)面板到拖動前位置夜矗，即回歸初始位置
動作5：設(shè)置內(nèi)容動態(tài)面板循環(huán)切換下一個(gè)狀態(tài)
動作6：顯示推薦提示語內(nèi)容泛范，動畫效果為逐漸顯示，時(shí)間為500毫秒紊撕，并選擇至于頂層
動作7：等待1000毫秒（1秒）
動作8：隱藏推薦提示語罢荡，動畫效果為逐漸隱藏，時(shí)間為500毫秒
如果你對Axure或原型設(shè)計(jì)有興趣对扶，希望系統(tǒng)性地學(xué)習(xí)Axure知識区赵，掌握更多Axure使用技巧；或者希望通過臨摹交互案例浪南，進(jìn)一步提升高保交互設(shè)計(jì)能力笼才。請點(diǎn)擊下方關(guān)注按鈕，查看更多連載作品络凿。
