UI設(shè)計(jì)中下拉刷新有什么講究?
最早的下拉刷新設(shè)計(jì)源自于Tweetie 這款應(yīng)用的設(shè)計(jì),設(shè)計(jì)師Loren Brichter 是這種令人欲罷不能的交互的締造者?,F(xiàn)在,下拉刷新的交互幾乎無處不在,但即便如此也讓人無法輕易忽視它帶來的快感。從Twitter 到 Gmail,從QQ到新浪微博,它幾乎存在于你觸手可及的每一個(gè)應(yīng)用當(dāng)中。
今天的文章我們來聊聊下拉刷新要注意的各種問題以及優(yōu)化的技巧。
下拉刷新是怎么運(yùn)行的
簡而言之,下拉刷新是刷新指示器于下拉手勢想結(jié)合的產(chǎn)物,同時(shí)借助下拉動效完善整個(gè)交互。
下拉刷新本質(zhì)上是一種特定的手動刷新交互,和其他的同類操作不同的地方在于它采用了更加直覺的下拉操作。它的交互足夠清晰明顯,不過有的時(shí)候設(shè)計(jì)師依然會使用刷新指示器來顯示自動更新的內(nèi)容。不過,由于自動刷新的機(jī)制不需要用戶進(jìn)行任何操作,是因此自動刷新最好還是不要使用刷新指示器了。
什么時(shí)候使用下拉刷新
滑動刷新(包括下拉刷新)非常適合于列表、柵格列表和卡片集合之類界面(按照時(shí)間降序排列)。這類界面通常會隨著時(shí)間推移,優(yōu)先展示最新的內(nèi)容,并且通常不會采用自動更新來刷新內(nèi)容。不采用自動刷新的機(jī)制的原因很簡單,當(dāng)你滾動到頂部的時(shí)候,如果采用自動刷新,內(nèi)容會不斷自動下載顯示,對于用戶而言,這樣的自動顯示的機(jī)制并不可控。而下拉刷新則很好的解決了這個(gè)問題,只有在你使用下拉手勢的時(shí)候,觸發(fā)刷新指示器,再行更新,這樣也給了用戶選擇和退出的機(jī)會。常見的下拉刷新用例:
- 內(nèi)容流(Twitter,微博,RSS)
- 收件箱(電子郵件,短信)
以Twitter 為例,推文是按照時(shí)間順序排列,最新的推文在頂部,當(dāng)用戶下拉刷新之后,能夠看到最新更新的推文。
什么時(shí)候不適合下拉刷新
下拉刷新并非萬能的,它有不適宜使用的場景:
- 屏幕小插件。這類小插件是需要自動更新的。
- 地圖應(yīng)用。地圖上的內(nèi)容通常不會以時(shí)序排列,也沒有明確的方向和內(nèi)容來源,用戶也無法直覺推斷出下拉刷新的含義。
- 無序列表。有序列表通常能夠給用戶以下拉更新的期望,而無序列表在這方便則不明顯,也無法直觀地讓用戶看出其中的更新。
- 低更新率的內(nèi)容。如果列表中的內(nèi)容并不經(jīng)常更新,下拉刷新的手勢幾乎沒有存在的意義,因?yàn)橛脩羧ニ⑿铝斜淼臋C(jī)率很低,也沒有太大的必要。
- 按照時(shí)間先后順序排列的內(nèi)容。按照時(shí)間先后順序排列的列表中,最新更新的內(nèi)容排在最后,用戶下拉刷新之后無法立刻看到最新更新的內(nèi)容,這樣列表使用下拉刷新就相當(dāng)尷尬了。
- 特殊類型的內(nèi)容。許多需要實(shí)時(shí)更新的內(nèi)容會在短短一分鐘甚至更短的時(shí)間內(nèi)失去時(shí)效,諸如股票、服務(wù)器后臺進(jìn)程之類的信息,最好使用實(shí)時(shí)自動更新。
如何設(shè)計(jì)刷新指示器的過渡效果
下拉刷新前后兩種狀態(tài)需要借助過渡動效連接到一起,讓用戶了解界面到底發(fā)生了什么改變。刷新指示器在兩種狀態(tài)過渡過程中一直存在,它一直保持可見,直到刷新完成,新的內(nèi)容更新出來。
值得注意的是,在刷新過程中,哪怕用戶針對界面有所操作,刷新指示器也不能隱藏,否則它作為指示器的作用就失去意義了。
下拉刷新 vs. 刷新按鈕
許多設(shè)計(jì)師和開發(fā)者將下拉刷新視作為一種節(jié)省屏幕空間的方法,畢竟它無需像刷新按鈕一樣占據(jù)一個(gè)固定按鈕的空間。但是它的問題也同樣很明顯,下拉刷新沒有刷新按鈕那么明顯直觀,實(shí)現(xiàn)起來也更加麻煩。
刷新時(shí)長
當(dāng)用戶手指在屏幕上向下滑動,手勢觸發(fā)刷新指示器,以此為視覺反饋告知用戶系統(tǒng)已經(jīng)收到請求了。下拉刷新的交互設(shè)計(jì)很大程度上是想讓用戶明白發(fā)生了什么,并確保程序能夠正常運(yùn)行。當(dāng)用戶熟悉下拉刷新的操作和交互的結(jié)果之后,會逐步信任這種交互。刷新指示器會持續(xù)旋轉(zhuǎn),直到數(shù)據(jù)完全更新至可用,這樣可以防止混亂。
可用的動效
下拉刷新的過渡動效是一個(gè)非常適合發(fā)揮創(chuàng)意的地方。由于它是連接兩個(gè)不同狀態(tài)的中間態(tài),過渡動效可用幫助用戶理解屏幕上發(fā)生了什么,精準(zhǔn)地理解兩個(gè)不同UI狀態(tài)之間的差別。
結(jié)語
下拉刷新推動著UI中的內(nèi)容的更新變化,提供反饋,給予通知,有時(shí)候甚至能夠讓界面更加富于娛樂,更有意思。
譯文來自:優(yōu)設(shè)
譯者:@陳子木
原文地址:uxplanet
原文作者:Nick Babich
教程里的GIF一般是用什么軟件實(shí)現(xiàn)呀
程序表示難度很大,做不了
一般用什么軟件做下拉動效呢?ae嗎?
一般下拉刷新的動畫是兩種方式實(shí)現(xiàn)的。程控動畫(比如分為下拉入場、刷新、退場等過程的),還有簡單的GIF動畫??闯绦騿T的水平能力了。
最下面的這個(gè)動態(tài)交互 我看了10多遍 太有意思了
最后一個(gè)案例很有創(chuàng)意,好玩~