Pull to refresh丨被忽視的下拉刷新原來有這么多種玩法

15 評論 16953 瀏覽 103 收藏 16 分鐘

一款產(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)容并刷新當前頁面。

0_1324012940a684

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

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

20150403194224567

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

shuaxin

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

waimai

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

huodong

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

maimeng

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

cushou

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

meiyou

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

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

20160606115226

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)一只小老鼠,再往下拉小老鼠會掏出一個相機,松手之后咔嚓一下拍照,大家猜一下這個應用是做什么的?

4196_130617140129_1

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

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

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

29.pic

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

(二)下拉非刷新玩法

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

taobao

淘寶(左)和天貓(右)的商品頁面下拉后展現(xiàn)“我的足跡”和“促銷活動”,這個功能比較創(chuàng)新。以淘寶為例,在瀏覽某一商品時想對比剛才瀏覽的另一商品,這個場景下體驗非常好,而且于淘寶而言高效地利用流量。另一個場景,正在瀏覽某一商品,下拉頁面時跳出上次瀏覽過的商品,和正在看的商品沒有半點關(guān)聯(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)品,下拉頁面即簽到或領(lǐng)積分,減少用戶使用成本。

··· ···

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

品牌的獨特認知,濃縮于它的Logo,比如我們看到“√”會想到NIKE,看到企鵝會想到騰訊,看到蘋果會想到iPhone······這些各自領(lǐng)域里的佼佼者已經(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)先級的,下拉刷新屬于次級需求,它需要在解決主需求的基礎(chǔ)上再優(yōu)化改進,且不能妨礙主需求。筆者上述所設計的新玩法是建立在具體的場景中,并且認可一點:不影響主需求的基礎(chǔ)上,去玩下拉刷新。

總的來說,下拉刷新的創(chuàng)新設計能提高用戶使用產(chǎn)品的趣味性,構(gòu)建良好的人機交互頁面,同時也可以傳達產(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)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. :mrgreen:

    來自北京 回復
  2. 剛做產(chǎn)品。剛好想換個刷新方式,可以考慮下。但還是要從產(chǎn)品角度去選擇,沒有太好的想法選擇還不如用系統(tǒng)自帶的(個人意見)

    來自本機地址 回復
  3. 瞬間被點醒的感覺

    來自江蘇 回復
    1. ?? ?? ??

      來自湖北 回復
  4. 這個好,平常的思維都死了,吃了作者的一口藥活了一些。

    來自北京 回復
    1. 很多產(chǎn)品尚未重視下拉刷新,其實也可以有不少新玩法 ??

      來自湖北 回復
    2. 其實這樣的話,可以引申到別的部件上 ??

      來自北京 回復
    3. 看來你有想法了,快來交流 ??

      來自湖北 回復
    4. 挺多的吧,比如現(xiàn)在到了端午了,加載時候的小圈圈可以改成一個粽子在剝開。

      來自北京 回復
  5. 受教了

    回復
    1. 有意思的想法記得多多分享吧~ ??

      來自湖北 回復
  6. 不錯

    回復
    1. 歡迎交流探討 ??

      來自湖北 回復
  7. :mrgreen:

    來自浙江 回復
    1. ?? ?? ??

      來自湖北 回復