編輯導語：現(xiàn)在，下拉刷新的交互幾乎無處不在，但即便如此也讓人無法輕易忽視它帶來的快感。從QQ到新浪微博，它幾乎存在于你觸手可及的每一個應用當中。下拉除了刷新外，你還知道有哪些玩法？本文從下拉刷新的起源開始，詳細地為大家介紹了下拉的各種玩法。感興趣的盆友一起來看看吧。

“下拉刷新專利由推特擁有，但我想任何人都不用為此擔心。-Loren Brichter ”

據(jù)說這種交互是前蘋果設計師L.B.設計Tweetie應用時締造的，現(xiàn)在從推特到QQ，下拉刷新已經(jīng)成為普適的體驗，它幾乎存在于你手機里的每一個APP中。

一、手勢交互：刷新動作依附用戶直覺

最早在PC時代用戶需要退出頁面重新進入來刷新內(nèi)容，2008 iPhone興起時，出現(xiàn)了以按鈕點擊刷新的主流設計。但設計師是會不斷追求更好的用戶體驗，于是兩年后“下拉刷新”出現(xiàn)了。

▲專利文件（2010）

1. 直覺手勢兼具視覺反饋

下拉刷新是刷新指示器與下拉手勢相結合的產(chǎn)物，同時借助下拉動效完善整個交互。下拉刷新本質(zhì)上是一種特定的手動刷新行為，和其他同類操作差異在于采用了更加直覺的手勢。

▲Andriod系統(tǒng)

二、情感設計：細膩體驗提升產(chǎn)品認同

下拉刷新發(fā)展至今除了手勢以外，從下拉到完成刷新的過程中，畫面、文案、動效都是設計師創(chuàng)造差異化體驗的手段，任何一種元素，都可能是傳遞調(diào)性的最好機會。

1. 圖標動效：加深產(chǎn)品類型印象

韓國的外賣APP（?????）通過有趣生動的食物圖標，讓用戶在下拉過程中具有很強的控制感，通過控制滾輪中的食物圖標進行釋放，完成交替滾動效果的播放。

很好的將產(chǎn)品外賣屬性與下拉刷新的交互手勢融合，讓用戶將產(chǎn)品“玩”了起來。

▲?????（外賣民族） APP首頁

2. 隨機文案：持續(xù)傳遞知識服務

丁香醫(yī)生APP下拉刷新的加載過程中，將走心的文案融入情感化設計中；給用戶傳遞健康知識的同時以實現(xiàn)與用戶情感層次的交流。拉進與用戶之間的距離，讓用戶能夠持續(xù)感受產(chǎn)品帶來的溫度。

▲丁香醫(yī)生 APP首頁

3. 活動宣傳：強化代言人形象連結

SSG MART在下拉過程中，將代言人的形象進行了很好的結合，并通過人物“說”出了一些需要表達的信息，很好的利用了代言人的形象幫助產(chǎn)品進行品牌心智的傳播。

▲SSG MART APP首頁

三、工具設計：塑造進階的刷新心智

在不影響當前內(nèi)容的前提，下拉出更多相關內(nèi)容或可對當前頁面進行管理，將下拉刷新打造成進階工具的心智。

1. 刷出新內(nèi)容：多維度推薦引導用戶繼續(xù)看

抽屜新熱榜APP在下拉刷新時，結合彈性微動效和震動反饋，像抽屜?樣“抽出”更多的內(nèi)容資訊；同時下拉過程中配合表情和隨機有趣的文案，進一步增強趣味性。

▲抽屜新熱榜 APP首頁

虎嗅APP通過下拉刷出今日神評論，讓用戶發(fā)現(xiàn)每天最有熱度的評論，并產(chǎn)生瀏覽興趣點擊進入瀏覽相應的文章，也為產(chǎn)品中的內(nèi)容起到很好的引流作用。

▲虎嗅 APP資訊頁

微信讀書下拉進入書城，利用下拉刷新透出更多內(nèi)容，推薦更多書籍在用戶心理上過度比較自然，合理利用了空間去進行服務拓展和延伸。

▲微信讀書 APP書架

2. 刷出多工具：打造固定的管理入口印象

手淘在首頁下拉刷新操作時，繼續(xù)下拉進入二樓，展示常用的應用頻道，用戶也可自由添加編輯，聚焦于用戶的喜好，提供更高的自由度，也使更多元產(chǎn)品能曝光。

▲淘寶 APP首頁

NAVER在下拉刷新中也將固定的工具入口進行了結合，為用戶提供了工具化的服務，用戶可在特定場景中快速使用所需要使用的功能解決效率問題。

▲NAVER APP搜索頁

Netflix APP則是考慮到用戶繼續(xù)觀看視頻的需求，于首頁提供了下拉繼續(xù)觀看的捷徑，在保證首屏推薦視頻占據(jù)大面積曝光的同時，也讓用戶更便捷。

▲Netflix APP首頁

四、營銷設計：玩出產(chǎn)品花樣新空間

效率總是各大應用首頁的重要考量，在嚴絲合縫的排版里，下拉刷新出的空間成為了調(diào)性宣傳的新機會。

1. 頁面二樓：品牌活動調(diào)性宣傳

餓了么的二樓設計以生動有趣為目標，展示動態(tài)的廣告圖文、視頻內(nèi)容、互動營銷內(nèi)容。使用戶更有新鮮感，同時也拓展了一個新的業(yè)務營銷場景。

▲餓了么 APP首頁

隨著商家對品牌營銷的要求提高，淘寶在固定的店鋪框架，提供了下拉進入二樓的功能，作為品牌在商品貨架以外的宣傳空間，可以將視頻、H5互動展示給用戶。

▲淘寶APP店鋪二樓品牌Zone

?2. 頁面地下室：產(chǎn)品附屬心智傳遞

支付寶作為金融屬性為導向的功能聚合平臺，二樓設計可能對于用戶的使用場景的穩(wěn)定性有干擾，所以支付寶通過一種新的交互創(chuàng)意方式，滑動頁面置于底部引出“地下室”的場景，也是另一種二層樓設計的延伸概念。

▲支付寶APP首頁地下室

五、體驗延伸：下拉結合主心智交互

前面的案例都是在“下拉到放開”之間或之后，呈現(xiàn)更多內(nèi)容或信息來給到用戶更多選擇的體驗，是在產(chǎn)品主要心智外提供附屬的功能。

其實還有一種交互，是將產(chǎn)品主要心智與下拉手勢結合，培養(yǎng)用戶下拉習慣來提高APP體驗流暢度。

1. 下拉觸發(fā)主操作：使用核心功能更方便

Clear將下拉手勢與“新建”操作結合，用戶通過控制下拉的力度進入不同頁面，得到不同的功能反饋。

整個產(chǎn)品的設計理念的也很大膽，頁面中除了卡片list沒有任何多余的元素，所有功能都是通過下拉和滑動的手勢去控制完成。

▲Clear APP下拉結合左右滑動：提供更多主要功能

Google Chrome瀏覽器認為用戶操作頁面關鍵目的“新開/刷新/關閉”，三者可以與下拉刷新結合對用戶的心智會更為自然，操作只要“1步”，比Apple Safari進行同樣的3個功能要“5步”來得更為快捷。

▲Google Chrome APP

從簡單的手勢到進入有趣的空間，我們可以看到在這10年間許多巧思不僅僅停留在簡單的下拉交互，其中蘊含著從情感、工具到營銷空間等等不同設計巧思。

相信下拉刷新的設計會持續(xù)發(fā)展各種豐富且細膩的體驗，也讓我們期待接下來還會有什么有意思的設計吧！

作者：你宇老師 Hales；公眾號：淘寶設計

原文鏈接：https://mp.weixin.qq.com/s/obY-p5xgNOn8yfZOA-9HxQ

本文由 @淘寶設計 授權發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉載。

題圖來自 pexels，基于CC0協(xié)議。