人机界面设计之色彩设计.ppt

《人机界面设计之色彩设计.ppt》由会员分享，可在线阅读，更多相关《人机界面设计之色彩设计.ppt（62页珍藏版）》请在三一文库上搜索。

1、人 机 界 面 设 计,Human-Machine Interface Design,第五章 色彩设计,一、色彩基础 二、色彩感觉 三、色调和色彩搭配 四、计算机色彩 五、网页色彩搭配的原则 六、搭配技巧,在人机界面设计中，色彩较之形往往具有先声夺人的魅力，同一种界面设计由于色彩的差异可以给人截然不同的感受和印象。如何才能最大限度地发挥色彩的美学功能和视觉效益，创造良好的界面效果，仍是人机界面色彩设计的关键问题。 界面 网页,（1）颜色的产生 唤起我们对色彩感觉的关键在于光，光是属于一定波长范围内的一种电磁辐射，色彩感觉是由于光照射到物体后，物体的反光而使人的视觉和大脑产生作用的结果，是一种视

2、知觉。有光照射在物体的表面，一部分光被吸收，另一部分被反射回来，被反射回的光反应出你看到的物体的颜色。太阳光照在白纸上，光线基本完全被反射，所以你看到的是白色，黑色物体则完全吸收光线，所以看到的是黑色。绿叶吸收白光中其他光波的色光，只反射绿色光波的光，因此树叶呈绿色。如图，在三棱镜下，可以看到太阳光有紫、靛、蓝、绿、黄、橙、红七种颜色，正如雨后的彩虹会呈现此七种色一样。,一、色彩基础,自然界中的颜色可以分为非彩色和彩色两大类。 非彩色指黑色、白色和各种深浅不一的灰色，而其他所有颜色均属于彩色。任何一种彩色具有三个属性，明度、色相、饱和度。,（2）色彩的属性,色相(Hue)：也叫色泽，是颜色的基

3、本特征，反映颜色的基本面貌。可以理解成颜色的名字。比如，“红”。,饱和度(Saturation)：色彩的鲜浊称为饱和度或饱和度，鲜艳的色彩饱和度一般都比较高，这样的颜色比较刺眼，所以饱和度比较高的色彩一般都不用在背景上。,明度(Brightness或Lightness或Luminousity)：也叫亮度，体现颜色的明暗度。如白色明度高，黑色明度低，黄色是明度最高的色彩，紫色是明度最低的色彩。,非彩色只有明度特征，没有色相和饱和度的区别。 人眼对于黄色和绿色的光是最敏感的，因为这些光比可见光两端的光（蓝色和红色）看起来更明亮些，可在一些特别需要提醒用户注意的地方使用。,三原色：大多数色彩可以用其

4、它色彩混合而成，不能用其它色彩混合而成的色彩叫原色。 原色有两个系统，光的三原色：红，绿，蓝是光的三原色，三色混合成为白光；色素或颜料的三原色：红，黄，蓝是颜料的三原色，三色混合成为黑灰色。,（3）色彩的三原色和色环,色环：我们将色彩按“红-黄-绿-蓝-红“依次过度渐变，就可以得到一个色彩环。,在24色色环中，根据位置的不同，颜色间可构成四种关系,同类色 邻近色 对比色 互补色,互补色 色环中相隔180度的两个色相，均为互补色关系，如红与绿，橙与蓝，黄与紫等。互补色组成的色组，是对比最强的色组，富于刺激性，不安定，有极强的视觉冲击力和热烈感。如果搭配不当，容易产生生硬、浮夸、急躁等效果，使用时

5、要注意处理面积的大小和分散形态的方法来调节、缓和过于激烈的效果。如橙色面积大而且加入红色，起到了主导色调的作用，与蓝色对比效果既艳丽、辉煌又恰到好处。,对比色 色环中相隔135度的两个色相，为对比色关系，属中强对比效果。,邻近色 色环中相隔90度的两个色相，为邻近色关系，色彩倾向近似，冷色组或暖色组较明显，色调统一和谐，感情特征一致。,同类色 色环中相隔45度的两个色相，为同类色关系，属较弱对比效果，主调十分明确，是极为协调、单纯的色调。,二、色彩感觉,（1）心理感受 面对色彩时，看者的心理会受到颜色的影响而起变化，这种变化虽然有个人差异，但大多数会有下列心理反应效果，冷暖、轻重、软硬、华丽朴

6、素、积极消极等几方面。其实色彩本身是不带任何含义的,是人的心理感觉把它们分成不同的类别。例如在夏天,如果你在家里家把所有的灯关掉,把窗帘换成深绿色,不见一丝阳光,这时你在心理上会感到非常凉快 !这些并非是真实的的温度,它只是色彩影响人的心理所产生的感觉。,冷暖： 能使人感受到温暖之类的色彩称为暖色，反而称为冷色，红色能使人联想到太阳或火，有热量感，所以属于或靠近于红色之类的色彩都称为暖色。蓝色能使人联想到海洋、天空，有爽快之感，浅蓝色能产生寂寞、冷淡之感，所以属于或靠近于蓝色之类的色彩都称为冷色。暖色给人热烈、热情、刺激、膨胀、前进、喜庆等感觉，冷色给人寒冷、清爽、收缩、后退等感觉。色彩的冷暖

7、对比在运用中极其重要。,轻重： 黑色和白色属于中性色，它们不易分出冷暖，但有明显的轻重之分，黑色能给人很有重量的感觉，白色能给人有轻于鸿毛的感觉，所以有着明显的轻重之分，一般来说明度不强的色彩都属于重色彩，明度强的色彩都属于轻色彩。,软硬：饱和度不高的亮色会使人觉得柔和,饱和度高的颜色会使人觉得强硬。 华丽朴素：饱和度高的色彩给人的感觉华丽，而饱和度低的色彩给人的感觉朴素。 积极消极：暖色给人的感觉兴奋而积极，冷色给人的感觉沉静而消极。,色彩的联想作用虽是属于心理学的问题，然而它的适用性在设计上是很重要的，若不能预测人是如何感觉色彩，如何发生作用，就无法有效地活用色彩。由于色彩与人的情绪有着微

8、妙的联系，利用不同的色调设计网页会给浏览者不同的心理感受，凭着感觉和经验，人们一般这样认为：,（2）颜色的联想,红色是一种激奋的色彩。代表热情、奔放、喜悦、庆典,有刺激效果，能使人产生冲动，有愤怒、热情、活力的感觉。 绿色介于冷暖两中色彩的中间，代表植物、生命、生机,有和睦、宁静、健康、安全的感觉。它和金黄、淡白搭配，可以产生优雅、舒适的气氛。,橙色也是一种激奋的色彩，具有轻快、欢欣、热烈、温馨、时尚的效果。 黄色代表高贵、富有,具有快乐、希望、智慧和轻快的个性，它的明度最高。 蓝色代表天空、清爽，是最具凉爽、清新、专业的色彩。它和白色混合，能体现柔顺、淡雅、浪漫的气氛(象天空的色彩)。,棕色

9、代表土地。 白色代表纯洁、简单，具有洁白、明快、纯真、清洁的感受。 黑色代表严肃、夜晚、沉着，具有深沉、神秘、寂静、悲哀、压抑的感受。 灰色代表阴暗、消极，具有中庸、平凡、温和、谦让、中立和高雅的感觉。,有些色彩给人的感觉是双重的，比如黑色有时给人沉默、虚空的感觉，但有时也给人一种庄严、肃穆的感觉。白色也是同样有时给人无尽的希望，但有时也给人一种恐惧和悲哀的感受。每种色彩在饱和度，透明度上略微变化，就会产生不同的感觉。,不同的国家、民族、年龄层次的人往往对色彩有不同的理解。比如白色，对西方人来讲代表纯洁，对中国人来讲是不吉利；红色对于孩子来讲是喜庆，但老年人看来或许会感到烦躁。因此设计者必须根

10、据使用对象的特点来选择色彩，以尽量符合人们普遍接受的色彩意义。如彩图，奥迪公司的网站以灰色调为主，高雅大方，与奥迪公司的精品气质非常吻合，是运用色彩联想的典范。,（1）色调 在颜色的属性中，色相比较容易区别，但是明度和饱和度有时则不易区别，所以把明度和饱和度放在一起，做为颜色的调子，即色调。色调是色彩作品的总倾向、总特征，是直接传达设计意念的关键，就象论文的中心论点一样，论据、论证均是围绕中心论点展开的，统一在一个调子里。,三、色调和色彩搭配,色彩的主色调分为以色相关系为主的调子，如冷调、暖调、红调、绿调等，也分为以鲜灰、明暗关系为主的调子，如明灰调、暗色调等。在色彩关系不变的前提下，只改变作

11、品中色块的面积、形状、位置、数量等形象关系，主色调会发生变化，并可以从中获取完全不同意想的色彩效果。,（2）配色 组合两种以上的颜色称为配色。单是一种颜色无所谓美不美，必须两种以上的颜色排在一起才知道美的效果。下面我们就来分析一下。,色相搭配 分为类似色相配色、补色配色。两种颜色放在一起，会产生相互反衬的对比效应，各自走向自已的极端，例如红色与绿色对比，红的更红，绿的更绿，黑色与白色对比，黑的更黑，白的更白。这是因为人的眼睛存在残像现象，当你凝视一红色块稍久，然后突然把目光转向一张白纸，眼前就会出现青绿色的虚影。当你要产生鲜明、强烈的对比效果时，利用补色残像原理，使色彩双方得以互增互补。比如在

12、绿色底上的红紫色、红橙色，红色的感觉就更强、更鲜艳。当要寻求安定、平静的色调时，可以在每种颜色中混入少许其补色，以降低对比的强度。另外，还可以利用近似明度、色相、关系，排除残像效应，同化融合成一组和谐和色彩。,明度搭配 分为高明度、中明度、低明度及明暗对比。暗色和高亮色，会给人清晰、强烈的刺激，如深黄和亮黄色。暗色中含高纯色，会给人沉着、稳重、深沉的感觉，如深红和大红。中性色与低明度的对比，给人模糊、朦胧、深奥的感觉，如草绿和浅灰。纯色与高亮度色，给人跳跃舞动的感觉，如黄色与白色。纯色与低亮度色，给人轻柔、欢快的感快，如浅蓝色与白色。纯色与暗色的对比，给人强硬，不可改变的感觉。如彩图5-13所

13、示51go网站中的橙色和黑色的明度配色，体现了个性十足的网站特色。,饱和度搭配 分为高饱和度、中饱和度、低饱和度的搭配。纯色之间的对比给人的视觉刺激最强烈，使色彩的效果更明确肯定。例如红、黄、蓝三种就是最极端的色彩 ，这三种之间对比,哪一种色也无法影响对方.而非纯色对比出来的效果就显得很柔和。黄色是夺目的色，但是加入灰色会失去其夺目的光彩，通常可以混入黑,白,灰色来降低饱和度。,整体色调 设计作品给观者的感受是由全体配色效果决定的，作品是充满活力或是稳定的，还是寂寞的温暖的，都得看整体的色调而定，取决于配色的色相、明度、饱和度的关系和色彩面积大小的关系。首先确定配色中占具最大面积的色彩，它决定

14、主调。,在色彩的面积对比关系中，如果两种色块同样大小，那么这两种色块之间的对比强烈，但是大小变得不一样时，小的一种色块就会成为大的色块的补充，其实人不会注意到小块的色彩，而只会感觉到大的色块的存在。色彩的大小对比会令色彩有一种生动效果，试在一大片绿色中加入一小点红色，你会注意到红色在绿色的衬托底下很抢眼，这就是色彩的大小对比效果的影响，在大面积的色彩陪衬底下，小面积的纯色会特别突出，但是如果用较淡的色彩，则会让人感觉不到这种色彩的存在，例如在黄色中加入淡灰色，你就根本不会注意到淡灰色。,四、计算机色彩 网页设计还需要对颜色在计算机显示器上的显示原理有一个基本的了解。 显示器的色彩是由RGB（红

15、、绿、蓝）三种色光所合成的，我们可通过调整这三个基色调校出其它的颜色，网页html语言中的色彩表达即是用这三种颜色的数值表示。例如：红色是color(255,0,0)，十六进制的表示方法为(FF0000)，白色为(FFFFFF)。十六进制颜色值为6位数字，前面两位定义红色，中间两位定义绿色，后两位定义蓝色。颜色在不同的显示器上的效果有很大不同，这取决于用户的偏好设置及显示器的种类。,五、硬件界面的色彩设计,1.满足产品的功能要求 例如，现在的消防车都采用红色为主体色调，这是根据消防车的功能特点和色彩的功能作用与联想作用相结合而进行选择的。,2.满足人机相适应的要求 例如，一般机床设备的底座、床

16、身、立柱等大件，宜用沉重、坚实的色，使人感到机床稳定可靠，而工作台、溜板箱、滑块等零件，往往处在人经常工作的部位，这些零件宜采用浅色，以解除人的沉闷感。,3.满足作业环境的要求 4.符合造型设计的美学法 5.符合时代的审美要求,六、软件设计的色彩搭配,色彩设计的一些原则 （1）在一帧屏幕上的色彩种类数目，在非真实感图形显示时，应加以限制，一般少于7种。因为人们在观察屏幕时很难同时分辨多种色彩。 （2）根据对象的重要性来选择颜色，对于重要的对象应选取醒目的颜色。 （3）一个系统中各种颜色设计应该一致。例如错误信息用红色表示时，都应前后一致用红色表示，黄色表示警告，绿色表示运行正常。,（4）在色彩

17、的选取上尽可能符合人们的习惯用法。例如，在财务上红色表示赤字；化工上红色代表热，绿色表示冷；地图上蓝色表示水，黄色代表沙漠，绿色代表平原。 （5）背景色一般选用饱和度低的浅色，如灰色或带有网格点的浅色。蓝色对人眼不敏感，对于大面积的区域或背景来说比较合适；但蓝色不宜用在小区域、细的线段或文字上。 （6）表示温暖的颜色（如红、桔红、黄）接近用户，表示冷的颜色（如蓝、绿、紫）远离用户。 （7）为了使色彩醒目，便于区分对象，应选用好的背景色与前景色搭配。,软件色彩设计(Windows XP ),1.基本色,2.控制色（示例）,3.窗口框架和任务栏色彩（示例）,4.图标颜色（示例）,5.欢迎屏幕颜色（

18、示例）,6.文件夹颜色（示例）,另外，其他一些公司也十分重视软件界面的色彩设计。,诺顿（Norton）改变了过去的色彩计划，在Norton Systemworks中将主色调设计为以黄色为主。,七、网页色彩搭配的原则 色彩搭配应以大众的欣赏习惯为标准，同时兼顾网站专业特点和艺术规律。网页的色彩搭配应遵循以下几个原则： 1、色彩的合理性 网页的色彩要漂亮、引人注目，同时还要照顾到人的眼睛的生理特点，不要用大面积的高纯度色相，它容易使人的眼睛疲劳。 2、色彩的独特性 要有与众不同的色彩搭配，衬托出网站的个性，使得大家对你的印象深刻。,3、色彩的艺术性 色彩设计属于艺术形式的范畴，按照内容决定形式的原

19、则，色彩应服务于网站的内容，和网站的气氛相适应。蓝色、灰色常常用于工业高科技企业，如奥迪公司的网页大量使用灰色，显得十分高贵，而粉色则体现女性站点的柔美。,每种色彩在纯度、明度上略微变化就会产生不同的感觉，以绿色为例，绿色中加上较多的黄色，有青春旺盛的视觉意境。而含有较多蓝色成分的绿色，则显得幽宁阴深。黑底色上点缀的高纯度红、黄、蓝、绿色使黑色变得透明。黑色令人想到黑夜，可用做娱乐业站点的基本色调。红色可用于商业、零售业站点等，总之选择色调一定要和网站的主要内容相适应。,青蛙公司用户界面栏目的界面设计,,七、搭配技巧 网页制作用彩色还是非彩色好呢？根据专业的研究机构研究表明：从人的记忆效果看，

20、我们对彩色的记忆是黑白的3.5倍。也就是说，在一般情况下，彩色页面较完全黑白页面更加吸引人。,（1）非彩色的搭配 黑白是最基本和最简单的搭配，白字黑底，黑底白字都非常清晰明了。灰色是万能色，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。如果你实在找不出合适的色彩，那么用灰色试试，效果绝对不会太差。 一般印刷品较少用大面积的黑色，而网页设计中以黑色为底的网站比较多，见尤其是一些艺术网站更多。在RGB色彩模式中，黑色是透明的，感觉它很容易与其他高纯度的原色相协调，制作出新颖别致的网页。,（2）彩色的搭配 同类色的应用 同类色是由一种色彩呈现出的不同透明度或者饱和度(通俗地说，就是将色彩变淡

21、或加深)时而产生色彩系列。由这样的色彩搭配出来的页面看起来统一、和谐、有层次感，比较适合于技术性、专业性站点。,邻近色的应用 先选定一种色彩，然后选择它在色谱里相邻区域的颜色，如红和紫色互为邻近色；黄色与绿色互为邻近色，邻近色搭配可以使整个页面色彩丰富，但不花哨。,对比色的应用 原色饱和度较高的色彩搭配使用，即为对比色。各种色彩均可作为对比色使用，但应以一种颜色为主调，使它占有较大的面积同时，辅以对比色，起到点缀丰富的作用。例如以粉红色为主的色调，配以小面积的淡蓝、淡黄、淡绿或者土黄、土灰、土蓝，商业零售站点、新闻站点常常运用对比色，造成丰富充实的效果。网站的客户群体主要是青年女性，网页中的对

22、比色显得活泼、明快，洋溢着青春的气息。,（3）网页色彩掌握的过程 随着网页制作经验的积累，我们用色有这样的一个趋势:单色-五彩缤纷-标准色-单色。,一开始因为技术和知识缺乏，只能制作出简单的网页，色彩单一；在有一定基础和材料后，希望制作一个漂亮的网页，将自己收集的最好的图片，最满意色彩堆砌在页面上；但是时间一长，却发现色彩杂乱，没有个性和风格；第三次重新定位自己的网站，选择好切合自己的色彩，推出的站点往往比较成功；当最后设计理念和技术达到顶峰时，则又返朴归真，用单一色彩甚至非彩色就可以设计出简洁精美的站点。总之，不要将所有颜色都用到，要保持主色调的一致，初学者可以把颜色尽量控制在三种色彩以内。, http:/ http:/ www.drf- 动画 http:/