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

那么，怎樣在主流設(shè)計(jì)方式中作出自己的特色呢？我們從以下幾點(diǎn)介紹些提升網(wǎng)站設(shè)計(jì)形式的方法：

> 賦予民族文化特點(diǎn)

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

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

http://www.medical-youkai.jp/

(小編按：那個(gè)妹子是我的女神橫山美雪，嗎？)和風(fēng)服裝店，日本特色的風(fēng)鈴、簡(jiǎn)約的插畫，”和風(fēng)”，大和民族追求與自然的和諧之美，從這個(gè)服裝網(wǎng)站上我們可以看到日本設(shè)計(jì)文化體現(xiàn)了對(duì)自然的尊重，反映了樸素美學(xué)的內(nèi)斂性格。

http://hanamichiya.jp/

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

http://www.itwillbeastounding.com/

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

http://www.bolshoi.ru/

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

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

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

http://moonlinx.jp/special_issue/003/

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

http://www.ishiyamasenko.co.jp/

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

http://www.kazurasei.co.jp/

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

http://go-jimbou.info/

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

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

http://www.maybelline.co.jp/

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

http://quael.jp/

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

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

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

http://www.hiroto-rakusho.com/

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

http://www.kanenavi.jp/

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

http://www.kendo.or.jp/champ/#/about

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

http://www.daum.net/

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

http://www.streetreach.org/

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

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

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

http://www.solvida.jp/solpa/#/MainPage/001

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

http://www.aquacp.com/

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

http://www.soc.nara-u.ac.jp/kokoro/

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

http://www.kewpie.co.jp/egg/

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

http://www.nhk.or.jp/yamagata/mitekero/

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

http://www.amakusamura.jp/

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

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

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

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

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

http://panasonic.jp/shaver/lamdash/dna/index.html

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

http://tokyocitysymphony.com/

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

http://ogreen.special-t.com/en/

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

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

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

http://www.n-fukushi.ac.jp/lifestyle/

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

http://www.mikihiko.com/

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

http://bananacafe.com.br/

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

http://getgoingtoday.org/beyond

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

http://www.nissin.com/jp/

結(jié)語：

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

作者：ranger

轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎng)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.820esy.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

更多精彩文章：

網(wǎng)站設(shè)計(jì)之一：怒馬！超實(shí)用的單頁(yè)網(wǎng)站設(shè)計(jì)指南（附大量資源）

網(wǎng)站設(shè)計(jì)之二：旅游網(wǎng)站設(shè)計(jì)分析！教你10個(gè)小技巧

網(wǎng)站設(shè)計(jì)之三：實(shí)例教學(xué)！如何將極簡(jiǎn)風(fēng)格的原則運(yùn)用到網(wǎng)站設(shè)計(jì)中？

網(wǎng)站設(shè)計(jì)之四：另辟蹊徑談創(chuàng)新！提升網(wǎng)站設(shè)計(jì)形式的幾種方法

網(wǎng)站設(shè)計(jì)之五：經(jīng)驗(yàn)分享：移動(dòng)網(wǎng)站設(shè)計(jì)應(yīng)該避免的“七宗罪”

網(wǎng)站設(shè)計(jì)之六：4000 字快速回顧20多年的網(wǎng)頁(yè)設(shè)計(jì)發(fā)展史！

網(wǎng)站設(shè)計(jì)之七：騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：動(dòng)態(tài)篇

網(wǎng)站設(shè)計(jì)之八：為什么千萬別隨便學(xué)國(guó)外的極簡(jiǎn)設(shè)計(jì)？

網(wǎng)站設(shè)計(jì)之九：高手出品！2020~2021年UI界面設(shè)計(jì)趨勢(shì)

網(wǎng)站設(shè)計(jì)之十：如何做好網(wǎng)頁(yè)頭部?jī)?nèi)容設(shè)計(jì)？來看 58 設(shè)計(jì)師的總結(jié)！