前言

本博文通過韓國的最具有代表性的NAVER、DAUM、NATE三大門戶網(wǎng)的設(shè)計，從中了解首頁布局，頁面色彩應(yīng)用，以及頻道導(dǎo)航，頁面模塊處理等一些基礎(chǔ)設(shè)計，使得讓我們更方便、直觀的跟我們國內(nèi)的門戶做對比，了解韓國門戶的設(shè)計方面的流行的趨勢和風(fēng)格把握，希望能給每一位關(guān)心門戶設(shè)計的朋友一些新的啟發(fā)。
頁面布局、結(jié)構(gòu)

以上三個門戶的首頁頁面布局和結(jié)構(gòu)中可以看到比國內(nèi)的幾個門戶網(wǎng)的布局大不一樣。韓國的首頁布局通常都是以簡潔清晰、區(qū)塊明顯的的特點吸引用戶。但這并不意味著內(nèi)容上單一、乏味。韓國的門戶更多的是利用清晰的導(dǎo)航來引導(dǎo)用戶更快、更直接的到達用戶所需要的頁面中，而不是把全部的頻道、分類羅列在首頁。記得曾經(jīng)在一位韓國設(shè)計的博客上看到過他寫的一段話，講到：用戶預(yù)覽網(wǎng)站就像逛商場一樣，商場不一定為了大賣把所有商品堆積在顧客進門的大門口處，而更重要的是怎樣讓用戶少走一些彎路，買到更多自己滿意的商品，這就需要一個清晰明了的導(dǎo)航和合理科學(xué)的布局。

頁面色彩應(yīng)用

為了更好的做出對比以上拷貝的都是三家門戶的同樣形式的專題頁-手機應(yīng)用的宣傳專題。

從中可以看到，每家門戶都是圍繞著VI的標準色來制作的，其三家的設(shè)計風(fēng)格都很接近，淡淡的背景，清晰的文字、直觀的素材。沒有過多的修飾和渲染，沒有過多豐富的顏色這就是韓國的設(shè)計風(fēng)格。

頻道導(dǎo)航規(guī)范

每個門戶都有豐富的子頻道，因為涉及的頻道太多，我這里只能列了一些重點頻道和，具有代表性的頻道導(dǎo)航。

以上三家門戶的頻道導(dǎo)航處理上略微不同的是NATA任何頻道白底黑字，只是用分別不同的細的色條來區(qū)分頻道之間的差異。NAVER和DAUM用的是VI標準色，和應(yīng)用頻道的特點取了一些周邊補助色。但任何頻道都沒有脫離VI的標準色，這樣處理的好處是很好的體現(xiàn)了其品牌的凝聚力和品牌旗下的概念。

頁面顏色及文字顏色

三家門戶頁面用色基本上都嚴格按照VI的專色和淺色的搭配，整體看協(xié)調(diào)。

其中VATE的文字用色上有明顯的特點，沒有標明文字鏈，只是用CSS文字感應(yīng)來表示可點。

在國內(nèi)的界面設(shè)計中，中文字鏈的部分通常都用藍色、或者藍色掉劃線來表達。但目前沒有一個界定的標準，什么樣的文字鏈是藍色，什么樣的文字鏈只是用通常的顏色+文字感應(yīng)樣式來表達。NAVER和DAUM的文字鏈處理上，一般的文字鏈都是用主體文字顏色來表達，在特殊特定的文字鏈才應(yīng)用了藍色文字鏈。

icon

及客戶端、wap

icon和客戶端一般線下使用，所以更需要保留自身品牌感。icon必須在有限的像素空間上既能表現(xiàn)出產(chǎn)品的特點，也要表現(xiàn)品牌的統(tǒng)一形象、品牌的整體感、品牌的系列性。
以上三家門戶的icon和客戶端都有共同特點，都保留品牌自身的基本色和風(fēng)格、質(zhì)感，確保了用戶的識別性。在國內(nèi)的icon和客戶端的用色上比較混亂，由于只重視其產(chǎn)品的自身特點和風(fēng)格，往往忽略掉了品牌感。這一點，我們可以多多借鑒一下。

頁面模塊的視覺處理

作為設(shè)計師應(yīng)該有良好的對模塊的表現(xiàn)手法，而且還要具備對模塊意識。哪些模塊可以利用標簽形式，哪些模塊要做成切換滾動形式……
以上三家門戶的模塊處理方式上和視覺表現(xiàn)形式上都比較雷同，基本上都用淺色線條、和淺色色塊、甚至都沒有應(yīng)用漸變、反白文字的深色分類條。這種處理方式頁面看著比較清爽、簡潔。

結(jié)語
以上是韓國的三大門戶NAVER、DAUM、NATE的基礎(chǔ)的設(shè)計中幾個方面，我們從中了解了韓國的設(shè)計風(fēng)格和規(guī)范的應(yīng)用。
wed設(shè)計是一門綜合的藝術(shù)表現(xiàn)形式，肩負著不僅要跟國外的優(yōu)秀方面學(xué)習(xí)，還要設(shè)計出符合國內(nèi)用戶的習(xí)慣產(chǎn)品、也要用最科學(xué)的方法引導(dǎo)用戶群體，使得更好更快的使用網(wǎng)絡(luò)產(chǎn)品。

完

PS:

為了方便大家的學(xué)習(xí)交流，特意注冊的一套ID,大家可以登錄后可以瀏覽到更多的頁面，以及下載到官方的客戶端.
文字方面有疑問我會也盡我所能幫大家翻譯.

http://www.nate.com/ ID:netease?? 密碼：我的名字拼音+163（不用輸入+符號）

http://www.naver.com/ ID:xiaohuizi?? 密碼：我的名字拼音+163（不用輸入+符號）

http://www.daum.net ID:dandanqinghui? 密碼：我的名字拼音+163（不用輸入+符號）

來源：http://uedc.163.com/6491.html