下拉刷新是指用戶用手指在屏幕上拉下后，刷新指示符出現(xiàn)在列表頂部，并顯示內(nèi)容更新的進(jìn)度。下拉刷新這種用戶交互最早由twitter創(chuàng)始人Loren Brichter發(fā)明。iOS和Android用戶應(yīng)該很熟悉這樣的app原型設(shè)計(jì)交互方式。其實(shí)別小瞧這個(gè)簡單的交互動(dòng)作，一個(gè)有特色有創(chuàng)意的下拉刷新交互效果，可為你的app增加不少亮點(diǎn)。

下拉刷新VS刷新按鈕

相比刷新按鈕，下拉刷新現(xiàn)在已經(jīng)成為iOS移動(dòng)端中非常流行的一種UI手勢，到現(xiàn)在已經(jīng)非常廣泛地應(yīng)用于各種程序中，例如我們熟悉的Facebook、新浪微博，Instagram等。許多開發(fā)人員會考慮使用下拉刷新因?yàn)槠涓芄?jié)省屏幕空間，避免用戶界面出現(xiàn)混亂。下拉刷新為隱藏手勢，而刷新按鈕在導(dǎo)航欄上總是可見的，因此，它可能不如刷新按鈕那么直觀，但操作起來更具便利性和互動(dòng)性。

為什么要使用下拉刷新

手動(dòng)刷新確實(shí)為用戶界面提供了很多好處，不僅可增加與用戶間的互動(dòng)性而且操作起來也很方便，用戶可隨時(shí)刷新屏幕。經(jīng)過下拉刷新的不斷迭代和演變，如今，設(shè)計(jì)師們?yōu)榱顺晒ξ接脩?，已把下拉刷新玩出了新花樣。下面，博主給大家收集分享一些dribbble上面最火的下拉刷新案例類別，希望可以給你們的App原型設(shè)計(jì)帶來一些靈感沖擊。

類別一：主題類

效果：傳達(dá)品牌印象，推廣品牌理念。

這三個(gè)下拉刷新都是結(jié)合app主題而創(chuàng)造的，第一個(gè)是烹飪類的App，下拉刷新會出現(xiàn)正在烹飪的鍋具。第二個(gè)是航空公司的應(yīng)用程序，下拉會彈出一架一閃而過的飛機(jī)。第三個(gè)呢是關(guān)于通信類的一款應(yīng)用，下拉會出現(xiàn)一個(gè)等待連接的復(fù)古風(fēng)格的傳聲筒。相比傳統(tǒng)的刷新按鈕，是不是很生動(dòng)形象呢，你在等待的同時(shí)會不會有點(diǎn)愉悅感呢？

圖片來源：Dribbble

類別二：創(chuàng)意類

效果：吸引用戶，提升品牌形象，增強(qiáng)用戶粘度。

類別三：游戲類

效果：可使你的App原型增加趣味性，并增強(qiáng)用戶的互動(dòng)性，從而拉進(jìn)用戶和產(chǎn)品的距離。

在Twitterrific 5 中下拉刷新，你就可以免費(fèi)玩到的Flappy Bird，是不是忍不住想停下來嘗試一下呢？

類別四：卡通類

效果：以卡通形象的方式來呈現(xiàn)，生動(dòng)活潑，萌萌噠。是不是忍不住往下拉呢。

類別五：節(jié)日類

效果：提醒用戶，告知節(jié)日內(nèi)容和信息。

下拉刷新會出現(xiàn)一個(gè)萌萌的拖著禮物的圣誕老人（上）和一排節(jié)燈（下）是不是很有節(jié)日的氛圍呢？

看了上面的例子，是不是也很想動(dòng)手做一個(gè)簡單的下拉刷新的交互效果呢？別急，根本不需要任何代碼參與哈，一個(gè)app原型設(shè)計(jì)工具就能搞定啦，今天博主就跟大家推薦一款巨實(shí)用的app原型交互利器。相信很多做App原型設(shè)計(jì)的產(chǎn)品汪對Mockplus這款軟件并不陌生，國產(chǎn)原型工具中的王者，一鍵拖拽即可完成交互，分分鐘可以實(shí)現(xiàn)我們需要的刷新效果。舉個(gè)栗子~我們來觀摩一下Mockplus設(shè)計(jì)大賽冠軍的作品《Timing》里面的下拉刷新效果。

在線演示地址：https://run.mockplus.cn/34Q0oxnnvxxUKvkV/index.html

其實(shí)實(shí)現(xiàn)這個(gè)效果呢我們只需要簡單的移動(dòng)+顯示/隱藏效果就可以辦到啦。

Step 1：先填充好我們自己想要的內(nèi)容（圖片，按鈕等）編輯成組的形式，接著用一個(gè)文本組件編輯好下拉刷新的文本，并勾選為不可見。

Step 2：用圖片組對自己設(shè)置交互，選擇載入時(shí)移動(dòng)，X坐標(biāo)設(shè)置為0，Y坐標(biāo)設(shè)置為40，執(zhí)行時(shí)長為200。重復(fù)上面步驟對自己再做一個(gè)移動(dòng)交互，X坐標(biāo)設(shè)置為0，Y坐標(biāo)設(shè)置為-40，延遲800ms。具體設(shè)置如圖：

Step 3：用圖片組跟文本組件做交互，選擇載入時(shí)顯示，執(zhí)行時(shí)長為200ms。重復(fù)以上步驟，繼續(xù)做一個(gè)載入時(shí)隱藏交互，執(zhí)行時(shí)長為200ms，延遲800ms。勾選兩個(gè)交互目標(biāo)同時(shí)工作。

Step 4：點(diǎn)擊演示，就可以看到載入時(shí)自動(dòng)下拉刷新啦。是不是So easy呢？躍躍欲試？那就趕快嘗試一下吧~

Mockplus還給大家準(zhǔn)備了很多簡單的交互例子哦，請戳：http://doc.mockplus.cn/?cat=60

附：進(jìn)度條教程：http://doc.mockplus.cn/?p=3609

在線演示地址：https://run.mockplus.cn/4XDXA4vxJOPgTbBE/index.html

總結(jié)

總的來說，下拉刷新這一細(xì)節(jié)設(shè)計(jì)還是很有必要的。有趣的下拉刷新設(shè)計(jì)，可以讓大家記住你，從而起到產(chǎn)品宣傳的作用。所以呢，我們在以后的設(shè)計(jì)中，我們可以關(guān)注一些小細(xì)節(jié)設(shè)計(jì)，會讓你的App原型設(shè)計(jì)脫穎而出哦。