韩国三大门户的基础设计

韩国三大门户的基础设计_第1张图片

前言

本博文通过韩国的最具有代表性的NAVER、DAUM、NATE三大门户网的设计,从中了解首页布局,页面色彩应用,以及频道导航,页面模块处理等一些基础设计,使得让我们更方便、直观的跟我们国内的门户做对比,了解韩国门户的设计方面的流行的趋势和风格把握,希望能给每一位关心门户设计的朋友一些新的启发。

 
页面布局、结构

韩国三大门户的基础设计_第2张图片

韩国三大门户的基础设计_第3张图片

韩国三大门户的基础设计_第4张图片

以上三个门户的首页页面布局和结构中可以看到比国内的几个门户网的布局大不一样。韩国的首页布局通常都是以简洁清晰、区块明显的的特点吸引用户。但这并不意味着内容上单一、乏味。韩国的门户更多的是利用清晰的导航来引导用户更快、更直接的到达用户所需要的页面中,而不是把全部的频道、分类罗列在首页。记得曾经在一位韩国设计的博客上看到过他写的一段话,讲到:用户预览网站就像逛商场一样,商场不一定为了大卖把所有商品堆积在顾客进门的大门口处,而更重要的是怎样让用户少走一些弯路,买到更多自己满意的商品,这就需要一个清晰明了的导航和合理科学的布局。

页面色彩应用

韩国三大门户的基础设计_第5张图片

韩国三大门户的基础设计_第6张图片

韩国三大门户的基础设计_第7张图片

为了更好的做出对比以上拷贝的都是三家门户的同样形式的专题页-手机应用的宣传专题。

从中可以看到,每家门户都是围绕着VI的标准色来制作的,其三家的设计风格都很接近,淡淡的背景,清晰的文字、直观的素材。没有过多的修饰和渲染,没有过多丰富的颜色这就是韩国的设计风格。

频道导航规范

韩国三大门户的基础设计_第8张图片 

韩国三大门户的基础设计_第9张图片

韩国三大门户的基础设计_第10张图片

 每个门户都有丰富的子频道,因为涉及的频道太多,我这里只能列了一些重点频道和,具有代表性的频道导航。

以上三家门户的频道导航处理上略微不同的是NATA任何频道白底黑字,只是用分别不同的细的色条来区分频道之间的差异。NAVER和DAUM用的是VI标准色,和应用频道的特点取了一些周边补助色。但任何频道都没有脱离VI的标准色,这样处理的好处是很好的体现了其品牌的凝聚力和品牌旗下的概念。

页面颜色及文字颜色

韩国三大门户的基础设计_第11张图片

韩国三大门户的基础设计_第12张图片

韩国三大门户的基础设计_第13张图片

 三家门户页面用色基本上都严格按照VI的专色和浅色的搭配,整体看协调。

其中VATE的文字用色上有明显的特点,没有标明文字链,只是用CSS文字感应来表示可点。

在国内的界面设计中,中文字链的部分通常都用蓝色、或者蓝色下划线来标示。但目前没有一个界定的标准,什么样的文字链是蓝色,什么样的文字链只是用通常的颜色+文字感应样式来表达。NAVER和DAUM的文字链处理上,一般的文字链都是用主体文字颜色来表达,在特殊特定的文字链才应用了蓝色文字链。

icon

韩国三大门户的基础设计_第14张图片

韩国三大门户的基础设计_第15张图片

韩国三大门户的基础设计_第16张图片

 

及客户端、wap

韩国三大门户的基础设计_第17张图片

韩国三大门户的基础设计_第18张图片

韩国三大门户的基础设计_第19张图片

icon和客户端一般线下使用,所以更需要保留自身品牌感。icon必须在有限的像素空间上既能表现出产品的特点,也要表现品牌的统一形象、品牌的整体感、品牌的系列性。
以上三家门户的icon和客户端都有共同特点,都保留品牌自身的基本色和风格、质感,确保了用户的识别性。在国内的icon和客户端的用色上比较混乱,由于只重视其产品的自身特点和风格,往往忽略掉了品牌感。这一点,我们可以多多借鉴一下。
 
 
页面模块的视觉处理

韩国三大门户的基础设计_第20张图片

韩国三大门户的基础设计_第21张图片

韩国三大门户的基础设计_第22张图片

 
作为设计师应该有良好的对模块的表现手法,而且还要具备对模块意识。哪些模块可以利用标签形式,哪些模块要做成切换滚动形式……
以上三家门户的模块处理方式上和视觉表现形式上都比较雷同,基本上都用浅色线条、和浅色色块、甚至都没有应用渐变、反白文字的深色分类条。这种处理方式页面看着比较清爽、简洁。
 
 
 
结语
以上是韩国的三大门户NAVER、DAUM、NATE的基础的设计中几个方面,我们从中了解了韩国的设计风格和规范的应用。
wed设计是一门综合的艺术表现形式,肩负着不仅要跟国外的优秀方面学习,还要设计出符合国内用户的习惯产品、也要用最科学的方法引导用户群体,使得更好更快的使用网络产品。
 

 
 
 
PS:

为了方便大家的学习交流,特意注册的一套ID,大家登录后可以浏览到更多的页面,以及下载到官方的客户端.
文字方面有疑问我会也尽我所能帮大家翻译.

http://www.nate.com/   ID:netease   密码:我的名字拼音+163(不用输入+符号)
 
http://www.naver.com/  ID:xiaohuizi   密码:我的名字拼音+163(不用输入+符号)
 
http://www.daum.net  ID:dandanqinghui  密码:我的名字拼音+163(不用输入+符号)

你可能感兴趣的:(视觉设计)