网页设计配色基础

网页设计配色基础：RGB与HSB在实用美术中，常有远看色彩近看花，先看颜色后看花，七分颜色三分花的说法。这也就说明，在任何设计中，色彩对视觉的刺激起到第一信息传达的作用。因此，对色彩的基础知识的良好掌控，在网页设计中才能做到游刃有余。为了使下面的网页配色分析更易于理解，我们先来了解色彩的RGB模式和HSB模式。■RGBRGB是表示红色绿色蓝色又称为三原色光，英文为R(Red)、G(Green)、B(Blue)，在电脑中，RGB的所谓多少就是指亮度，并使用整数来表示。通常情况下，RGB各有256级亮度，用数字表示为从0、1、2至255。虽然数字最高是255，但0也是数值之一，因此共256级。按照计算，256级的RGB色彩总共能组合出约1678万种色彩，即256×256×256＝16777216。通常也被简称为1600万色或千万色。也称为24位色(2的24次方)。对于单独的R或G或B而言，当数值为0时，代表这种颜色不发光；如果为255，则该颜色为最高亮度。因此当RGB三种色光都发到最强的亮度，纯白的RGB值就为255,255,255。屏幕上黑的RGB值是0,0,0。R，意味着只有红色存在，且亮度最强，G和B都不发光。因此最红色的数值是255,0,0。同理，最绿色就是0,255,0；而最蓝色就是0,0,255。黄色较特殊，是由红色加绿色而得就是255，255，0。（详细分析请参考赵鹏所写的《电脑美术设计中的色彩模式详解》）纯白色数值为R255,G255,B255纯黑色数值为R0,G0,B0红色数值为R255,G0,B0绿色数值为R0,G255,B0蓝色数值为R0,G0,B255黄色数值为R255,G255,B0RGB模式是显示器的物理色彩模式。这就意味着无论在软件中使用何种色彩模式，只要是在显示器上显示的，图像最终就是以RGB方式出现。■HSBHSB是指颜色分为色相、饱和度、明度三个因素。英文为H(Hue)、S（Saturation）B（Brightness)饱和度高色彩较艳丽。饱和度低色彩就接近灰色。亮度高色彩明亮，亮度低色彩暗淡，亮度最高得到纯白，最低得到纯黑。一般浅色的饱和度较低，亮度较高，而深色的饱和度高而亮度低。网页设计配色基础：色彩三属性与实例剖析许多初学者对色彩的属性和原色概念模糊，容易混淆，下面我们就先从几个概念入手。今天介绍色彩的三个属性。颜色可以分为非彩色和彩色两大类。非彩色指黑色、白色和各种深浅不一的灰色，而其他所有颜色均属于彩色。从心理学和视觉的角度出发，彩色具有三个属性：色相、明度、纯度（彩度）。基本色相环■色相（Hue）：也叫色调，指颜色的种类和名称，是指颜色的基本特征，是一种颜色区别于其他颜色的因素。色相和色彩的强弱及明暗没有关系，只是纯粹表示色彩相貌的差异。如红、黄、绿、蓝、紫等为不同的基本色相。■明度（Value）：也叫亮度，指颜色的深浅、明暗程度，没有色相和饱和度的区别。不同的颜色，反射的光量强弱不一，因而会产生不同程度的明暗。非色彩的黒、灰、白较能形象的表达这一特质。明度的递增→明度网页例图：明度分析：从上图网页所选取的4个主要色块的RGB数值来看，这4块色彩组合显示的RGB数值很高，接近于最高值255。RGB相互间的数值相近，由于有RG的高数值与B高数值混合，整个网页给人的感觉非常协调，柔和雅致，心情愉悦。结论：RGB同时呈现相近的高数值时，相近等量的色彩相互混合，页面呈高明度灰色段，协调的柔和状态，令人遐想，对视觉刺激是缓慢的，适合长时间观看。但由于数值接近，因此色阶平稳，同时存在着不够醒目的状态。■纯度(Chroma）：也叫饱和度，指色彩的鲜艳程度。原色最纯，颜色的混合越多则纯度逐渐减低。如某一鲜亮的颜色，加入了白色或者黑色，使得它的纯度低，颜色趋于柔和、沉稳。加入黑色的纯度变化和加入白色的纯度变化→纯度网页例图：纯度分析：上图网页中选取了主要的两种色系为组合。运用HBS数值模式更易于理解分析该网页的纯度情况。我们看到蓝色S数值呈现99％具有相当高的饱和度，B明度为79%，玫瑰色S饱和度数值为85%，B明度为97％。当饱和度和明度同时呈最高值时，色彩对视觉的刺激强度到达最高状态。由于蓝色的明度稍低，饱和度较高，而玫瑰色的明度较高，该颜色纯度随之加强，因此玫瑰色相对蓝色对人的视觉刺激更强烈。结论：HSB模式中S和B呈现的数值越高，饱和度明度越高，页面色彩强烈艳丽，对视觉刺激是迅速的，醒目的效果，但不易于长时间的观看。以上两种颜色的S数值接近，是强烈的状态。H显示的度是代表在色轮表里某个角度所呈现的色相状态，相对于SB来说，意义不大。网页设计配色应用——色调前面我们介绍了常用的电脑色彩模式RGB、HSB，以及色彩的三大属性，还有常用配色的基本概念和相关实例剖析。今天开始我们介绍应用部分，本节介绍色调。网页页面中总是由具有某种内在联系的各种色彩，组成一个完整统一的整体，形成画面色彩总的趋向，称为色调。也可以理解为色彩状态。色彩给人的感觉与氛围，是影响配色视觉效果的决定因素。为了使网页的整体画面呈现稳定协调的感觉，以便充分的掌握其规律来更好的分析学习，我们把视觉角色主次位置分为如下几个概念，以便在网页设计配色时更容易操纵主动权。■主色调页面色彩的主要色调、总趋势，其他配色不能超过该主要色调的视觉面积。（背景白色不一定根据视觉面积决定，可以根据页面的感觉需要。）■辅色调仅次与主色调的视觉面积的辅助色，是烘托主色调、支持主色调、起到融合主色调效果的辅助色调。■点睛色在小范围内点上强烈的颜色来突出主题效果，使页面更加鲜明生动。■背景色衬托环抱整体的色调，协调、支配整体的作用。→色调网页例图：本部分小节：一个页面的色彩角色主要是根据其面积多少的来区别主次关系、达到最终目的的。当不同的颜色使用的面积相当，这个页面容易呈现枯燥单调之感，而没有局部细节的变化。当一个页面使用的颜色过多、面积大小用得过于琐碎，这个页面容易呈现花哨、主次不分没有整体的感觉。为页面设计配色的时候，应根据主题内容主次需要，各颜色有其各自的功能角色--面积使用最多的、最少的、不多不少的，加上冷暖的适度安排，纯度明度的合理变化，遵循这条原则，网页配色定能得心应手。网页设计与配色实例分析第一章:网页设计的原则1.1了解分析客户的需求网页设计需要设计师综合多方面的知识,把设计的多种元素进行有机的组合,它与网络技术,经济学,心理学以及美学等领域都有着密切的联系,明确网页设计的中心是为了更好的表达网站主题.网页设计是一个感性思考与理性分析相结合的过程,它的方向取决于设计的任务,它的实现依赖网页的制作网页设计的特点是展现企业的形象,介绍产品与服务,体现企业发展战略途径,要点:1):因此必须明确设计站点的目的和用户的需求,以消费者为中心2):根据市场的状况,企业自身的情况进行综合的分析,从而做出切实可行的设计计划3):总体设计方案要主题鲜明,在目标明确的基础上,完成网站的构思创意.对网站的整体风格和特色作出定位,规划网站的组织结构4):一件完美,完整的网站设计作品,是设计师与客户不断进行沟通设计出的结果5):网站开始构思的时候需要充分了解客户的需求,要达到什么目的,效果,因此前期的投入是很有必要的,以便准确,完善地满足客户预期的要求.6):产品的种类,特性以及所针对人群的特点于年龄,性别等,这些都是设计师们需要了解的方面,经验丰富的设计师们有必要做一些适当的引导.设计师所面对的客户群里,文化背景,性格类型等的差异体现了各种各样的审美情趣.7):有些客户对于建立站点的目的并不明确,设计师就需要做一些推广建议,设计要静下心来,站在客户的角度上耐心解释共同的探讨,以达到网站最终想要达到的目的和效果分析:学这一节感受最深的时候,网页设计是网络技术,美学,心理学的结合这一点我很认同其次我们进行网页设计也是为了更好的表达的我们设计的主题,而什么样的主题,这就要看我们的设计方案这里我觉得和开发程序写需求分析一样,我们这里不仅要有我们的版本模型,更要我我们设计的设计方案写出来设计方案包括我们网站的整体色调,排版,要用到的必要的设计元素,整体风格,设计方案是很重要的:有几个方面我们需要考虑,我们自身的设计水平,我们网站要承载的内容和表达的主题,我们所面对的客户,所以基于上面的几点,我们一定要与我们客户进行耐心的沟通,使用我们的设计与客户的需求达到完美的统一.1.2网站项目的规划一个成功的网页设计作品是艺术与技术的结合与统一,以主题鲜明,形式与内容保持一致,把握整体风格为设计原则,艺术是设计手段,而不是设计目的.规范的网站策划大致具有如下几个方面:1):网站的目标2):网站的主题3):网站的内容4):网站的风格5):网站的标准分析:网的艺术与技术的结合统一,艺术的设计的手段,而不是设计的目的网站策划的以上五个方面我觉得是我们做网页设计方案设计的很重要的依据网站的性质不同,设计要求也不同,例如:门户网站,注意页面的分割,信息结构的合理,页面与图片的优化,界面的亲和等问题企业网站重点在突出企业形象,产品特点,要求设计样式,图片质量相对较高.网站的主题要求小而精,有针对性,尽量向专业靠近;题材尽量要新颖,不要随处可见,这样才你更吸引用户一看再看,网站的名称要有特色,方便记忆,要考虑到为了以后网站的形象和宣传做推广.分析:上面的东西让我总觉得我对不同类型的网站把握的过少,比如韩式网站的风格是什么样的,这些平时有感受确没有从理论上去好好分析过.同时我觉得有必要自己整体出一个有规范的针对自己的特点的需求方案文档,以后所有的网页设计都应该先写设计方案,而设计方案就应该以这个为标准.网站设计规划书要体现出的8条内容:1):建设网站前的市场分析2):建设网站的目的以及功能的定位3):网站的技术解决方案4):网站的内容规划5):网页设计这里要考虑到范围群体的年龄地域,网络速度,阅读习惯等.6):网站维护7):网站测试8):网站的发布与推广分析:上面是网站开发是写方案时需要考虑到的几个方面的问题,我觉得可以作为我们的重要参考.其实我们在自己开发项目也作了许多这样的工作.第二章网页设计的框架网页设计是有规律可寻的,掌握如下几个框架,并根据网站的信息内容套用,框架搭建起来,剩下的填充,丰富,精致,....就容易多了.分析:我很认同这样的观点,框架就相当于是起房子起的框架,画画是画人的人体骨骼,而填充就些就相当与是往房子里填砖头,在画好人体骨骼后往人体上画肌肉.我们为什么要用框架:为了能够让浏览者更清楚,便捷地理解网站所要传达的信息内容网页的布局以导航拦位置为界,大致可分为:2.1.1上下结构式为一种上下框架结构式,通常上方为导航条,或者动态的公司企业形象,广告区域.下方为正文,内容部分,此类结构在内容较少的企业网站或者个人网站较常出现,有时只在首页使用,二级页面换相应结构.2.1.2左右结构式左右结构式又称为二分栏式,清晰的分列两旁框架结构,一般左侧是导航条,有时最上方会有一个小的标题或标志,右侧是正文内容部分或者公司企业形象展示,不少企业网站较喜欢采用这类结构注:由于网站内容较少,因此多数企业网站都使用上下结构和左右结构为框架,展示区域添加大的图片作为公司形象,新产品的展示,以提升公司的整体形象.分析:上下结构式左右结构式并不是严格的区分往往我们会这样的认为那就是死板了,同时注意这种特点有利于展示内容叫少的网站,很大块我们会选择用图片去填充.2.1.3上左右结构样式这是大中型企业喜欢用的框架式,通常上方为主要菜单导航条,左侧为点击出现的细分栏目导航条,下方为较主要的栏目及小广告,右则为内容区域,有不少企业网站喜欢首页使用不同的结构式,上左右结构使用在二级页面.同上左右框架稍有区别的是中间部分为内容部分,右侧则是该网站较重要的内容导航区域,或是登陆,搜索区域,小广告等.分析:随着网站内容的增多,框架结构的