有門道! UI設計中下拉刷新有什麼講究?

0
40

最早的下拉刷新設計源自於Tweetie 這款應用的設計,設計師Loren Brichter 是這種令人欲罷不能的交互的締造者。現在,下拉刷新的交互幾乎無處不在,但即便如此也讓人無法輕易忽視它帶來的快感。從Twitter 到 Gmail,從QQ到新浪微博,它幾乎存在於你觸手可及的每一個應用當中。

1
今天的文章我們來聊聊下拉刷新要注意的各種問題以及優化的技巧。

 

下拉刷新是怎麼運行的

簡而言之,下拉刷新是刷新指示器於下拉手勢想結合的產物,同時藉助下拉動效完善整個交互。

2
下拉刷新本質上是一種特定的手動刷新交互,和其他的同類操作不同的地方在於它採用了更加直覺的下拉操作。它的交互足夠清晰明顯,不過有的時候設計師依然會使用刷新指示器來顯示自動更新的內容。不過,由於自動刷新的機制不需要用戶進行任何操作,是因此自動刷新最好還是不要使用刷新指示器了。

 

什麼時候使用下拉刷新

滑動刷新(包括下拉刷新)非常適合於列表、柵格列表和卡片集合之類界面(按照時間降序排列)。這類界面通常會隨著時間推移,優先展示最新的內容,並且通常不會採用自動更新來刷新內容。不採用自動刷新的機制的原因很簡單,當你滾動到頂部的時候,如果採用自動刷新,內容會不斷自動下載顯示,對於用戶而言,這樣的自動顯示的機制並不可控。而下拉刷新則很好的解決了這個問題,只有在你使用下拉手勢的時候,觸髮刷新指示器,再行更新,這樣也給了用戶選擇和退出的機會。常見的下拉刷新用例:

3
·內容流(Twitter,微博,RSS)
·收件箱(電子郵件,短信)

以Twitter 為例,推文是按照時間順序排列,最新的推文在頂部,當用戶下拉刷新之後,能夠看到最新更新的推文。

 

什麼時候不適合下拉刷新

下拉刷新並非萬能的,它有不適宜使用的場景:
·屏幕小插件。這類小插件是需要自動更新的。

4
·地圖應用。地圖上的內容通常不會以時序排列,也沒有明確的方向和內容來源,用戶也無法直覺推斷出下拉刷新的含義。

5
·無序列表。有序列表通常能夠給用戶以下拉更新的期望,而無序列表在這方便則不明顯,也無法直觀地讓用戶看出其中的更新。
·低更新率的內容。如果列表中的內容並不經常更新,下拉刷新的手勢幾乎沒有存在的意義,因為用戶去刷新列表的機率很低,也沒有太大的必要。
·按照時間先後順序排列的內容。按照時間先後順序排列的列表中,最新更新的內容排在最後,用戶下拉刷新之後無法立刻看到最新更新的內容,這樣列表使用下拉刷新就相當尷尬了。
·特殊類型的內容。許多需要實時更新的內容會在短短一分鐘甚至更短的時間內失去時效,諸如股票、服務器後台進程之類的信息,最好使用實時自動更新。

 

如何設計刷新指示器的過渡效果

下拉刷新前後兩種狀態需要藉助過渡動效連接到一起,讓用戶了解界面到底發生了什麼改變。刷新指示器在兩種狀態過渡過程中一直存在,它一直保持可見,直到刷新完成,新的內容更新出來。

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

7

 

下拉刷新 vs. 刷新按鈕

許多設計師和開發者將下拉刷新視作為一種節省屏幕空間的方法,畢竟它無需像刷新按鈕一樣佔據一個固定按鈕的空間。但是它的問題也同樣很明顯,下拉刷新沒有刷新按鈕那麼明顯直觀,實現起來也更加麻煩。

8

 

刷新時長

當用戶手指在屏幕上向下滑動,手勢觸髮刷新指示器,以此為視覺反饋告知用戶系統已經收到請求了。下拉刷新的交互設計很大程度上是想讓用戶明白髮生了什麼,並確保程序能夠正常運行。當用戶熟悉下拉刷新的操作和交互的結果之後,會逐步信任這種交互。刷新指示器會持續旋轉,直到數據完全更新至可用,這樣可以防止混亂。

9

 

可用的動效

下拉刷新的過渡動效是一個非常適合發揮創意的地方。由於它是連接兩個不同狀態的中間態,過渡動效可用幫助用戶理解屏幕上發生了什麼,精準地理解兩個不同UI狀態之間的差別。

10

 

結語

下拉刷新推動著UI中的內容的更新變化,提供反饋,給予通知,有時候甚至能夠讓界面更加富於娛樂,更有意思。