轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   yvirxh.cn  )是一家專(zhuān)注而深入的設(shè)計(jì)機(jī)構(gòu) ，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來(lái)源：http://www.yixieshi.com/ucd/13831.html

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，   請(qǐng)點(diǎn)這里

　　5月22日，Twitter正式宣布獲得了下拉刷新的技術(shù)專(zhuān)利，這項(xiàng)專(zhuān)利是在一年前提出的，雖然公司一再說(shuō)明此項(xiàng)專(zhuān)利只用于保護(hù)自己，不會(huì)用來(lái)發(fā)起訴訟，但無(wú)疑這還是對(duì)行業(yè)來(lái)說(shuō)是一個(gè)威脅。

　　下拉刷新這個(gè)操作最早由Tweetie創(chuàng)始人洛倫?布里切特(Loren Brichter)發(fā)明，到現(xiàn)在已經(jīng)非常廣泛地在各種應(yīng)用中使用，Sparrow、Facebook、新浪微博、甚至是iOS原生系統(tǒng)也都在使用這種方式。有理論認(rèn)為，下拉刷新是一種適用于按照從新到舊的時(shí)間順序排列feeds的應(yīng)用，在這種應(yīng)用場(chǎng)景中看完舊的內(nèi)容時(shí)，用戶(hù)會(huì)很自然地下拉查找更新的內(nèi)容，因此下拉刷新就顯得非常合理。

　　隨著下拉刷新這種方式的不斷演變，下拉刷新已經(jīng)跳出基礎(chǔ)功能，成為一種表現(xiàn)品牌、表現(xiàn)設(shè)計(jì)感的元素，本文主要介紹幾款有意思的下拉刷新。在收集過(guò)程中發(fā)現(xiàn)，有一些應(yīng)用是把應(yīng)用類(lèi)型巧妙地融合到了下拉刷新中;有很多應(yīng)用的下拉刷新都是滲透了品牌元素，包括logo的顏色、icon的形狀等等，另外還有一些就比較特別，是結(jié)合整個(gè)應(yīng)用的風(fēng)格去做了一些創(chuàng)新。因此本文把有趣的下拉刷新分為了三類(lèi)來(lái)介紹。

　　第一類(lèi)：與應(yīng)用類(lèi)型相關(guān)

　　大家可以猜下這個(gè)應(yīng)用是做什么的，這是一個(gè)叫Cheeze的應(yīng)用，下拉時(shí)，界面會(huì)出現(xiàn)一個(gè)小老鼠，再往下拉小老鼠會(huì)掏出一個(gè)相機(jī)，松手之后咔嚓一下拍照。

　　根據(jù)老鼠的動(dòng)作，我想很容易聯(lián)想到這是一個(gè)照片分享應(yīng)用。這樣的下拉刷新設(shè)計(jì)，一方面?zhèn)鬟_(dá)了這個(gè)應(yīng)用的核心價(jià)值，另一方面也對(duì)品牌有了更深刻的印象，非常有趣。

　　第二類(lèi)：與品牌元素相關(guān)

　　當(dāng)看到一只藍(lán)色的小鳥(niǎo)，大家會(huì)很自然的想到Twitter;看到一個(gè)戴紅色圍巾的企鵝，大家會(huì)很自然地想到QQ;看到黃色中間帶Z的星星，大家也會(huì)想到QQ空間，這就是品牌的力量，在下拉刷新這個(gè)設(shè)計(jì)點(diǎn)上，有很多應(yīng)用在堅(jiān)持做自己的品牌推廣。

　　下圖是Flickr的下拉刷新，下拉時(shí)，首先出現(xiàn)Flickr水印，松手loading時(shí)，玫紅色和寶藍(lán)色圓圈開(kāi)始轉(zhuǎn)動(dòng)，相信Flickr的用戶(hù)對(duì)這兩個(gè)轉(zhuǎn)動(dòng)的小圈圈再熟悉不過(guò)。

　　再下面是Google的兩個(gè)例子，它們都是圍繞Google品牌色的黃紅綠藍(lán)來(lái)做文章，當(dāng)然不知道是不是因?yàn)槭怯刹煌块T(mén)分開(kāi)設(shè)計(jì)開(kāi)發(fā)的原因，Google+和Gmail的下拉刷新在形式上稍微有點(diǎn)差別，個(gè)人覺(jué)得Google+的四條彩帶相對(duì)而言稍顯夸張，比較喜歡Gmail里面折紙一樣不停翻轉(zhuǎn)的圈圈。

　　嗡嗡是螞蜂窩出品的旅行分享應(yīng)用，在下拉時(shí)候會(huì)出現(xiàn)一只振翅的小馬蜂，第一次進(jìn)來(lái)還搭配有馬蜂嗡嗡的聲音，生動(dòng)有趣。

　　想去是一個(gè)主推設(shè)計(jì)師市場(chǎng)的電商導(dǎo)購(gòu)類(lèi)的網(wǎng)站，設(shè)計(jì)一直比較別致，非常對(duì)設(shè)計(jì)師胃口，這里給的圖不是下拉刷新而是加載更多，與品牌相關(guān)度比較高，覺(jué)得很有趣所以也就貼進(jìn)來(lái)了。Loading過(guò)程中會(huì)有一條魚(yú)蹦出來(lái)，想去logo就會(huì)像一條鯊魚(yú)游動(dòng)著追逐小魚(yú)，特別可愛(ài)。

　　第三類(lèi)：特立獨(dú)行，我有我姿態(tài)

　　在手機(jī)側(cè)，各種層出不窮的小應(yīng)用滿(mǎn)足著形形色色各種垂直化的需求，在設(shè)計(jì)方面大家也是想方設(shè)法去做一些創(chuàng)新，希望自己能夠在各種應(yīng)用中脫穎而出，下拉刷新也就自然而然成為了一個(gè)展現(xiàn)自己個(gè)性的地方。

　　Tumblr一直是一個(gè)勇于創(chuàng)新的應(yīng)用，從向上滑動(dòng)寫(xiě)操作按鈕可以快速出拍照、向右滑動(dòng)快速進(jìn)入寫(xiě)說(shuō)說(shuō)界面、多圖支持自由拖動(dòng)編輯等種種小細(xì)節(jié)的精心設(shè)計(jì)都可以看出來(lái)，各種嘗試令人眼前一亮。在下拉刷新這一塊，Tumblr采用了iOS比較系統(tǒng)的方式，創(chuàng)新點(diǎn)在loading時(shí)，有三個(gè)小方塊呼吸態(tài)躍動(dòng)，這三個(gè)躍動(dòng)的小方塊貫穿了Tumblr整個(gè)應(yīng)用的刷新操作，比較有意思。

　　Twittelator是Twitter的一個(gè)第三方應(yīng)用，整個(gè)應(yīng)用把紙張的概念貫徹得非常好，寫(xiě)操作是用一個(gè)動(dòng)畫(huà)飄出來(lái)一張紙，下拉刷新這里也采用了展開(kāi)折紙的效果。

　　Timehop是一個(gè)可以整合自己各個(gè)平臺(tái)老照片的應(yīng)用，能夠很方便地跟朋友們分享你的那些美好時(shí)光，沒(méi)有研究過(guò)為什么他們的下拉刷新會(huì)出現(xiàn)一個(gè)表情俏皮、朝大家招手的恐龍，但是第一次看到的時(shí)候就覺(jué)得特別可愛(ài)有趣。

　　網(wǎng)易應(yīng)用中心的下拉刷新用了一個(gè)方塊在頁(yè)面上從左往右滾動(dòng)，根據(jù)網(wǎng)速不同，方塊滾動(dòng)的速度會(huì)有差異，還挺特別的，如果網(wǎng)絡(luò)不給力或者刷新成功的提醒，都會(huì)有一個(gè)方塊從屏幕右側(cè)倒下來(lái)給出提醒。雖然不知道是不是技術(shù)問(wèn)題，方塊在滾動(dòng)過(guò)程中會(huì)有一點(diǎn)點(diǎn)鋸齒，但這總的來(lái)說(shuō)也算是一個(gè)特別的刷新嘗試。

　　總的來(lái)說(shuō)，下拉刷新這一部分的細(xì)節(jié)設(shè)計(jì)，可以是傳達(dá)產(chǎn)品價(jià)值、推廣品牌理念的一個(gè)機(jī)會(huì)，精心做一些特別一點(diǎn)的設(shè)計(jì)，就可以讓大家記住你。所以，我們可以在以后的產(chǎn)品設(shè)計(jì)中，把握好產(chǎn)品大方向的同時(shí)，兼顧一些這種小細(xì)節(jié)設(shè)計(jì)，把我們的品牌元素和產(chǎn)品價(jià)值的東西能夠成為產(chǎn)品的一些小亮點(diǎn)，讓我們的應(yīng)用能夠在精致的路上，越走越好~