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

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

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

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

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

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

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

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

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

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

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

最后分享一種只有筆者這種人才愛玩的下拉頁面-.-

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

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

下拉頁面的思考。

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

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

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

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

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

（一）下拉刷新玩法

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

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

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

這樣的下拉刷新設計，

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

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

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

（二）下拉非刷新玩法

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

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

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

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

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

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

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

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

··· ···

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

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

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

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

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

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

?

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

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