UI設計中下拉刷新的巧妙運用

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

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

下拉刷新是怎么運行的

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

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

什么時候使用下拉刷新

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

·內容流(Twitter,微博,RSS)

·收件箱(電子郵件,短信)

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

什么時候不適合下拉刷新

下拉刷新并非處處都需要的,它有不適宜使用的場景:

·屏幕小插件。這類小插件是需要自動更新的。

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

·無序列表。有序列表通常能夠給用戶以下拉更新的期望,而無序列表在這方面則不明顯,也無法直觀地讓用戶看出其中的更新。

·低更新率的內容。如果列表中的內容并不經常更新,下拉刷新的功能幾乎沒有存在的意義,因為用戶去刷新列表的機率很低,也沒有太大的必要。

·按照時間先后順序排列的內容。按照時間先后順序排列的列表中,最新更新的內容排在最后,用戶下拉刷新之后無法立刻看到最新更新的內容,這樣列表使用下拉刷新就相當尷尬了。

·特殊類型的內容。許多需要實時更新的內容會在短短一分鐘甚至更短的時間內失去時效,諸如股票、服務器后臺進程之類的信息,最好使用實時自動更新。

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

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

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

下拉刷新 vs. 刷新按鈕

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

下拉刷新適用于列表內容,而刷新按鈕也適用于列表內容,但也可以在一些無法滑動的界面中使用,適用范圍較廣,這就需要設計師去衡量了。

刷新時長

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

可用的動效

下拉刷新的過渡動效是一個非常適合發揮創意的地方。由于它是連接兩個不同狀態的中間態,過渡動效可幫助用戶理解屏幕上發生了什么,精準地理解兩個不同UI狀態之間的差別。如今眾多的app中都把刷新時的動效設計得十分有趣醒目,讓用戶有眼前一亮的感覺。

結語

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,563評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,694評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,672評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,965評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,690評論 6 413
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,019評論 1 329
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,013評論 3 449
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,188評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,718評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,438評論 3 360
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,667評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,149評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,845評論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,252評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,590評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,384評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,635評論 2 380

推薦閱讀更多精彩內容