2013-6-9 藍(lán)藍(lán)設(shè)計(jì)的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的設(shè)計(jì)機(jī)構(gòu) ,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
來源:http://www.yixieshi.com/ucd/13831.html
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
5月22日,Twitter正式宣布獲得了下拉刷新的技術(shù)專利,這項(xiàng)專利是在一年前提出的,雖然公司一再說明此項(xiàng)專利只用于保護(hù)自己,不會(huì)用來發(fā)起訴訟,但無疑這還是對(duì)行業(yè)來說是一個(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í),用戶會(huì)很自然地下拉查找更新的內(nèi)容,因此下拉刷新就顯得非常合理。
隨著下拉刷新這種方式的不斷演變,下拉刷新已經(jīng)跳出基礎(chǔ)功能,成為一種表現(xiàn)品牌、表現(xiàn)設(shè)計(jì)感的元素,本文主要介紹幾款有意思的下拉刷新。在收集過程中發(fā)現(xiàn),有一些應(yīng)用是把應(yīng)用類型巧妙地融合到了下拉刷新中;有很多應(yīng)用的下拉刷新都是滲透了品牌元素,包括logo的顏色、icon的形狀等等,另外還有一些就比較特別,是結(jié)合整個(gè)應(yīng)用的風(fēng)格去做了一些創(chuàng)新。因此本文把有趣的下拉刷新分為了三類來介紹。
第一類:與應(yīng)用類型相關(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ì)品牌有了更深刻的印象,非常有趣。
第二類:與品牌元素相關(guān)
當(dāng)看到一只藍(lán)色的小鳥,大家會(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)色圓圈開始轉(zhuǎn)動(dòng),相信Flickr的用戶對(duì)這兩個(gè)轉(zhuǎn)動(dòng)的小圈圈再熟悉不過。
再下面是Google的兩個(gè)例子,它們都是圍繞Google品牌色的黃紅綠藍(lán)來做文章,當(dāng)然不知道是不是因?yàn)槭怯刹煌块T分開設(shè)計(jì)開發(fā)的原因,Google+和Gmail的下拉刷新在形式上稍微有點(diǎn)差別,個(gè)人覺得Google+的四條彩帶相對(duì)而言稍顯夸張,比較喜歡Gmail里面折紙一樣不停翻轉(zhuǎn)的圈圈。
嗡嗡是螞蜂窩出品的旅行分享應(yīng)用,在下拉時(shí)候會(huì)出現(xiàn)一只振翅的小馬蜂,第一次進(jìn)來還搭配有馬蜂嗡嗡的聲音,生動(dòng)有趣。
想去是一個(gè)主推設(shè)計(jì)師市場(chǎng)的電商導(dǎo)購(gòu)類的網(wǎng)站,設(shè)計(jì)一直比較別致,非常對(duì)設(shè)計(jì)師胃口,這里給的圖不是下拉刷新而是加載更多,與品牌相關(guān)度比較高,覺得很有趣所以也就貼進(jìn)來了。Loading過程中會(huì)有一條魚蹦出來,想去logo就會(huì)像一條鯊魚游動(dòng)著追逐小魚,特別可愛。
第三類:特立獨(dú)行,我有我姿態(tài)
在手機(jī)側(cè),各種層出不窮的小應(yīng)用滿足著形形色色各種垂直化的需求,在設(shè)計(jì)方面大家也是想方設(shè)法去做一些創(chuàng)新,希望自己能夠在各種應(yīng)用中脫穎而出,下拉刷新也就自然而然成為了一個(gè)展現(xiàn)自己個(gè)性的地方。
Tumblr一直是一個(gè)勇于創(chuàng)新的應(yīng)用,從向上滑動(dòng)寫操作按鈕可以快速出拍照、向右滑動(dòng)快速進(jìn)入寫說說界面、多圖支持自由拖動(dòng)編輯等種種小細(xì)節(jié)的精心設(shè)計(jì)都可以看出來,各種嘗試令人眼前一亮。在下拉刷新這一塊,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)用把紙張的概念貫徹得非常好,寫操作是用一個(gè)動(dòng)畫飄出來一張紙,下拉刷新這里也采用了展開折紙的效果。
Timehop是一個(gè)可以整合自己各個(gè)平臺(tái)老照片的應(yīng)用,能夠很方便地跟朋友們分享你的那些美好時(shí)光,沒有研究過為什么他們的下拉刷新會(huì)出現(xiàn)一個(gè)表情俏皮、朝大家招手的恐龍,但是第一次看到的時(shí)候就覺得特別可愛有趣。
網(wǎng)易應(yīng)用中心的下拉刷新用了一個(gè)方塊在頁面上從左往右滾動(dòng),根據(jù)網(wǎng)速不同,方塊滾動(dòng)的速度會(huì)有差異,還挺特別的,如果網(wǎng)絡(luò)不給力或者刷新成功的提醒,都會(huì)有一個(gè)方塊從屏幕右側(cè)倒下來給出提醒。雖然不知道是不是技術(shù)問題,方塊在滾動(dòng)過程中會(huì)有一點(diǎn)點(diǎn)鋸齒,但這總的來說也算是一個(gè)特別的刷新嘗試。
總的來說,下拉刷新這一部分的細(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)用能夠在精致的路上,越走越好~
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.sillybuy.com