一款產(chǎn)品的視覺(jué)頁(yè)面通常由各種banner、icon、button等元素組成，這些元素代表著這款產(chǎn)品的主要功能，并形成其風(fēng)格和調(diào)性。不管是banner還是button都是靠“點(diǎn)擊”動(dòng)作，而翻頁(yè)、分欄等功能在移動(dòng)類產(chǎn)品則基本由“點(diǎn)擊”轉(zhuǎn)換為“劃動(dòng)”的動(dòng)作，這是產(chǎn)品的一個(gè)普遍趨勢(shì)。下拉刷新屬于“劃動(dòng)”這個(gè)動(dòng)作，相對(duì)于產(chǎn)品的主功能，下拉刷新是一個(gè)小功能，但在一些產(chǎn)品中它又是必需的功能。

iOS和Android用戶對(duì)上圖 App 這樣的更新方式一定不陌生：用手指拖住屏幕往下一拉，App滑出一段特定內(nèi)容并刷新當(dāng)前頁(yè)面。

2012年，Twitter發(fā)明了這種

Pull to refresh 刷新方式，引發(fā)產(chǎn)品交互的一個(gè)小浪潮，大大小小的App爭(zhēng)先效仿，甚至有開發(fā)者把它帶到Chrome和Safari上面去了！次年，Twitter正式宣布獲得了下拉刷新的技術(shù)專利，雖然一再說(shuō)明此項(xiàng)專利只用于保護(hù)自己，不會(huì)用來(lái)發(fā)起訴訟，但仍讓很多公司視為威脅。好在Twitter說(shuō)話算話，至今還沒(méi)聽(tīng)說(shuō)有過(guò)這類訴訟侵權(quán)。

下拉刷新在很多產(chǎn)品中都有體現(xiàn)，筆者收集了一些我們常用App的下拉刷新，后面再和大家分享關(guān)于下拉刷新的總結(jié)和新玩法。

人人都是產(chǎn)品經(jīng)理（左）和 今日頭條（右）的下拉刷新都采用較為經(jīng)典的方式，而前者更是輔以“最后更新時(shí)間”更清晰準(zhǔn)確地傳達(dá)給用戶此次刷新動(dòng)作的時(shí)間維度。這種方式大多應(yīng)用于各資訊、商品類產(chǎn)品或欄目中，滿足其不斷更新的需求并有效提示用戶，一個(gè)有意思的例子：微店旗下產(chǎn)品——口袋購(gòu)物、今日半價(jià)、微店買家版基本采用這種方式。

美團(tuán)外賣（左）和百度外賣（右）的下拉更新采用的是其公仔或卡通形象的方式，活潑生動(dòng)地刷新展現(xiàn)，同時(shí)也強(qiáng)化用戶對(duì)品牌和功能的認(rèn)知。這種方式廣泛應(yīng)用于各類App中，例子一大堆：百度糯米、大眾點(diǎn)評(píng)、美麗說(shuō)、藝龍、美拍······

京東（左）和優(yōu)酷（右）下拉頁(yè)面已不局限于“更新”了，而是賦予其新功能：主題活動(dòng)。進(jìn)入App后，京東的下拉頁(yè)面出現(xiàn)的是618大促活動(dòng)的游戲，優(yōu)酷的下拉頁(yè)面是暴走法條君的宣傳，它們已經(jīng)在下拉更新的基礎(chǔ)上大膽創(chuàng)新。其實(shí)，這個(gè)玩法淘寶、天貓之前已成功實(shí)踐過(guò)，在大促活動(dòng)前通過(guò)這種方式植入小游戲，發(fā)放代金券、紅包等，一來(lái)更有趣味性，二來(lái)增強(qiáng)用戶購(gòu)買欲。

58同城（左）和淘票票（右），賣賣萌、撒撒嬌，對(duì)用戶來(lái)說(shuō)也是很受用的，這種方式體現(xiàn)溫度和人性，拉進(jìn)用戶和產(chǎn)品的距離。

阿里旅行（左）和餓了么（右）下拉直接呈現(xiàn)產(chǎn)品Logo及slogan，干凈利落，類似產(chǎn)品公仔形象，可以加強(qiáng)用戶對(duì)品牌的認(rèn)知。（PS：都整“觸手XX”，我知道現(xiàn)在是移動(dòng)互聯(lián)網(wǎng)時(shí)代==）

騰訊視頻（左）和亞馬遜（右），這倆下拉頁(yè)面什么都沒(méi)有······筆者就想問(wèn)：既然不玩下拉刷新為什么不干脆固定頂部呢？拉下一大片空白，看的也辣眼睛······

最后分享一種只有筆者這種人才愛(ài)玩的下拉頁(yè)面-.-

ENJOY，一款社交餐飲產(chǎn)品，主頁(yè)面不斷下拉就是上面的效果了。只要還能往下拉的頁(yè)面，筆者一定會(huì)慘無(wú)人道地把它揪出來(lái)······是的，這種產(chǎn)品人投筆者這類用戶所好了。理性分析的話，這也是一種可以優(yōu)化改進(jìn)的玩法，下文再詳細(xì)討論。

市面上普遍的App大多有下拉刷新，以上的介紹也可以看出：下拉頁(yè)面已經(jīng)在演化更多有趣或者實(shí)用的玩法，但總體而言很多產(chǎn)品人和交互設(shè)計(jì)師并不重視這個(gè)小玩意，筆者準(zhǔn)備梳理一下對(duì)

下拉頁(yè)面的思考。

說(shuō)起微信“搖一搖”大家都很熟悉，很多產(chǎn)品人對(duì)此推崇備至，很多App上也都有搖一搖這個(gè)功能。產(chǎn)品教父張小龍是這么分析的：微信的搖一搖是個(gè)以“自然”為目標(biāo)的設(shè)計(jì)，“抓握”、“搖晃”是人在遠(yuǎn)古時(shí)代沒(méi)有工具時(shí)必須具備的本能。手機(jī)提供了激發(fā)人類這項(xiàng)遠(yuǎn)古本能的條件，設(shè)計(jì)“搖一搖”時(shí)，目標(biāo)是和人的“自然”或者說(shuō)“本能”動(dòng)作體驗(yàn)做到一致。

張小龍從人的原始本能這一角度來(lái)思考，舉一反三，套用這種思考模式，筆者認(rèn)為“觸摸”、“劃動(dòng)”也是人自出生便具有的本能，通過(guò)手和嘴找到第一口母乳，對(duì)陌生世界也是本能地用手去觸碰和感受，形成原始的認(rèn)知。手機(jī)、平板電腦以及更多電子產(chǎn)品都從原始的按鍵逐漸進(jìn)化為觸屏，也是這種思考角度的實(shí)際體現(xiàn)。

一款產(chǎn)品的視覺(jué)頁(yè)面通常由各種banner、icon、button等元素組成，這些元素代表著這款產(chǎn)品的主要功能，并形成其風(fēng)格和調(diào)性。不管是banner還是button都是靠“點(diǎn)擊”動(dòng)作，而翻頁(yè)、分欄等功能在移動(dòng)類產(chǎn)品則基本由“點(diǎn)擊”轉(zhuǎn)換為“劃動(dòng)”的動(dòng)作，這是產(chǎn)品的一個(gè)普遍趨勢(shì)。下拉刷新屬于“劃動(dòng)”這個(gè)動(dòng)作，相對(duì)于產(chǎn)品的主功能，下拉刷新是一個(gè)小功能，但在一些產(chǎn)品中它又是必需的功能。

小但必需，那么，目前尚被忽略的下拉刷新有哪些玩法呢？

如前文所言，下拉頁(yè)面已經(jīng)演化出一些有趣或?qū)嵱玫耐娣ǎ也痪窒抻谒⑿逻@一功能。筆者準(zhǔn)備從“下拉刷新”和“下拉非刷新”兩個(gè)方向來(lái)分析：

（一）下拉刷新玩法

1、從產(chǎn)品功能出發(fā)：吸引用戶、強(qiáng)化品牌

先來(lái)玩?zhèn)€小游戲，下圖是一個(gè)叫Cheeze的App，下拉時(shí)，界面會(huì)出現(xiàn)一只小老鼠，再往下拉小老鼠會(huì)掏出一個(gè)相機(jī)，松手之后咔嚓一下拍照，大家猜一下這個(gè)應(yīng)用是做什么的？

揭曉答案：根據(jù)老鼠的動(dòng)作，大家很容易聯(lián)想到這是一個(gè)照片分享應(yīng)用。

這樣的下拉刷新設(shè)計(jì)，

一方面?zhèn)鬟_(dá)了這個(gè)應(yīng)用的核心價(jià)值，另一方面也對(duì)品牌有了更深刻的印象，非常有意思。這種方式適用于絕大數(shù)產(chǎn)品，當(dāng)然，任何產(chǎn)品都需要從實(shí)際需求考量去做，以上僅為一種參考。

2、從產(chǎn)品內(nèi)容出發(fā)：提醒用戶，預(yù)告內(nèi)容

開眼這款A(yù)pp做了一個(gè)良好的示范，下拉刷新時(shí)展現(xiàn)“距離更新還有XX時(shí)XX分鐘”，在時(shí)間的維度上給用戶更精確的提醒。此外，這種玩法還可以直接為接下來(lái)的內(nèi)容呈現(xiàn)做一個(gè)預(yù)告，比如“距離XX作品更新還有XX時(shí)XX分鐘”、“距離XX活動(dòng)還有XX時(shí)XX分鐘”。

（二）下拉非刷新玩法

1、從產(chǎn)品業(yè)務(wù)出發(fā)：依托數(shù)據(jù)，創(chuàng)新功能

淘寶（左）和天貓（右）的商品頁(yè)面下拉后展現(xiàn)“我的足跡”和“促銷活動(dòng)”，這個(gè)功能比較創(chuàng)新。以淘寶為例，在瀏覽某一商品時(shí)想對(duì)比剛才瀏覽的另一商品，這個(gè)場(chǎng)景下體驗(yàn)非常好，而且于淘寶而言高效地利用流量。另一個(gè)場(chǎng)景，正在瀏覽某一商品，下拉頁(yè)面時(shí)跳出上次瀏覽過(guò)的商品，和正在看的商品沒(méi)有半點(diǎn)關(guān)聯(lián)，這就很不自然了。

這也說(shuō)明下拉頁(yè)面的功能也需要根據(jù)具體場(chǎng)景來(lái)設(shè)計(jì)，不宜采用“大一統(tǒng)”的方式，或者進(jìn)行一段時(shí)間的用戶教育，讓用戶知道該功能在什么場(chǎng)景下使用合適，并且采用一定方式防止手誤下拉頁(yè)面的展現(xiàn)。

淘寶、天貓的新玩法雖然不是面面俱到，但其創(chuàng)新性還是值得肯定的，首頁(yè)下拉頁(yè)面出現(xiàn)搶券、搶紅包等小游戲也是從淘寶、天貓開始玩起，這些都有著很不錯(cuò)的進(jìn)步意義。從產(chǎn)品的業(yè)務(wù)、功能出發(fā)，下拉頁(yè)面非刷新其實(shí)還有很多其他玩法。

• 很多App的開展活動(dòng)時(shí)，經(jīng)常是在主頁(yè)面新增一個(gè)入口，引導(dǎo)用戶點(diǎn)擊入口參與活動(dòng)，在實(shí)際操作中可視具體情況考慮使用下拉頁(yè)面代替新增一個(gè)入口，特別是偏游戲類的活動(dòng)，一來(lái)節(jié)省主頁(yè)面button資源，二來(lái)用下拉頁(yè)面的動(dòng)作代替點(diǎn)擊按鈕動(dòng)作，增強(qiáng)使用趣味。

• 類似淘寶、天貓?jiān)谝恍┒?jí)、三級(jí)或N級(jí)頁(yè)面，根據(jù)產(chǎn)品的具體業(yè)務(wù)和功能，量身定制下拉頁(yè)面的功能，比如旅游產(chǎn)品中某個(gè)景點(diǎn)的頁(yè)面，下拉頁(yè)面時(shí)展現(xiàn)去過(guò)該景點(diǎn)的用戶所寫的優(yōu)質(zhì)攻略。

• ENJOY產(chǎn)品下拉頁(yè)面展現(xiàn)某個(gè)具體形象，這種方式顯然并不被大多數(shù)用戶接受和喜歡，但可以進(jìn)行優(yōu)化：開展主題活動(dòng)，下拉頁(yè)面展示的內(nèi)容可以采用拼圖的方式（具體可根據(jù)產(chǎn)品業(yè)務(wù)來(lái)設(shè)計(jì)），激勵(lì)用戶玩起來(lái)。

• 對(duì)于一些強(qiáng)調(diào)用戶粘性的產(chǎn)品，下拉頁(yè)面即簽到或領(lǐng)積分，減少用戶使用成本。

··· ···

2、從品牌調(diào)性出發(fā)：獨(dú)特風(fēng)格

品牌的獨(dú)特認(rèn)知，濃縮于它的Logo，比如我們看到“√”會(huì)想到NIKE，看到企鵝會(huì)想到騰訊，看到蘋果會(huì)想到iPhone······這些各自領(lǐng)域里的佼佼者已經(jīng)讓它們的品牌越來(lái)越具象化，即看到某種實(shí)物就會(huì)聯(lián)想到它們。然而，還有更高階的，看到某種顏色就聯(lián)想到一個(gè)品牌，比如看到橙色我們會(huì)聯(lián)想到阿里巴巴，看到綠色會(huì)想到微信······當(dāng)然，這些也是相對(duì)的，不是絕對(duì)的認(rèn)知。

討論上述內(nèi)容，就是強(qiáng)調(diào)下拉頁(yè)面的內(nèi)容要想形成獨(dú)特風(fēng)格，可以從品牌Logo和品牌主題色兩個(gè)角度去設(shè)計(jì)。

下拉頁(yè)面不是為了刷新，而是展現(xiàn)品牌調(diào)性和風(fēng)格，比如根據(jù)品牌業(yè)務(wù)和定位設(shè)計(jì)Logo的系列形象，還可以和用戶互動(dòng)來(lái)征集，展現(xiàn)在下拉頁(yè)面上；比如產(chǎn)品主色調(diào)的統(tǒng)一，背景色、button、線條等方面進(jìn)行統(tǒng)一，展現(xiàn)在下拉頁(yè)面上。

下拉刷新在目前還未受到重視，最重要的原因在于：產(chǎn)品需求是有取舍和優(yōu)先級(jí)的，下拉刷新屬于次級(jí)需求，它需要在解決主需求的基礎(chǔ)上再優(yōu)化改進(jìn)，且不能妨礙主需求。筆者上述所設(shè)計(jì)的新玩法是建立在具體的場(chǎng)景中，并且認(rèn)可一點(diǎn)：不影響主需求的基礎(chǔ)上，去玩下拉刷新。

總的來(lái)說(shuō)，下拉刷新的創(chuàng)新設(shè)計(jì)能提高用戶使用產(chǎn)品的趣味性，構(gòu)建良好的人機(jī)交互頁(yè)面，同時(shí)也可以傳達(dá)產(chǎn)品價(jià)值、推廣品牌理念。精致的產(chǎn)品往往體現(xiàn)在精致的細(xì)節(jié)上，下拉刷新可以有很多種新玩法，也可以做成很精致的細(xì)節(jié)。

?

作者：天行（微信公眾號(hào)Utianxing），互聯(lián)網(wǎng)從業(yè)人員

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