最早的下拉刷新設(shè)計(jì)源自于Tweetie 這款應(yīng)用的設(shè)計(jì)，設(shè)計(jì)師Loren Brichter 是這種令人欲罷不能的交互的締造者?，F(xiàn)在，下拉刷新的交互幾乎無(wú)處不在，但即便如此也讓人無(wú)法輕易忽視它帶來(lái)的快感。從Twitter 到 Gmail，從QQ到新浪微博，它幾乎存在于你觸手可及的每一個(gè)應(yīng)用當(dāng)中。

今天的文章我們來(lái)聊聊下拉刷新要注意的各種問題以及優(yōu)化的技巧。

下拉刷新是怎么運(yùn)行的

簡(jiǎn)而言之，下拉刷新是刷新指示器于下拉手勢(shì)想結(jié)合的產(chǎn)物，同時(shí)借助下拉動(dòng)效完善整個(gè)交互。

下拉刷新本質(zhì)上是一種特定的手動(dòng)刷新交互，和其他的同類操作不同的地方在于它采用了更加直覺的下拉操作。它的交互足夠清晰明顯，不過有的時(shí)候設(shè)計(jì)師依然會(huì)使用刷新指示器來(lái)顯示自動(dòng)更新的內(nèi)容。不過，由于自動(dòng)刷新的機(jī)制不需要用戶進(jìn)行任何操作，是因此自動(dòng)刷新最好還是不要使用刷新指示器了。

什么時(shí)候使用下拉刷新

滑動(dòng)刷新（包括下拉刷新）非常適合于列表、柵格列表和卡片集合之類界面（按照時(shí)間降序排列）。這類界面通常會(huì)隨著時(shí)間推移，優(yōu)先展示最新的內(nèi)容，并且通常不會(huì)采用自動(dòng)更新來(lái)刷新內(nèi)容。不采用自動(dòng)刷新的機(jī)制的原因很簡(jiǎn)單，當(dāng)你滾動(dòng)到頂部的時(shí)候，如果采用自動(dòng)刷新，內(nèi)容會(huì)不斷自動(dòng)下載顯示，對(duì)于用戶而言，這樣的自動(dòng)顯示的機(jī)制并不可控。而下拉刷新則很好的解決了這個(gè)問題，只有在你使用下拉手勢(shì)的時(shí)候，觸發(fā)刷新指示器，再行更新，這樣也給了用戶選擇和退出的機(jī)會(huì)。常見的下拉刷新用例：

• 內(nèi)容流（Twitter，微博，RSS）
• 收件箱（電子郵件，短信）

以Twitter 為例，推文是按照時(shí)間順序排列，最新的推文在頂部，當(dāng)用戶下拉刷新之后，能夠看到最新更新的推文。

什么時(shí)候不適合下拉刷新

下拉刷新并非萬(wàn)能的，它有不適宜使用的場(chǎng)景：

• 屏幕小插件。這類小插件是需要自動(dòng)更新的。

• 地圖應(yīng)用。地圖上的內(nèi)容通常不會(huì)以時(shí)序排列，也沒有明確的方向和內(nèi)容來(lái)源，用戶也無(wú)法直覺推斷出下拉刷新的含義。

• 無(wú)序列表。有序列表通常能夠給用戶以下拉更新的期望，而無(wú)序列表在這方便則不明顯，也無(wú)法直觀地讓用戶看出其中的更新。
• 低更新率的內(nèi)容。如果列表中的內(nèi)容并不經(jīng)常更新，下拉刷新的手勢(shì)幾乎沒有存在的意義，因?yàn)橛脩羧ニ⑿铝斜淼臋C(jī)率很低，也沒有太大的必要。
• 按照時(shí)間先后順序排列的內(nèi)容。按照時(shí)間先后順序排列的列表中，最新更新的內(nèi)容排在最后，用戶下拉刷新之后無(wú)法立刻看到最新更新的內(nèi)容，這樣列表使用下拉刷新就相當(dāng)尷尬了。
• 特殊類型的內(nèi)容。許多需要實(shí)時(shí)更新的內(nèi)容會(huì)在短短一分鐘甚至更短的時(shí)間內(nèi)失去時(shí)效，諸如股票、服務(wù)器后臺(tái)進(jìn)程之類的信息，最好使用實(shí)時(shí)自動(dòng)更新。

如何設(shè)計(jì)刷新指示器的過渡效果

下拉刷新前后兩種狀態(tài)需要借助過渡動(dòng)效連接到一起，讓用戶了解界面到底發(fā)生了什么改變。刷新指示器在兩種狀態(tài)過渡過程中一直存在，它一直保持可見，直到刷新完成，新的內(nèi)容更新出來(lái)。

值得注意的是，在刷新過程中，哪怕用戶針對(duì)界面有所操作，刷新指示器也不能隱藏，否則它作為指示器的作用就失去意義了。

下拉刷新 vs. 刷新按鈕

許多設(shè)計(jì)師和開發(fā)者將下拉刷新視作為一種節(jié)省屏幕空間的方法，畢竟它無(wú)需像刷新按鈕一樣占據(jù)一個(gè)固定按鈕的空間。但是它的問題也同樣很明顯，下拉刷新沒有刷新按鈕那么明顯直觀，實(shí)現(xiàn)起來(lái)也更加麻煩。

刷新時(shí)長(zhǎng)

當(dāng)用戶手指在屏幕上向下滑動(dòng)，手勢(shì)觸發(fā)刷新指示器，以此為視覺反饋告知用戶系統(tǒng)已經(jīng)收到請(qǐng)求了。下拉刷新的交互設(shè)計(jì)很大程度上是想讓用戶明白發(fā)生了什么，并確保程序能夠正常運(yùn)行。當(dāng)用戶熟悉下拉刷新的操作和交互的結(jié)果之后，會(huì)逐步信任這種交互。刷新指示器會(huì)持續(xù)旋轉(zhuǎn)，直到數(shù)據(jù)完全更新至可用，這樣可以防止混亂。

可用的動(dòng)效

下拉刷新的過渡動(dòng)效是一個(gè)非常適合發(fā)揮創(chuàng)意的地方。由于它是連接兩個(gè)不同狀態(tài)的中間態(tài)，過渡動(dòng)效可用幫助用戶理解屏幕上發(fā)生了什么，精準(zhǔn)地理解兩個(gè)不同UI狀態(tài)之間的差別。

結(jié)語(yǔ)

下拉刷新推動(dòng)著UI中的內(nèi)容的更新變化，提供反饋，給予通知，有時(shí)候甚至能夠讓界面更加富于娛樂，更有意思。

譯文來(lái)自：優(yōu)設(shè)

譯者：@陳子木

原文地址：uxplanet

原文作者：Nick Babich