千锋教育-做有情怀、有良心、有品质的IT职业教育机构

当前位置:首页 > 行业动态  >  正文

UI设计师技能之网页中的色彩搭配

时间:2017-04-18 11:40:56     来源:千锋教育 作者:cheri

  网页设计,电脑编程与视觉艺术结合的效果,电脑程序提供技术支撑,视觉传达则通过造型、色彩、构图来完善效果。合理的色彩搭配,能从感性方面提供良好的氛围并准确传达企业与个人的性格特征。凭借丰富多彩的色彩变化将版面诸多元素变得具有生命力。经过笔者长期以来的观察,得出一个惊人的结论:使用网页首页通过色彩感受,给人先声夺人的效果,确定对页面的印象。论文通过网页中色彩搭配原则和设计方法解析,讲解色彩搭配在网页设计中的运用。

  一、色彩在网页中的作用

  近年来,无论是个人网站、企业网站还是政府网站,内嵌的网页如何在品类众多的网页中脱颖而出,是每一个设计师努力的方向。作为新兴的媒体,网页的作用不言而喻。网页中的色彩是一个网站吸引注意力的主力军,我们都清楚不同的色彩搭配都会产生不同的视觉效果,但是具体的情况,只有经过认真的分析才能得出真正的结论来,下面我们主要介绍下色彩在网页中的作用:

  (一)主题营造风格

  色彩是具有色相,明度,和纯度的属性不同的色相可以个人不同的心里感受,营造不同的风格氛围。色彩搭配能准确为产品定位并给人视觉美感,能得到高的精神享受。例如脉动的广告采用的是以蓝色为主的色调,营造出清凉、舒爽的风格;而可口可乐公司则是以红色为主色调,营造出热情、奔放的风格特点。

  (二)划分布局

  的网页往往具有丰富,详细的信息内容。条理清晰的内容版块划分有利于受众轻松阅读站内信息。利用色彩进行页面划分。配合合理的色彩搭配,表现独特的视觉效,也使网页具有良好的阅读性,利于便捷传递产品信息。

  (三)视觉引导

  视觉传达中的信息层次往往通过恰当的对不划分。网页设计中我们经常用到的就是利用不同的色彩就结合不同形式的搭配,从而对需要推广的信息进行视觉强化,容易使浏览者印象深刻,提高网页的浏览率,只有这样,在展示网页的时候,才能够成功的吸引多的浏览者。

  二、色彩在网页的搭配原则

  网页的色彩搭配是有其规律的,正所谓没有规矩不成方圆,色彩在网页中的搭配原则主要通过色彩调和、行业匹配以及情感表达来完成,一个网页的完成并不只是运用单一的色彩来进行设计的,必然是通过分析风格特征,搭配原则基础上合理运用色彩情感,有效传达产品信息从而得到浏览者的关注。

  (一)色彩调和

  为了达到合理传达网页信息,就需要通过色彩的三要素进行合理配置从而达到统一,谐调的画面效果。色彩调和是相对而言的,对比与谐调是其两个基本属性,可以通过同种色调调和,类似色调和,对比色调和达成色彩色调和的目的。

  1 同种色调和

  以图2-1为例,网站统一色调,运用适度的明度和纯度差异形成对比。图中我们可以看到,我们把色相的明度和纯度稍微的加以改变,就会在视觉上产生非常微妙的韵律美,给人一种循序渐进的感觉,弥补了同一种色相始终如一的单调感,为了使整个界面不过于单调,在其中加入少量的白色字体进行点缀,起到画龙点睛的作用。

  2 类似色调和

  在色环中,靠的近的颜色称为类似色,图2-2就是由一组由黄色、橙色、橙黄、红色组的网站主页,颜色的色相靠的越近,就越容易调和,而成果也就越成功。色彩也就加丰富,加富于变化。

  3 对比色调和

  对比色是色相强的对比,可以通过四种方式到达调和的目的:一是运用无色彩进行分割;二是提高或者降低对比色的色彩纯度;三是采用调整双方色彩面积方法,使一色占地位,另一色占次要位置;后就是在对比色中加入某 一类颜色达到调和的效果。图2-3中的个人网页就采用了对比色通过上半部分高明度色彩对比下半部,仔细看的话就会看出,实际上网页的下半部分是紫色而不是黑色。

  (二)行业匹配

  每一个网站都有不痛的行业特征市场定位必然需要不同的风格特征,色彩是烘托主题,渲染气氛的效果。选择合理的色彩搭配,彰显行业特征,从而到达准确传递信息效果。

  在行业匹配中色相起到决定性作用。下面一下几种典型色相对应典型行业进行分析。

  蓝绿色搭配的企业一般都是制药、服饰、金融、交通的行业。如图2-4所示,图片所示的网站是12306的官方主页,以蓝色为基准颜色,配以绿色为点缀颜色,给人一种清新的视觉感受,上网买票本来就是一件需要耐心的事情,那么网站的颜色配比就起到了很好的冷静作用。

  红黄色给人温暖,喜庆的性格,充满活力。应用于运动网站,活动网站,食物等。如图所示的网站是创业商机网的首页,作为饮食类网站,采用的是红黄色的颜色搭配,充分调动消费者对色彩寓意的联想

  黄紫色搭配给人传递高贵,典雅的风格。一般用于化妆品的网站和宣传,黄色作为暖色系给人轻快、充满活力的印象,而紫色给人一种高贵、优雅的视觉感受,两者的有机结合,形成了鲜明的对比,高贵而不失活力。

  (三)情感表达

  色相是传达情感的首要因素通过正确色相运用可以清晰抒发网页的情感。图2-7中的色彩采用了渐变的方式,左侧是紫色,右侧是蓝色,越居中色彩越柔和,这个网站的着陆页采用色彩与背景图互相叠加的方法,既没有紫色的艳丽、高贵,也没有海蓝色的宁静、忧郁,这个网页就很好的做到了色调的控制,总体上给人一种清新、舒适的视觉感受。

 

  色彩能够给人强烈的视觉冲击,从宣传效果来说,其传达效果远优于图形图像和文字的传达。时代的进步使得色彩的合理搭配已经渐渐成为网页制作中必不可少的重要因素,正是五彩斑斓的色彩变幻使我们的网页具观赏性和艺术性。色彩搭配也越来越受到网页设计者们的重视,只有充分合理发挥出色彩搭配的作用,才能做出加赏心悦目的网页作品。

相关文章

  • 北京天丰利校区(总部):北京市海淀区宝盛北里西区28号天丰利商城4层
    北京沙河校区:北京市昌平区沙阳路18号北京科技职业技术广场服务楼2层、南区服务楼2层
    咨询电话:400-654-7778 010-82790226-801
    面授课程:Android培训、HTML5培训、UI交互设计培训、PHP培训、JavaEE培训、大数据开发培
                     训、VR/AR混合现实培训、Python培训、iOS培训、好程序员
  • 深圳西部硅谷校区:深圳市宝安区宝安大道5010号深圳西部硅谷A区B座605-619
    深圳大学城校区:深圳市南山区留仙大道1201号大学城创客小镇16栋2楼、3楼
    咨询电话:0755-33582485-801(硅谷校区) 0755-86660670-801(大学城校区)
    面授课程:Android培训、HTML5培训、UI交互设计培训、PHP培训、JavaEE培训、大数据开发培
                     训、VR/AR混合现实培训
  • 上海地址:上海市宝山区同济支路199号智慧七立方3号楼2-4层
    咨询电话:400-627-7899 021-56166283/56166279
    面授课程:PHP培训、Android课程培训、HTML5课程培训、UI交互设计培训、JavaEE培训、iOS课
                     程培训、好程序员
  • 郑州地址:郑州市金水区纬五路21号河南教育综合楼(经纬中学楼)6/7/8层
    咨询电话:0371-55191750 400-654-7778
    面授课程:Android课程培训、HTML5课程培训、UI交互设计培训、JavaEE培训、iOS课程培训
  • 广州地址:广州市天河区元岗路310号智汇park创意园E座5层
    咨询电话:020-22119207 400-654-7778
    面授课程:Android课程培训、HTML5课程培训、iOS课程培训、JavaEE培训
  • 大连地址:大连市甘井子区软件园路6号B5座101室
    咨询电话:0411-39026086 400-654-7778
    面授课程:Android课程培训、HTML5课程培训、JavaEE培训、iOS课程培训
  • 武汉地址:武汉市江夏区藏龙岛杨桥湖大道15号拓创大厦15楼
    咨询电话:027-81772047
    面授课程:Android课程培训、HTML5课程培训、JavaEE培训、iOS课程培训
  • 成都旅游校区:成都市一环路西二段17号四川旅游青羊校区内
    成都华立校区:成都一环路西二段17号华立大厦3楼
    咨询电话:028-83178771 028-61967740
    面授课程:Android课程培训、HTML5课程培训、UI交互设计培训、JavaEE培训、iOS课程培训
  • 校区地址:西安市雁塔区高新六路52号立人科技C座西区4楼
    咨询电话:029-85260160 029-85261030 029-85260960
    面授课程:Android课程培训、HTML5课程培训、JavaEE培训
  • 杭州地址:浙江省杭州市江干区九堡旺田书画城A座4层
    咨询电话:0571-86893632 010-82790226-801
    面授课程:Android课程培训、HTML5课程培训、JavaEE培训、iOS课程培训
  • 青岛校区地址:青岛市市南区金坛路17号青岛职业技术南校区实训楼A4层
    咨询电话:0532-80910752/3 010-82790226-801
    面授课程:Android课程培训、HTML5课程培训、UI交互设计培训、iOS课程培训
  • 千锋动态二维码

    了解千锋动态
    关注千锋教育服务号

  • 千锋互联二维码

    扫码关注千锋互联
    身边的移动开发导师