青岛UI培训
达内青岛山东路中心

18300268127

热门课程

商务网站页面色彩以及分布

  • 时间:2017-03-30
  • 发布:互联网
  • 来源:互联网

    目前,SEO(搜索引擎优化)已成为众多商务网站提高点击率的一个重要手段,但SEO主要是从搜索引擎的角度来优化页面,着眼于关键字在页面中的位置、页面内容的简练等,而忽略了消费者的偏好和使用习惯,导致不少网站虽然提高了访问量,但提高的访问量并没有转化成访问者的购买行为,甚至不少浏览者进入页面后,几乎没有停留便关闭网页,这就要在SEO的基础之上,通过页面色彩与布局的合理设置,做到不但能把人"请进来",而且能"留下来".

    一.商务网站色彩定位在人的日常生活中,视觉提供的信息量是相当大的,大约为所有感官所能提供信息量之和的80%,这就决定了一个成功的商务网站在色彩的设置上必须做到:第一要与网站主题一致,第二要能和谐统一并且吸引人,从而对网站的主、辅色调的设置提出了要求.

    色调是指一幅作品色彩外观的基本倾向,在明度、纯度、色相这三要素中,某种因素起主导作用,我们就称之为某种色调.本文主要从主页面的色相的运用来进行阐述.

    1、主色调.网站的主色调是网站主题的体现,是页面色彩的主要色调、总趋势,其他配色不能超过该主要色调的视觉面积,往往用于网页的底色和主要图案.不同的商务网站所适用的主色调是有区别的,可以从企业形象、产品性质、消费者特征等方面来考虑.

    首先,从企业形象的角度来选择色调是首先考虑的重要方面.主色调中色相选蓝色的大企业居多,因为蓝色是最冷的颜色,突出了企业冷静、睿智、不断进取的形象.

    如微软公司、中国移动通信集团、苏宁电器股份有限公司均选择了蓝色.金融类企业的网站偏向于选择冷色系,以期带给浏览者稳健强大的感觉.如中国银行、中国建设银行使用了蓝色,中国农业银行使用淡绿.旅游类网站在选择主色调的时候也往往将目光投向绿色和蓝色,因为绿色是和平色,偏向自然美,蓝色是天空和海洋的颜色,容易激发人向往自然,追求宁静的情绪.如南京旅游网、涂牛旅游网采用了绿色,旅游环球网、携程旅行网采用了蓝色.

    其次,产品的性质也是决定网站主色调的重要因素,汽车、电脑、电视、音响、仪器等具有金属成分且有相当科技含量的产品,所选用的色彩往往是蓝色、黑色、白色、灰色.因为蓝色沉稳的特性,具有理智,准确的意象,如联想电脑中国网站采用了淡蓝色;黑色具有高贵、稳重、科技的意象,如东芝液晶电视-中国官方网站选用了黑色,以突出其"领先、创新"的企业理念;白色具有高级、科技的意象,如BMW中国官方网站采用了白色;灰色具有柔和、高雅的意象,而且属于中间性格,男女皆能接受,所以灰色也是永远流行的主要颜色,如奔驰中国官网的主页从左到右使用了逐渐淡化的灰色,柔和的感觉暗暗打动浏览者的心,尽显其Mercedes-给车主带来幸福的寓意.食品类网站通常会选用暖色调中的橙色、红色、绿色.橙色是欢快活泼的光辉色彩,是暖色系中最温暖的色,它使人联想到金色的秋天,丰硕的果实,是一种富足、快乐而幸福的颜色,同时橙色也是最使人产生食欲的颜色,所有橙色通常是食品类网站的首选,如康维多奶粉中国官网就使用了橙色,给浏览者(多为新生儿妈妈)温馨幸福的感觉;红色是最引人注目的颜色,是热情、活力、能量的象征,对于宣传着力于带来活力或温暖的食品可考虑采用红色,如可口可乐(中国)官方活动网站,打开主页面,通篇是跳脱的大红色,所带来的色彩冲击与它"活力永远是可口可乐"的宣传口号非常贴切;绿色所传达的清爽,理想,希望,生长的意象,往往为保健类食品网站所青睐,如乐力官方商城就采用了绿色.

    再次,消费者的特征也是不可忽略的因素.男性网多使用冷色作为主色调,如怒剑网、男人帮都采用了蓝色.女性网站使用粉红色的较多,如凤网、魅网在线.紫色也多为女性网站所用,如.儿童或亲子类网站多用绿色、橙色,给人生机蓬勃、温馨的感觉,如中国儿童教育网采用橙色和绿色,宝宝妈妈网采用绿色.

    2、辅色调.定义了主色调后,需要在"总体协调,局部对比,突出特点"的原则上确定辅色调.网站的辅色调是仅次于主色调的视觉面积的辅助色,用来烘托主色调、支持主色调,起到增强主色调的感染力,使页面更加和谐生动的效果.

    用同类色.一般指单一色相系列的颜色,指通过调整主色调的透明度或者饱和度(通俗些而言就是将色彩变淡或则加深),产生新的色彩,用于网页.这样的页面看起来色彩统一,有层次感.如海尔的外文网站,主色调是浅蓝色,而辅色调则类颜色稍深的湖蓝色.这种颜色的搭配给人协调感,产生了微妙的韵律美.

    以色相环来划分,奥斯特瓦尔德颜色系统的基本色相为黄、橙、红、紫、蓝、蓝绿、绿、黄绿8个主要色相,每个基本色相又分为3个部分,组成24个分割的色相环.

    24色相环中相距45度,或彼此相隔二三个数位的两种色彩,为同类色关系,简单的说就是用一个感觉的色彩,例如淡黄和淡绿色、红和橙色.如拉手网,主色调为淡红色,辅色调采用橙色,主辅色调极为协调,给人温馨的感觉.

    用临近色.色相环中相距90度,或相隔五六个数位的两色,为邻近色关系.色调感觉调和又避免单调,如蓝与紫、黄和绿.

    用对比色.色相环中相距135度或相隔八九个数位的两色,为对比色关系.属于中强对比效果的色组.如蓝色和黄色,整个页面色彩丰富但不花稍.如薄荷女人网,主色调为淡红色,辅色调为绿色,在突出女性柔美特点的同时,增强了网站色彩的鲜明感,也和网站主题相贴切.

    用补色.色相环中相隔十二个数位后相距180度的两色,为补色关系.补色关系的色组,是对比最强的色组,给人以强烈的视觉冲击,如红和绿、黄和紫.使用补色比较容易出彩,但在配色时要注意通过主辅色调面积的大小,或以分散形态的方式来缓和过于激烈的对比.如卡卡乐园网,以红色为主色调,绿色为辅色调,红底色衬着蜿蜒分块的绿色,给人既生动又和谐的感觉.

    用黑色.大部分彩色配黑色都会给人留下很深的印象.如EELE中国,以玫红色为主色调,以黑色为辅色调,给人浪漫、时尚的感觉冲击.

    除了主、辅色之外,还有点睛色、背景色的运用,以及纯度明度的合理安排,这些都是商务网站设计必须要考虑的.总之,在商务网站色彩设计时要注意如下几点:不要片面追求出彩,色彩的选择始终要以适合于读者群为关键,如视觉刺激较强烈的页面会给年轻人留下深刻的印象,从而吸引进一步浏览,但对年长的浏览者却会形成反面效果;网页归根结底是为了传达讯息,因此色彩的使用要适合阅读,在阅读的部分要使用对比色;不要使用过多的颜色,除了黑与白之外,页面色彩总类不要超过三种.

    二、商务网站布局安排1、主页面.主页面是兼具网站的封面及目录功能,是决定网站风格和吸引浏览者的重要页面,主页面的布局安排在网站设计中具有举足轻重的作用.

    骨骼型.骨骼型是最常见的网页布局,是一种规范化的、理性的分割方法,类似于报刊的版式.主要分为竖向通栏、双栏、三栏和横向的通栏、双栏、三栏等.一般以竖向分栏为多.这种版式给人以和谐、理性的美."T"型、"同"型、"回"型等布局都属于骨骼型布局.通栏结构通常适用于信息少、图片多,以宣传产品和企业形象为目的的网页,如海尔集团、联想集团网站.二分栏结构一般情况下都是左窄右宽,在右侧的宽栏中嵌入多个横向的分栏.这种结构效果简练、大气,个性鲜明,各功能区域分割清晰,一目了然,能够放置较多信息且便于浏览者阅读,是着重在主页进行产品展示的商务网站进行网页布局的首选.如当当购网、淘宝数码网.三分栏结构在商务网站中最为普遍,其特点是结构清晰、明确,通常适合于信息量大、更新速度快的商务网站和综合网站.其结构通常表现为页面顶部为横条网站标志+广告条+导航栏,下面竖向分为三栏,若干横栏,可以放置不同的内容的链接,如新浪,第一块竖向三栏从左到右分别为广告、视频、新闻.

    自由型.这种结构的随意性比较大,通过不同形态图形或曲线的运用,巧妙地安排文字,达到提升美感、给浏览者较强的视觉冲击的效果,这种类型的页面往往用在体现创作者的创意,使浏览者产生共鸣,但文字通常较少.如奥黛莉网站,洁白的界面上绽放着淡雅的花,页面的焦点是花中一美丽女性,围绕着花简单放置着相关链接.带给浏览者无尽的美感和遐想.

    Flash型:这种布局将Flash作为主体内容,文字说明或栏目条被分布在不显眼的位置,这种设计较多运用在时尚类网站或网站用来推广相关产品.如雅诗兰黛网站,深蓝色的底色上演绎着异国风味的flash,尽显优雅时尚.

    Pop(海报型)型:指页面布局就像一宣传海报,如薇姿网站,进入主页,映入眼帘便是如海报般的一幅画面,用来推介某一款产品,清新的界面、明确的主题较易获得访问者的认同感,并激起进一步浏览下去的欲望.

    2、其它页面.其它页面分为两种,一种往往是二级页面,对应于主页面上相应的频道,内容比较丰富,需要放置大量的链接和图片,这种页面布局多考虑采取三栏式;另外一种页面用来放置具体的内容,页面布局多采用"匡"型结构,旨在给主内容区更多空间.这种布局上面是标题及广告横幅,接下来的左侧/右侧是一窄列链接等,右列/左列是很宽的正文,下面放置一些的辅助信息,如相关新闻、留言等.

    网页一定要有统一感,即访问者在浏览同一网站的页面时,认可所有的页面属于同一网站,这需要网站所有页面有一致的风格,也可说网站的每一页面都要遵循网站CI形象设计.

    三、结束语商务网站设计需要从定位、色彩、布局、模块、内容等方面综合考虑,每一个方面都会关系到网站的成败,在进行网站设计时,一定要以商务的眼光,从企业、消费者的角度出发,在细节上下功夫,只有这样,网站才能在电子商务的大潮中站住脚,无论是在提升企业知名度,还是在开拓市场方面起到积极的作用.

                                                         更多的资讯请扫描二维码,关注青岛ui培训

青岛ui培训

上一篇:如何设计游戏网站页面?
下一篇:青岛ui培训班--PHP的网站设计

平面设计具体包括哪些内容

2017年十大设计趋势!不懂你就OUT了

UI设计中的心理学

达内教研副总裁刘涛出席Adobe公司ACA国际认证项目启动仪式

选择城市和中心
贵州省

广西省

海南省