UI设计师必备技能网页中的色彩搭配.docx

《UI设计师必备技能网页中的色彩搭配.docx》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、UI设计师必备技能网页中的色彩搭配颜色往往是页面传达给受众的第一印象，好的配色方案，很大程度上决定着一个网站设计的质量好坏，合理地选择合适的色彩搭配，契合网站设计目的的同时，可以更确切地传达网站产品要表达的内容和思想。　　一、色彩在网页中的作用　　近年来，无论是个人网站、企业网站还是政府网站，内嵌的网页如何在品类众多的网页中脱颖而出，是每一个设计师努力的方向。作为新兴的媒体，网页的作用不言而喻。网页中的色彩是一个网站吸引注意力的主力军，我们都清楚不同的色彩搭配都会产生不同的视觉效果，但是具体的情况，只有经过认真的分析才能得出真正的结论来，下面我们主要介绍下色彩在网页中的作用：　　(一

2、)主题营造风格　　色彩是具有色相，明度，和纯度的属性不同的色相可以个人不同的心里感受，营造不同的风格氛围。色彩搭配能准确为产品定位并给人视觉美感，能得到更高的精神享受。例如脉动的广告采用的是以蓝色为主的色调，营造出清凉、舒爽的风格;而可口可乐公司则是以红色为主色调，营造出热情、奔放的风格特点。　　(二)划分布局　　优秀的网页往往具有丰富，详细的信息内容。条理清晰的内容版块划分有利于受众轻松阅读站内信息。利用色彩进行页面划分。配合合理的色彩搭配，表现独特的视觉效，也使网页具有良好的阅读性，利于便捷传递产品信息。　　(三)视觉引导　　视觉传达中的信息层次往往通过恰当的对不划分。网页设计中

3、我们经常用到的就是利用不同的色彩就结合不同形式的搭配，从而对需要推广的信息进行视觉强化，容易使浏览者印象深刻，提高网页的浏览率，只有这样，在展示网页的时候，才能够成功的吸引更多的浏览者。　　二、色彩在网页的搭配原则　　网页的色彩搭配是有其规律的，正所谓没有规矩不成方圆，色彩在网页中的搭配原则主要通过色彩调和、行业匹配以及情感表达来完成，一个网页的完成并不只是运用单一的色彩来进行设计的，必然是通过分析风格特征，搭配原则基础上合理运用色彩情感，有效传达产品信息从而得到浏览者的关注。　　(一)色彩调和　　为了达到合理传达网页信息，就需要通过色彩的三要素进行合理配置从而达到统一，谐调的画面效

4、果。色彩调和是相对而言的，对比与谐调是其两个基本属性，可以通过同种色调调和，类似色调和，对比色调和达成色彩色调和的目的。　　1.同种色调和　　以图2-1为例，网站统一色调，运用适度的明度和纯度差异形成对比。图中我们可以看到，我们把色相的明度和纯度稍微的加以改变，就会在视觉上产生非常微妙的韵律美，给人一种循序渐进的感觉，弥补了同一种色相始终如一的单调感，为了使整个界面不过于单调，在其中加入少量的白色字体进行点缀，起到画龙点睛的作用。图2-1　　2.类似色调和　　在色环中，靠的最近的颜色称为类似色，图2-2就是由一组由黄色、橙色、橙黄、红色组的网站主页，颜色的色相靠的越近，就越容易调和，

5、而成果也就越成功。色彩也就更加丰富，更加富于变化。图2-2　　3.对比色调和　　对比色是色相最强的对比，可以通过四种方式到达调和的目的：一是运用无色彩进行分割;二是提高或者降低对比色的色彩纯度;三是采用调整双方色彩面积方法，使一色占主导地位，另一色占次要位置;最后就是在对比色中加入某一类颜色达到调和的效果。图2-3中的个人网页就采用了对比色通过上半部分高明度色彩对比下半部，仔细看的话就会看出，实际上网页的下半部分是紫色而不是黑色。图2-3　　(二)行业匹配　　每一个网站都有不痛的行业特征市场定位必然需要不同的风格特征，色彩是烘托主题，渲染气氛的效果。选择合理的色彩搭配，彰显行业特征，

6、从而到达准确传递信息效果。　　在行业匹配中色相起到决定性作用。下面一下几种典型色相对应典型行业进行分析。　　蓝绿色搭配的企业一般都是制药、服饰、金融、交通的行业。如图2-4所示，图片所示的网站是12306的官方主页，以蓝色为基准颜色，配以绿色为点缀颜色，给人一种清新的视觉感受，上网买票本来就是一件需要耐心的事情，那么网站的颜色配比就起到了很好的冷静作用。图2-4　　红黄色给人温暖，喜庆的性格，充满活力。应用于运动网站，活动网站，食物等。如图所示的网站是创业商机网的首页，作为饮食类网站，采用的是红黄色的颜色搭配，充分调动消费者对色彩寓意的联想。图2-5　　黄紫色搭配给人传递高贵，典雅的

7、风格。一般用于化妆品的网站和宣传，黄色作为暖色系给人轻快、充满活力的印象，而紫色给人一种高贵、优雅的视觉感受，两者的有机结合，形成了鲜明的对比，高贵而不失活力。如图2-6所示。图2-6　　(三)情感表达　　色相是传达情感的首要因素通过正确色相运用可以清晰抒发网页的情感。图2-7中的色彩采用了渐变的方式，最左侧是紫色，最右侧是蓝色，越居中色彩越柔和，这个网站的着陆页采用色彩与背景图互相叠加的方法，既没有紫色的艳丽、高贵，也没有海蓝色的宁静、忧郁，这个网页就很