另辟蹊徑談創(chuàng)新

0 評論 10042 瀏覽 2 收藏 23 分鐘

提到網(wǎng)頁設(shè)計,最先想到的是當(dāng)今主流的韓國設(shè)計和扁平化設(shè)計,當(dāng)然個性化排版、視頻代替文本、全屏大視野、滾動視差、多平臺全適應(yīng)等設(shè)計形式已經(jīng)進(jìn) 入了我們的視野。西方簡單、功能性的美學(xué)精神“少即是多”這一設(shè)計理念攻占了我們的大腦,很多時候,在開始做設(shè)計之前腦子里會來回浮現(xiàn)這些風(fēng)格的設(shè)計。那 么,怎樣在主流設(shè)計方式中做出有自己特色的網(wǎng)站呢?我們從以下幾點介紹在大環(huán)境下提升網(wǎng)站設(shè)計形式的方法。

賦予民族文化特點

在眾多的設(shè)計師追逐主流風(fēng)格的同時,民族文化感覺的設(shè)計越來越少,不光在國內(nèi),在世界各地都出現(xiàn)了這 樣的情況。當(dāng)然不可否認(rèn)還有很多設(shè)計師在為民族設(shè)計而努力。下面這幾個站點雖然只有簡單的設(shè)計和動態(tài)效果,但是卻有一種非常淳樸的民族風(fēng)格,這也是最吸引 人的地方,每個細(xì)節(jié)都流露出民族的特點和氣氛。不是只有文化性質(zhì)的網(wǎng)站才能賦予文化設(shè)計風(fēng)格,在商業(yè)產(chǎn)品類型的設(shè)計推廣中同樣適用。

日本眼藥水網(wǎng)站,將現(xiàn)代工業(yè)社會的產(chǎn)物與傳統(tǒng)鬼神文化中的五種妖怪以卷軸、插畫傳統(tǒng)形式展示,與漫天遍地的明星代言廣告形成對比,同樣是眼干、眼澀、眼疲勞,同樣是以辦公室、上班族為消費群,文化創(chuàng)意上的突破使人眼前一亮。

 

和風(fēng)服裝店,日本特色的風(fēng)鈴、簡約的插畫,“和風(fēng)”,大和民族追求與自然的和諧之美,從這個服裝網(wǎng)站上我們可以看到日本設(shè)計文化體現(xiàn)了對自然的尊重,反映了樸素美學(xué)的內(nèi)斂性格。

 

緬甸傳統(tǒng)舞蹈音樂合奏網(wǎng)站,緬甸古代戲劇舞蹈,是從緬甸傀儡戲、古典戲劇及阿迎舞等古典藝術(shù)中產(chǎn)生的。傀儡戲中的一些節(jié)目和各種傀儡角色的不同的舞 蹈動作被大量移植到現(xiàn)代緬甸舞中??芪柚小翱懿健?、“傀儡爬跳”等成為現(xiàn)代緬甸舞的基本動作,是文化多樣性的輝煌繼承。黑白圖片和大面積留白的海報設(shè) 計形式,突出舞蹈者主體,用在網(wǎng)站上更顯神秘。

 

俄羅斯莫斯科大劇院是莫斯科的地標(biāo)性建筑之一,是莫斯科有名的芭蕾舞與歌劇劇院;是俄羅斯歷史最悠久的劇院,享譽(yù)天下,是世界上最著名的劇院之一。 它不僅繼承了歐洲芭蕾的歷史傳統(tǒng),更重要的是,在俄羅斯豐富的民族音樂與舞蹈的沃土上,建立和發(fā)展了自己的芭蕾體系。將沙俄古典風(fēng)格融匯于設(shè)計版塊中,同 樣大量留白處理給了圖片展示更多的空間。

 

與網(wǎng)站主題相關(guān)的高清圖片的應(yīng)用

大面積整站或局部性使用高清圖片,在之前設(shè)計分享中我們見到了很多案例,這里介紹幾個日本以圖片展示為主的網(wǎng)站,精致的圖片不需要過多的裝飾。

坂本龍一是日本當(dāng)代最讓人尊崇的音樂家之一,音樂領(lǐng)域涉獵甚廣,在先鋒電子樂領(lǐng)域擁有特殊地位。代表作有《Merry Christmas Mr. Lawrence》《末代皇帝》《遮蔽的天空》《桃太郎》《高跟鞋》等,為1992年巴塞羅那奧運會開幕式譜曲并擔(dān)任指揮……坂本龍一成為“大眾明星”的 原因,一方面在于他個人對于電子、搖滾、爵士等多重音樂風(fēng)格極具靈感的把握;另一方面則在于他能在商業(yè)、藝術(shù)和實驗之間找到平衡點,作出既有實驗意義又有 動聽旋律的作品。

日本設(shè)計強(qiáng)調(diào)材料的內(nèi)在之美,注重與大自然的和諧,珍惜自然材質(zhì),這與日本自然資源相對稀缺有很大的關(guān)系。日式風(fēng)格中,回歸自然是最大的特色,推崇貼近自然、強(qiáng)調(diào)自然主義,讓使用者有置身自然的感覺。用產(chǎn)品的工藝制作圖片作為網(wǎng)站的主體和背景,拉近了觀者與產(chǎn)品的距離。

傳統(tǒng)工藝美妝店鋪,單從cover引導(dǎo)頁的圖片就能看出該店鋪的賣點。特色產(chǎn)品圖加上柔美的動態(tài)散花效果,為網(wǎng)站加分,導(dǎo)航中加入商城外鏈可直接在線購物,利于用戶體驗。

日本聯(lián)合新聞社,社內(nèi)的場景圖片很好的展示要表達(dá)的主旨。

街區(qū)是一個城市的重要標(biāo)志性特色,將這樣雜亂無章的舊街道作為網(wǎng)站通欄頭圖,配合簡介的形式設(shè)計,也能很出彩。

美寶蓮日本網(wǎng)站,將實體店作為網(wǎng)站背景,搭建成實景的巨幅海報展板,這種形式是否比存粹的明星代言更接地氣些?!

對比下面兩個日韓服飾類網(wǎng)站,可以看出日本網(wǎng)站在圖片選擇上更注重產(chǎn)品本身,極具質(zhì)感和張力的圖片真實樸素,力求展示產(chǎn)品與人的關(guān)系。而韓國則更注重整體的氛圍的搭配,通過環(huán)境的營造來提升產(chǎn)品的品味和檔次,產(chǎn)品只是搭建系統(tǒng)中的一部分。

對圖片進(jìn)行特殊處理

圖素質(zhì)量低是我們在設(shè)計過程中經(jīng)常遇到的情況,我們通常用到最多的方法莫過于高斯模糊、柔光、濾色、添加紋理質(zhì)感,將圖片處理成做舊、仿古、年代感、單色……又會是什么效果呢?!

箔工藝,金銀箔具有很好的延展性,將金銀打展成薄膜狀,與絹結(jié)合,應(yīng)用于古代服飾中。此文化再京都有四百余年的歷史,現(xiàn)在主要用于文物修復(fù)。取箔工藝品的一個局部,重新組合作為整張背景,貼片處理的文字與背景的融合更顯古代文化的精妙。

 

人物素材粗糙的情況下,采用水彩的濾鏡效果,背景加入點狀網(wǎng)格,極具形勢感的箭頭做引導(dǎo),個性十足。

 

全日本劍道聯(lián)合會,網(wǎng)站采用時間軸展示的形式,從1950-2000年每一期獲勝者的照片和信息,可以看出由于70年代以前都是黑白照片且像素低,和近期的彩色照片反差較大,所以網(wǎng)站設(shè)計成了古樸做舊的年代感風(fēng)格,加入很多早期照片中的截圖作為插畫元素,確保了風(fēng)格統(tǒng)一。

 

Daum是韓國最大的門戶網(wǎng)站之一,以郵件和社區(qū)產(chǎn)品為核心,是韓國第一個電子郵件服務(wù)網(wǎng)站Hanmail的前身。牛仔藍(lán)單色照片處理更像電影和動漫場景。

 

也有整體黑白加入局部彩色色的案例,將復(fù)雜圖片簡化處理,對于簡潔的頁面設(shè)計來說,這是個不錯的方法。每個版塊都是黑白照片做背景,文字做JS動態(tài)移入效果,在圖片的某個元素上加入VI主體顏色,故事感很強(qiáng)。

 

創(chuàng)意圖形化環(huán)境的設(shè)計

手繪、矢量圖形設(shè)計的圖形場景環(huán)境,用在食品、旅游、地圖、嬰幼兒等方向的設(shè)計上更容易拉近消費者,給人放松愉悅的心情。相比圖文混排更貼近生活。

狗糧推廣網(wǎng)站,將網(wǎng)站設(shè)計成寵物樂園,各個品種的狗狗們都有自己的一段視頻,內(nèi)容是狗狗們對幾種產(chǎn)品的喜好對比。

 

企劃創(chuàng)意公司,技術(shù)上只是一個簡單的FLASH站,但空間跨越性思維設(shè)計卻給這個網(wǎng)站帶來了不凡的效果。由局部的空間延伸出各種異空間的交匯,加入互動效果而引發(fā)的更多驚喜也進(jìn)一步提升了用戶參與度。

 

用3D拼圖建造起一個小型城市,4個建筑代表網(wǎng)站要展示的4個心理學(xué)的具體分類,建筑物夸張的擬人化動作實現(xiàn)頁面跳轉(zhuǎn)。

 

日本兒童專用雞蛋,此網(wǎng)站將所有產(chǎn)品相關(guān)內(nèi)容裝進(jìn)雞蛋中,食用后產(chǎn)生的剩余物可大變身繼續(xù)用于其它物品的生產(chǎn),循環(huán)利用避免環(huán)境污染,所以在首頁展 示上才會有類似瀑布流的大量周邊產(chǎn)品展示。網(wǎng)站首頁是自動向下播放展示的瀑布流效果,hover及跳轉(zhuǎn)都伴隨非??蓯鄣囊魳泛蛣討B(tài),恰當(dāng)音樂的播放和觸碰 hover的小驚喜也會給網(wǎng)站增添色彩。

 

日本山形放送局的地區(qū)地形圖,大家都看過現(xiàn)實版的景點手繪地圖,該網(wǎng)站也用了這種形式。比較有意思的是他的功能非常強(qiáng)大,是一個可放大縮小的真實版 地圖,沒有跳轉(zhuǎn),完整的手繪google地形圖。以小青蛙作為代言人對每個景區(qū)的優(yōu)勢作手繪圖形注解,以當(dāng)前彈出的形式展示該地的歷史、自然、觀光、社 會、祭祀、美食、傳統(tǒng)等信息的詳細(xì)圖文、視頻解析。

 

九州熊本天草村,用動態(tài)圖形化完整的對天草村進(jìn)行了設(shè)計演繹,重要景點默認(rèn)做了動態(tài)處理,跳轉(zhuǎn)后都是另一個完整的實景矢量圖。對景點中的標(biāo)志性小建筑做了頁面彈出實景詳細(xì)講解。

 

這種形式在新加坡兒童樂園的設(shè)計中也同樣得到了使用。

 

設(shè)計風(fēng)格也是體現(xiàn)一個國家文化的重要方式,嚴(yán)寒漫長的冬季成為俄羅斯的標(biāo)志,在頁面上打造一個同色系的冰雪世界,反而使彩色的主體信息更加突出。

 

賦予與產(chǎn)品相關(guān)的交互形式,重視用戶參與性

一個優(yōu)秀的網(wǎng)站它的交互性也非常重要,擁有好的交互性可以讓瀏覽者有著更高的參與感,并且也能增大網(wǎng)站自身傳播效果,還可以提高用戶對自己的網(wǎng)站的依賴性和忠誠度。

Panasonic剃須刀產(chǎn)品JS展示站,設(shè)計形式與松下電子實現(xiàn)“星羅棋布的網(wǎng)絡(luò)社會”和“與地球環(huán)境共存”的理想呼應(yīng),整站的背景都是由動線點組成的動態(tài)圖形面拼合而成,圖片和文字的展示停留在這星羅棋布的空間組合中。此時網(wǎng)站要表達(dá)的不僅是展示產(chǎn)品,還有松下文化。

 

東京交響樂團(tuán),該網(wǎng)站對用戶的參與性做到了極致,從網(wǎng)站主內(nèi)容上沒有關(guān)于東京交響樂團(tuán)的圖片文字信息,用戶可以在頁面專屬音樂鍵盤提示的情況下,用獨創(chuàng)音樂的新穎形式創(chuàng)作屬于自己的個性音樂,并對音樂逐幀做了記錄,可以返回欣賞創(chuàng)作成果,并分享到各網(wǎng)站。

 

SPECIAL-T 綠茶網(wǎng)站,玩過網(wǎng)游的同學(xué)們都知道游戲中做任務(wù)有地圖尋路功能,該網(wǎng)站采用了這個原理,在大海中建立類似于西游記的龍宮,用戶在沒有任何導(dǎo)視的情況 下,360度無死角在海洋里自由探尋,最終的成果便是在一段時間的遨游后到達(dá)網(wǎng)站的終點產(chǎn)品引導(dǎo)頁,闡釋special的感受。

 

視頻與特殊版式的結(jié)合

如果你想要一種優(yōu)雅而直觀的產(chǎn)品展示方式,全屏視頻網(wǎng)站是一個不錯的選擇。全屏視頻網(wǎng)站能一瞬間點燃人們的好奇心,當(dāng)然也可能馬上讓訪客失去興趣,這都取決于你是否能夠駕馭這類高大上的設(shè)計風(fēng)格。

日本福祉大學(xué),校園內(nèi)外學(xué)生學(xué)習(xí)、活動氛圍的場景視頻作為背景播放展示,視頻上一層則是手動切換的內(nèi)容介紹字幕,一個大學(xué)的網(wǎng)站更像是一個微電影展示。

 

Mikihiko Kyobashi 海底攝影記錄展示站,整站視頻展示配上海洋真實的聲音。透過視頻看到的海洋不是一汪死水,陽光穿透海面,碧海藍(lán)天,比靜態(tài)的照片更能展示生命的氣息。

 

bc服裝網(wǎng)站,暗色的動態(tài)視頻做背景,與前層簡單的圖文排版形成反差,圖片hover的3D立體效果令人耳目一新。

 

圖片與視頻的混排切換展示,拉伸后展開整站播放效果。

 

日清食品,微距拍攝的視頻,用時間倒數(shù)計時的方式,記錄在這一碗日清方便面泡好的3分鐘內(nèi),世界各國家不同膚色年齡的人群品嘗日清食品的狀態(tài)緩慢特 寫,加入了用各國語言描述倒數(shù)計時的聲音,視頻中間穿插有和日清logo呼應(yīng)的裝飾語言,隱藏在頁面下方的時間軸可以找到每一分每一秒的畫面禎,時間可自 行選擇切換到想要的那一幀。

結(jié)語:

以上五點都是當(dāng)下主流設(shè)計中另辟蹊徑找創(chuàng)意,簡單五點很難將所有好的創(chuàng)意都涵蓋在內(nèi),除此之外大家肯定也有更好更多的想法。網(wǎng)頁設(shè)計總是立足于瀏覽 者的審美、文化,以及信息傳播的習(xí)慣、方式,還有網(wǎng)頁開發(fā)技術(shù)的進(jìn)步。對于絕大部份網(wǎng)站來說,沒有強(qiáng)大的專業(yè)力量去研究用戶新的習(xí)慣和需求,也不可能開發(fā) 出新的技術(shù)功能,只能在一些大型的網(wǎng)站中窺見一些發(fā)展的趨勢,再從中找到自身可借鑒的地方。這種借鑒如果成為普遍性,那我們也很難在互聯(lián)網(wǎng)的大潮中有自己 的一席之地。網(wǎng)頁設(shè)計已逐漸往多元化方向發(fā)展,更好的創(chuàng)意、更新的想法都來源于我們真實的生活感受,想要我們的網(wǎng)站變得更強(qiáng)大、擁有更好的用戶體驗,無可 厚非,我們應(yīng)該做的是大膽、大步地去嘗試。

 

原文來自:暢游視覺設(shè)計中心

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