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

2020-12-23 人人都是產品經理

一款產品的視覺頁面通常由各種banner、icon、button等元素組成,這些元素代表著這款產品的主要功能,並形成其風格和調性。不管是banner還是button都是靠「點擊」動作,而翻頁、分欄等功能在移動類產品則基本由「點擊」轉換為「划動」的動作,這是產品的一個普遍趨勢。下拉刷新屬於「划動」這個動作,相對於產品的主功能,下拉刷新是一個小功能,但在一些產品中它又是必需的功能。

iOS和Android用戶對上圖 App 這樣的更新方式一定不陌生:用手指拖住屏幕往下一拉,App滑出一段特定內容並刷新當前頁面。

2012年,Twitter發明了這種

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

下拉刷新在很多產品中都有體現,筆者收集了一些我們常用App的下拉刷新,後面再和大家分享關於下拉刷新的總結和新玩法。

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

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

京東(左)和優酷(右)下拉頁面已不局限於「更新」了,而是賦予其新功能:主題活動。進入App後,京東的下拉頁面出現的是618大促活動的遊戲,優酷的下拉頁面是暴走法條君的宣傳,它們已經在下拉更新的基礎上大膽創新。其實,這個玩法淘寶、天貓之前已成功實踐過,在大促活動前通過這種方式植入小遊戲,發放代金券、紅包等,一來更有趣味性,二來增強用戶購買慾。

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

阿里旅行(左)和餓了麼(右)下拉直接呈現產品Logo及slogan,乾淨利落,類似產品公仔形象,可以加強用戶對品牌的認知。(PS:都整「觸手XX」,我知道現在是移動網際網路時代==)

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

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

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

市面上普遍的App大多有下拉刷新,以上的介紹也可以看出:下拉頁面已經在演化更多有趣或者實用的玩法,但總體而言很多產品人和互動設計師並不重視這個小玩意,筆者準備梳理一下對下拉頁面的思考。

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

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

一款產品的視覺頁面通常由各種banner、icon、button等元素組成,這些元素代表著這款產品的主要功能,並形成其風格和調性。不管是banner還是button都是靠「點擊」動作,而翻頁、分欄等功能在移動類產品則基本由「點擊」轉換為「划動」的動作,這是產品的一個普遍趨勢。下拉刷新屬於「划動」這個動作,相對於產品的主功能,下拉刷新是一個小功能,但在一些產品中它又是必需的功能。小但必需,那麼,目前尚被忽略的下拉刷新有哪些玩法呢?

如前文所言,下拉頁面已經演化出一些有趣或實用的玩法,而且不局限於刷新這一功能。筆者準備從「下拉刷新」和「下拉非刷新」兩個方向來分析:

(一)下拉刷新玩法

1、從產品功能出發:吸引用戶、強化品牌

先來玩個小遊戲,下圖是一個叫Cheeze的App,下拉時,界面會出現一隻小老鼠,再往下拉小老鼠會掏出一個相機,鬆手之後咔嚓一下拍照,大家猜一下這個應用是做什麼的?

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

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

2、從產品內容出發:提醒用戶,預告內容

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

(二)下拉非刷新玩法

1、從產品業務出發:依託數據,創新功能

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

這也說明下拉頁面的功能也需要根據具體場景來設計,不宜採用「大一統」的方式,或者進行一段時間的用戶教育,讓用戶知道該功能在什麼場景下使用合適,並且採用一定方式防止手誤下拉頁面的展現。

淘寶、天貓的新玩法雖然不是面面俱到,但其創新性還是值得肯定的,首頁下拉頁面出現搶券、搶紅包等小遊戲也是從淘寶、天貓開始玩起,這些都有著很不錯的進步意義。從產品的業務、功能出發,下拉頁面非刷新其實還有很多其他玩法。

  • 很多App的開展活動時,經常是在主頁面新增一個入口,引導用戶點擊入口參與活動,在實際操作中可視具體情況考慮使用下拉頁面代替新增一個入口,特別是偏遊戲類的活動,一來節省主頁面button資源,二來用下拉頁面的動作代替點擊按鈕動作,增強使用趣味。
  • 類似淘寶、天貓在一些二級、三級或N級頁面,根據產品的具體業務和功能,量身定製下拉頁面的功能,比如旅遊產品中某個景點的頁面,下拉頁面時展現去過該景點的用戶所寫的優質攻略。
  • ENJOY產品下拉頁面展現某個具體形象,這種方式顯然並不被大多數用戶接受和喜歡,但可以進行優化:開展主題活動,下拉頁面展示的內容可以採用拼圖的方式(具體可根據產品業務來設計),激勵用戶玩起來。
  • 對於一些強調用戶粘性的產品,下拉頁面即籤到或領積分,減少用戶使用成本。

··· ···

2、從品牌調性出發:獨特風格

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

討論上述內容,就是強調下拉頁面的內容要想形成獨特風格,可以從品牌Logo和品牌主題色兩個角度去設計。下拉頁面不是為了刷新,而是展現品牌調性和風格,比如根據品牌業務和定位設計Logo的系列形象,還可以和用戶互動來徵集,展現在下拉頁面上;比如產品主色調的統一,背景色、button、線條等方面進行統一,展現在下拉頁面上。

下拉刷新在目前還未受到重視,最重要的原因在於:產品需求是有取捨和優先級的,下拉刷新屬於次級需求,它需要在解決主需求的基礎上再優化改進,且不能妨礙主需求。筆者上述所設計的新玩法是建立在具體的場景中,並且認可一點:不影響主需求的基礎上,去玩下拉刷新。

總的來說,下拉刷新的創新設計能提高用戶使用產品的趣味性,構建良好的人機互動頁面,同時也可以傳達產品價值、推廣品牌理念。精緻的產品往往體現在精緻的細節上,下拉刷新可以有很多種新玩法,也可以做成很精緻的細節。

 

作者:天行(微信公眾號Utianxing),網際網路從業人員

本文由 @天行 原創發布於人人都是產品經理。未經許可,禁止轉載。

相關焦點

  • 微信小程序實戰篇-下拉刷新與加載更多
    好了不開玩笑啦,回到正題上來,請看標題,木錯,我們今天就要講解一下下拉刷新與加載更多。實現下拉刷新目前能想到的有兩種方式調用系統的API,系統有提供下拉刷新的API接口這個到目前為止下拉刷新的功能已經完成了,但是還不夠完美,還是有點怪怪的,就是下拉刷新沒有動畫,有木有~我那時也感到奇怪,微信封裝的下拉刷新怎麼可能這樣吶,後來我參考別人寫的代碼,發現一個小坑,先看一下我填完坑的效果吧
  • 新年重啟進行時:100種令人 refresh 的方法來了
    在新年伊始,我們來給新年一個更有活力一些的關鍵詞吧,相比 Toxic,我們想到的是 Refresh。Refresh 這個詞詞義豐富,它可以表示「使人精神抖擻,使人和事物煥新」也可以表示「讓人想起某種回憶」或者只是簡單地「刷新網頁」。無論是哪個含義,都是一個讓人開心的詞,這也讓 refresh 成為了一個富有儀式感的詞。
  • Spring源碼一讀——BeanDefinition和refresh
    以變長Class對象為參數:該方法會先調用無參構造方法,再調用register方法,即註冊,再調用refresh方法,即刷新。以變長String對象為參數:該方法會先調用無參構造方法,再調用scan方法,即掃描,再調用refresh方法,即刷新。
  • Word下拉菜單選項,原來這麼做
    在office軟體上製作下拉菜單,方便我們錄入數據,除了在Excel中製作下拉菜單,也可以在Word中製作下拉菜單選項,下面跟著小Q一起來操作哦~製作完畢效果演示:操作步驟:1、在Word文檔中製作下拉菜單選項,藉助【開發工具】來操作,在Word文檔中沒有顯示該功能的話,進入【文件】-【選項】-【自定義功能區】,將【開發工具】功能勾選即可。
  • 「形形色色」的雪花,原來雪有這麼多種形狀……
    「形形色色」的雪花,原來雪有這麼多種形狀…… 2020-12-15 14:00 來源:澎湃新聞·澎湃號·政務
  • 漲姿勢丨精裝書原來分這麼多種!
    精裝書原來分這麼多種!愛看書的你都了解多少呢? 一百多年前,現代出版進入中國,書籍裝幀開始出現變化,以精平裝書替代線裝書為重要標誌。 原來古代書籍的裝幀方式這麼有意思! △ 精裝書 在精裝書中又有圓脊、平脊之分 硬精裝、軟精裝之分 硬精裝、軟精裝
  • pull in 居然這麼多意思?
    【句子】When I feel threatened by a woman, I pull her in. I make her my best friend.   her擊穿;make her擊穿;best friend不完全爆破;【翻譯】當我覺得一個女的對我有威脅時,我會拉攏她。
  • Pull it off 原來是這個意思啊!?
    pull (something) off成功完成某事(尤指困難的事情
  • 多種玩法 2678神仙劫變態版定時活動嗨起來
    在2678《神仙劫》中當小夥伴們達到60級就可以參與雙倍護送、精英BOSS、釣魚活動、釣魚大賽、晚間瑤池等活動,有了這些精彩活動想不嗨都難!小夥伴們準備好了嗎?今天小編就為大家整理了其中的幾個活動,感興趣的往下看吧!
  • 另類玩法:選Excel下拉菜單,計算不同指標,且智能切換數字格式
    試過下拉菜單這種玩法嗎? 工作匯報中經常需要展示各種各樣的 KPI,同一批源數據要從各種維度進行計算,通常做法都是每個計算結果放一列。 其實完全可以做成一個下拉菜單,通過選擇菜單項,計算出所需的指標,並且還要顯示成合適的數據格式。
  • 自貢華商愛琴海購物公園盛大開業 單日36.4萬人次刷新多項客流記錄
    全新品牌,更新商圈品質升級圍繞「城市級全客層時尚購物公園」的項目定位,自貢華商愛琴海購物公園在品牌招商上亮點頻出,甄選了國內外200+知名品牌,匯聚了國際精品、潮流運動、娛樂體驗、美妝護膚、兒童教培、數碼科技、饕餮美食、品質配套等多種業態。
  • Pull one's leg是指「拽大腿」?這麼理解就尷尬了
    英文中有個有趣的表達"pull one's leg",如果理解錯的話,可是要鬧笑話的哦~有同學會說pull=拽,拉leg=腿連起來就是「拽某人大腿」啊真這麼理解可就大錯特錯啦,我們來看一下劍橋詞典的解釋吧:Pull one's leg:To tease or joke with someone
  • 和平精英地宮位置在哪 奇幻之旅地宮刷新點及玩法攻略
    很多玩家都不是很清楚,接下來小編為大家帶來一篇和平精英地宮在哪 奇幻之旅地宮刷新點及玩法講解。 特種兵們可通過進入經典模式-海島地圖體驗;進入遊戲後右下角有顯示[奇幻之旅] 一、地宮刷新點 地圖中將會出現四個固定的刷新點,其中P城左上方、研究所和洋房之間的地宮是類似的玩法
  • 辦公室英語謬誤(3):Refresh yourself
    Would you like to refresh yourself?  要不要上廁所?  (下午,在會議室裡,談話正好告一段落,也到了休息時間。提姆主任請張先生享用咖啡、蛋糕及點心。)  Tim: They just brought in refreshments.
  • 轉盤抽獎分享得積分,你是如何防止頁面被惡意刷新的
    惡意刷新惡意刷新就是不停的去刷新提交頁面,導致出現大量無效數據,這類問題在實際應用中我們經常遇到,比如一個活動的分享得積分,刷票,刷紅包等等,遇到這些問題,你是如何去防止的。當你在做一個刷紅包的活動,或者一個分享得積分的活動時,頻繁的被刷新會導致資料庫吃緊,嚴重時會導致系統死機。
  • 流行美語:pull soth. off; strike out
    這跟買球票有什麼關係?M: I said I struck out again. Struck out means that I failed after trying several times.L: 噢,我想起來了!棒球賽裡就有strike out這個說法。如果一個擊球手三次擊球不中,他就strike out, 也就是"三振出局"。
  • 運動季丨花樣跳繩的N種玩法,這所學校的孩子全都會~
    運動季丨花樣跳繩的N種玩法,這所學校的孩子全都會~ 2020-11-26 22:05 來源:澎湃新聞·澎湃號·媒體
  • pull up和pull over
    這裡給大家介紹一下美語中pull up,pull over的意思及區別。pull up:讓行駛中的車輛停下。例如:My father pulled up at the traffic lights.pull over:讓行駛中的車輛離開主路,靠邊停車。