有故事的網(wǎng)頁(yè)設(shè)計(jì)——Flash網(wǎng)站奇妙之旅

0 評(píng)論 4970 瀏覽 0 收藏 14 分鐘

當(dāng)瀏覽網(wǎng)頁(yè)時(shí),總有那么一類(lèi)網(wǎng)站華麗而富有趣味性。在瀏覽信息的同時(shí),足夠讓我們眼前一亮。它們?cè)诔浞秩谌雱?dòng)畫(huà)、視頻、游戲、甚至是與眾不同的交互操作而使網(wǎng)站效果令人驚奇,這些基于flash設(shè)計(jì)的網(wǎng)站,讓網(wǎng)頁(yè)從平面變身立體,從靜態(tài)變得有故事有情節(jié)。?如果將fash技術(shù)用于個(gè)人作品集制作或者企業(yè)推廣時(shí),網(wǎng)頁(yè)設(shè)計(jì)便成為了一種有故事有情節(jié)的藝術(shù),它們是那樣富有活力而創(chuàng)意獨(dú)特。

下面讓我們隨著這些利用flash技術(shù)制作的網(wǎng)站,來(lái)一場(chǎng)奇妙的網(wǎng)絡(luò)旅行吧~~

一、新奇的loading頁(yè)

利用Flash技術(shù)制作的網(wǎng)站由于需要載入大量的美術(shù)和音樂(lè)素材而使loading時(shí)間變得很長(zhǎng),而此時(shí),與眾不同的設(shè)計(jì)可以使這個(gè)載入時(shí)間變得有趣,當(dāng)用戶等待時(shí)間中所有的操作變成網(wǎng)站體驗(yàn)的一部分,這便讓我們的訪問(wèn)之旅有了一個(gè)很酷的開(kāi)始。下面這些網(wǎng)站,便是擁有了一個(gè)很酷的loading頁(yè),讓我在茫茫的網(wǎng)站設(shè)計(jì)海洋中記住了他們。

1. ?http://bio-bak.nl/

這是荷蘭一個(gè)設(shè)計(jì)師的作品集網(wǎng)站。不得不說(shuō)loading頁(yè)那兩只欠扁掉毛還不停叨叨的鴨子看上去實(shí)在是太煩了,直接導(dǎo)致你想要用手把他們揍一頓,這個(gè)過(guò)程中l(wèi)oading的時(shí)間確實(shí)在不知不覺(jué)中就過(guò)去了。??另外一個(gè)亮點(diǎn)是 網(wǎng)頁(yè)中鼠標(biāo)移動(dòng)的過(guò)程很有趣,很多流暢的flash交互融入其中,讓你很快感覺(jué)到設(shè)計(jì)師是一個(gè)多么可愛(ài)的人。

2.?http://www.oddodesign.com/

Oddo design是一個(gè)網(wǎng)頁(yè)設(shè)計(jì)團(tuán)隊(duì)自己的網(wǎng)站,loading繪制了一輛公交車(chē)從起稿到完成的過(guò)程,很有趣。網(wǎng)站的設(shè)計(jì)從以行駛中的大巴車(chē)為世界觀的小世界開(kāi)始,每個(gè)用戶瀏覽的細(xì)節(jié)風(fēng)格都很統(tǒng)一很整體。

3.http://madeforeachother.com/

樂(lè)事食品的推廣網(wǎng)站。從屏幕邊遠(yuǎn)遠(yuǎn)跑來(lái)相互擁抱的的數(shù)字小人,組成了特別有愛(ài)的loading畫(huà)面。但這個(gè)網(wǎng)站的設(shè)計(jì)亮點(diǎn),不僅體現(xiàn)在loading頁(yè)上,之后的入場(chǎng)動(dòng)畫(huà)像是好萊塢動(dòng)畫(huà)大片片頭一樣炫麗。再后來(lái),進(jìn)入網(wǎng)站像是一個(gè)游戲世界一樣,從土壤下的生物世界、池塘里、火上小島、云上世界到宇宙空間,每一部分都像是游戲的一個(gè)關(guān)卡,將樂(lè)事薯片的系列動(dòng)畫(huà)廣告串聯(lián)起來(lái),娓娓道來(lái)。

4.?http://www.hf3.coca-cola.com/

說(shuō)到網(wǎng)站設(shè)計(jì)中好玩的loading頁(yè),我首先想到的就是這個(gè)可口可樂(lè)幸福工廠系列廣告的推廣網(wǎng)站。盡管這個(gè)網(wǎng)站已經(jīng)發(fā)布了一段時(shí)間,但是這絲毫不影響它頁(yè)面體驗(yàn)的有趣性。這個(gè)loading頁(yè)加入了用戶互動(dòng)的游戲概念,你需要將空瓶放在可樂(lè)機(jī)下方位置上以便能灌裝盡量多的可樂(lè),在loading的從1%到100%的過(guò)程中,灌裝完成越多的可樂(lè)越好。當(dāng)然,進(jìn)入網(wǎng)站后的畫(huà)面故事也非常有趣,延續(xù)了它幸福工廠的系列視頻廣告的感覺(jué),建造出了一個(gè)美好而龐大的可樂(lè)制作車(chē)間,整個(gè)瀏覽像觀賞一部動(dòng)畫(huà)大制作片子一樣。

二、特殊交互方式帶來(lái)的奇妙體驗(yàn)

有這樣一類(lèi)網(wǎng)站,它們?nèi)谌肓烁嘣慕换シ绞?,使用戶在瀏覽的過(guò)程中獲得不一樣的快感,讓網(wǎng)站的體驗(yàn)變得更加有趣,用戶的參與度也更高。

1.http://laplanete.sldimension.com/

設(shè)計(jì)師的個(gè)人網(wǎng)站。一進(jìn)入網(wǎng)站就可以感覺(jué)到設(shè)計(jì)師是個(gè)很有童心的家伙,網(wǎng)站啟動(dòng)頁(yè)是需要用戶制造爆炸的小操作,進(jìn)入頁(yè)面之后,制造的爆炸炸出了一個(gè)很可愛(ài)的的泥塑小星球,而用戶在進(jìn)行關(guān)于星球?yàn)g覽的操作感覺(jué)非常爽。

2.http://www.maxshaman.com/#/friends/

這是一個(gè)有意思的個(gè)人網(wǎng)站,看上去設(shè)計(jì)師是相當(dāng)豪放的人,不但不在乎陌生人用插小人的方式詛咒自己,反而還喜歡瀏覽者用這種方式表達(dá)對(duì)他的關(guān)注,于是,設(shè)計(jì)師在網(wǎng)頁(yè)上放了個(gè)破布頭小人,可以讓瀏覽者用針頭隨意虐待,同時(shí)還能看到設(shè)計(jì)師對(duì)此作出的痛苦反應(yīng)。有點(diǎn)暴力,但還是蠻有趣的。

3.http://www.bartleboglehegarty.com/#

一個(gè)設(shè)計(jì)團(tuán)隊(duì)的網(wǎng)站,盡管首頁(yè)同樣運(yùn)用了立體地球轉(zhuǎn)動(dòng)的動(dòng)畫(huà)小操作,但是當(dāng)響應(yīng)點(diǎn)擊后,地球的出現(xiàn)和消失轉(zhuǎn)場(chǎng)過(guò)程還是非常有新意的。

4.?http://www.matthiasdittrich.com/

這是一個(gè)運(yùn)用了三維空間互動(dòng)概念的網(wǎng)站,點(diǎn)擊后頁(yè)面轉(zhuǎn)場(chǎng)的三維效果過(guò)的很好,帶給人很流暢輕盈的科技感。這種三維感覺(jué)的應(yīng)用,帶給了人們不一樣的專場(chǎng)感受,將網(wǎng)站從非常具有平面感束縛中掙脫出來(lái)。

5.?http://soytuaire.labuat.com/

這是早前就看過(guò)的一個(gè)非常有意思的交互式網(wǎng)站,由鼠標(biāo)的位置決定了線型筆觸運(yùn)動(dòng)的方向。通過(guò)筆觸的生長(zhǎng),講述了一個(gè)流動(dòng)的畫(huà)面故事。整個(gè)網(wǎng)站呈現(xiàn)很迷人的水墨效果,中間由墨水滴落產(chǎn)生的動(dòng)畫(huà)也做得非常與眾不同。一直都覺(jué)得這算是非常經(jīng)典的flash動(dòng)畫(huà)網(wǎng)站。

6.http://www.arihirvonen.com/

同樣是一個(gè)設(shè)計(jì)師的個(gè)人網(wǎng)站,除了loading頁(yè)面中小人旋轉(zhuǎn)效果很酷外,網(wǎng)頁(yè)上設(shè)計(jì)師關(guān)于自己的介紹有個(gè)好玩的交互。整個(gè)網(wǎng)站設(shè)計(jì)讓我想起某個(gè)動(dòng)畫(huà)中關(guān)于科學(xué)怪人的故事。

三、融入動(dòng)畫(huà)元素,制造有趣的網(wǎng)站風(fēng)格

這些網(wǎng)站或擁有獨(dú)特的世界觀,或擁有個(gè)性十足的設(shè)計(jì)風(fēng)格,在充分融入了動(dòng)畫(huà)、游戲等元素之后,讓整個(gè)網(wǎng)站變成了一個(gè)不一樣的小世界。

1.http://okaydave.com/

設(shè)計(jì)師的個(gè)人站點(diǎn)網(wǎng)站,將自己的成長(zhǎng)經(jīng)歷、個(gè)人作品等全面的信息都囊括在了網(wǎng)站之中。很強(qiáng)的手繪風(fēng)格,整體看起來(lái)像一本內(nèi)容豐富的隨身速寫(xiě)本。首頁(yè)的點(diǎn)擊設(shè)計(jì)顯得非常獨(dú)特。利用很炫的動(dòng)畫(huà)效果讓鼠標(biāo)點(diǎn)擊后的響應(yīng)看上去像是科幻動(dòng)畫(huà)片轉(zhuǎn)場(chǎng)一樣。

2.http://www.escriba.es/base_en.html

這是一個(gè)可愛(ài)的站點(diǎn),整個(gè)網(wǎng)站設(shè)計(jì)看上去像一個(gè)蛋糕工廠,清新而童話般效果,不同風(fēng)味的蛋糕變換出了不同的蛋糕工廠,特殊的世界觀下,仿佛置身于一個(gè)美食世界。

3.http://www.xixinobanho.org.br/

今天介紹的網(wǎng)站中,這是個(gè)人最喜歡的一個(gè)網(wǎng)站,暖暖的小清新,點(diǎn)開(kāi)之后心情一下子就敞亮起來(lái)。載入畫(huà)面很贊,各個(gè)網(wǎng)頁(yè)的切換動(dòng)畫(huà)做的很用心很有創(chuàng)意。相信設(shè)計(jì)師一定是個(gè)溫暖的人,有孩子般純凈的微笑。

4.?http://www.happyingreenville.com/

盡管網(wǎng)站的畫(huà)面很隨意,像是很簡(jiǎn)單的手繪草圖,卻在頁(yè)面的切換間連成了好玩的故事,每個(gè)點(diǎn)擊的選擇都有對(duì)應(yīng)不同的鏡頭轉(zhuǎn)換。將一個(gè)網(wǎng)站當(dāng)作一個(gè)故事來(lái)整體制作,完整,飽滿。

5.http://scruffs-game.com/index.html

解密游戲游戲《史卡夫一家》的官網(wǎng),和很多國(guó)外游戲或電影大片的推廣網(wǎng)站一樣,制作精良且非常注重用戶體驗(yàn)的趣味性。畫(huà)面很精致,操作和頁(yè)面的切換都很流暢,讓人感覺(jué)很舒服。

6.?http://zzz.drinkzzz.com/

看上去像一個(gè)飲料廣告的推廣網(wǎng)站。網(wǎng)站頁(yè)面的載入做的像MTV開(kāi)場(chǎng),而后來(lái)點(diǎn)擊每個(gè)選項(xiàng)后的響應(yīng)都有趣,風(fēng)格很簡(jiǎn)約,但設(shè)計(jì)絕不簡(jiǎn)單。

7.http://www.starbuckscoffeeathome.com/

這是星巴克的一個(gè)推廣網(wǎng)站,和星巴克店面的設(shè)計(jì)風(fēng)格很想,亮點(diǎn)在于當(dāng)鼠標(biāo)落在中間插畫(huà)的位置會(huì)有神奇的效果出現(xiàn),華麗麗的漂亮。

8.http://food.barba.ru/

一個(gè)有點(diǎn)重口味的關(guān)于食物的網(wǎng)站,這樣的插畫(huà)風(fēng)格讓我想起保羅·德里森搞怪的動(dòng)畫(huà)短片,loading頁(yè)一出現(xiàn)就看著那個(gè)被面條捆綁的小人怎樣被一點(diǎn)點(diǎn)勒得快死掉。盡管有點(diǎn)血腥加惡心,但是這并不妨礙它絕對(duì)是一個(gè)非主流的好網(wǎng)站。

9.?http://www.andyfoulds.co.uk/flash_design.html

這是一個(gè)設(shè)計(jì)很干凈的個(gè)人作品網(wǎng)站,折紙效果的動(dòng)畫(huà)讓頁(yè)面切換變得很有意思。在整個(gè)網(wǎng)站的訪問(wèn)過(guò)程中,我一直有種在閱讀一本就畫(huà)冊(cè)或者是就照片集的感覺(jué)。

10.http://www.sectionseven.com/index2.html

好了,今天最后分享的一個(gè)網(wǎng)站同樣也是個(gè)人作品集站點(diǎn),它的亮點(diǎn)在于把作品集制作成冊(cè)的概念貫穿始末,設(shè)計(jì)師將自己的作品分類(lèi)制作成冊(cè),點(diǎn)擊之后會(huì)有很酷的翻頁(yè)效果,仿佛真的在翻閱一本作品冊(cè)一般。

(本文出自Tencent CDC Blog,轉(zhuǎn)載時(shí)請(qǐng)注明出處)

http://cdc.tencent.com/?p=3470

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!