人机界面设计之色彩设计

人机界面设计
上上设计
在24色色环中，根据位置的不同，颜色间可构成四种 关系
同类色
邻近色
对比色
互补色
人机界面设计
上上设计
互补色 色环中相隔180度的两个色相，均为互补色关系，
如红与绿，橙与蓝，黄与紫等。互补色组成的色
组，是对比最强的色组，富于刺激性，不安定， 有极强的视觉冲击力和热烈感。如果搭配不当， 容易产生生硬、浮夸、急躁等效果，使用时要注 意处理面积的大小和分散形态的方法来调节、缓
人 机 界 面 设 计
Human-Machine Interface Design
人机界面设计
上上设计
第五章 色彩设计
一、色彩基础
二、色彩感觉 三、色调和色彩搭配 四、计算机色彩 五、网页色彩搭配的原则
六、搭配技巧
人机界面设计
上上设计
在人机界面设计中，色彩较之形往往具有先声夺 人的魅力，同一种界面设计由于色彩的差异可以
微变化，就会产生不同的感觉。
人机界面设计
上上设计
不同的国家、民族、年龄层次的人往往对色彩有 不同的理解。比如白色，对西方人来讲代表纯洁， 对中国人来讲是不吉利；红色对于孩子来讲是喜 庆，但老年人看来或许会感到烦躁。因此设计者 必须根据使用对象的特点来选择色彩，以尽量符 合人们普遍接受的色彩意义。如彩图，奥迪公司
给人截然不同的感受和印象。如何才能最大限度
地发挥色彩的美学功能和视觉效益，创造良好的
界面效果，仍是人机界面色彩设计的关键问题。
♣ 界面 ♣ 网页
人机界面设计
上上设计
一、色彩基础 （1）颜色的产生 唤起我们对色彩感觉的关键在于光，光是属于一定波 长范围内的一种电磁辐射，色彩感觉是由于光照射到 物体后，物体的反光而使人的视觉和大脑产生作用的 结果，是一种视知觉。有光照射在物体的表面，一部 分光被吸收，另一部分被反射回来，被反射回的光反 应出你看到的物体的颜色。太阳光照在白纸上，光线 基本完全被反射，所以你看到的是白色，黑色物体则 完全吸收光线，所以看到的是黑色。绿叶吸收白光中 其他光波的色光，只反射绿色光波的光，因此树叶呈 绿色。如图，在三棱镜下，可以看到太阳光有紫、靛、 蓝、绿、黄、橙、红七种颜色，正如雨后的彩虹会呈 现此七种色一样。
白色代表纯洁、简单，具有洁白、明快、纯真、
清洁的感受。
黑色代表严肃、夜晚、沉着，具有深沉、神秘、
寂静、悲哀、压抑的感受。
灰色代表阴暗、消极，具有中庸、平凡、温和、
谦让、中立和高雅的感觉。
人机界面设计
上上设计
有些色彩给人的感觉是双重的，比如ቤተ መጻሕፍቲ ባይዱ色有 时给人沉默、虚空的感觉，但有时也给人一 种庄严、肃穆的感觉。白色也是同样有时给 人无尽的希望，但有时也给人一种恐惧和悲 哀的感受。每种色彩在饱和度，透明度上略
活用色彩。由于色彩与人的情绪有着微妙的联系，
利用不同的色调设计网页会给浏览者不同的心理
感受，凭着感觉和经验，人们一般这样认为：
人机界面设计
上上设计
红色是一种激奋的色彩。代表热情、奔放、喜悦、
庆典,有刺激效果，能使人产生冲动，有愤怒、热
情、活力的感觉。 绿色介于冷暖两中色彩的中间，代表植物、生命、 生机,有和睦、宁静、健康、安全的感觉。它和金 黄、淡白搭配，可以产生优雅、舒适的气氛。
高，黑色明度低，黄色是明度最高的色彩，
紫色是明度最低的色彩。
人机界面设计
上上设计
非彩色只有明度特征，没有色相和饱和度的区
别。
人眼对于黄色和绿色的光是最敏感的，因为这
些光比可见光两端的光（蓝色和红色）看起来
更明亮些，可在一些特别需要提醒用户注意的
地方使用。
人机界面设计
上上设计
（3）色彩的三原色和色环
和过于激烈的效果。如橙色面积大而且加入红色，
起到了主导色调的作用，与蓝色对比效果既艳丽、 辉煌又恰到好处。
人机界面设计
上上设计
对比色 色环中相隔135度的两个色相，为对比色关系，属
中强对比效果。
邻近色 色环中相隔90度的两个色相，为邻近色关系，色
彩倾向近似，冷色组或暖色组较明显，色调统一
和谐，感情特征一致。
的网站以灰色调为主，高雅大方，与奥迪公司的
精品气质非常吻合，是运用色彩联想的典范。
人机界面设计
上上设计
三、色调和色彩搭配
（1）色调
在颜色的属性中，色相比较容易区别，但是明
度和饱和度有时则不易区别，所以把明度和饱和
度放在一起，做为颜色的调子，即色调。色调是 色彩作品的总倾向、总特征，是直接传达设计意 念的关键，就象论文的中心论点一样，论据、论 证均是围绕中心论点展开的，统一在一个调子里。
人机界面设计
上上设计
同类色
色环中相隔45度的两个色相，为同类色 关系，属较弱对比效果，主调十分明确， 是极为协调、单纯的色调。
人机界面设计
上上设计
二、色彩感觉
（1）心理感受 面对色彩时，看者的心理会受到颜色的影响而起 变化，这种变化虽然有个人差异，但大多数会有下 列心理反应效果，冷暖、轻重、软硬、华丽朴素、 积极消极等几方面。其实色彩本身是不带任何含义 的,是人的心理感觉把它们分成不同的类别。例如在 夏天,如果你在家里家把所有的灯关掉,把窗帘换成深 绿色,不见一丝阳光,这时你在心理上会感到非常凉快 ! 这些并非是真实的的温度,它只是色彩影响人的心理 所产生的感觉。
人机界面设计
上上设计
轻重： 黑色和白色属于中性色，它们不易分出冷暖， 但有明显的轻重之分，黑色能给人很有重量 的感觉，白色能给人有轻于鸿毛的感觉，所 以有着明显的轻重之分，一般来说明度不强
的色彩都属于重色彩，明度强的色彩都属于
轻色彩。
人机界面设计
上上设计
软硬：饱和度不高的亮色会使人觉得柔和,饱和度
人机界面设计
上上设计
色彩的主色调分为以色相关系为主的调子，如冷
调、暖调、红调、绿调等，也分为以鲜灰、明暗
关系为主的调子，如明灰调、暗色调等。在色彩 关系不变的前提下，只改变作品中色块的面积、 形状、位置、数量等形象关系，主色调会发生变 化，并可以从中获取完全不同意想的色彩效果。
人机界面设计
上上设计
字。比如，“红”。
人机界面设计
上上设计
饱和度(Saturation)：色彩的鲜浊称为饱和度或
饱和度，鲜艳的色彩饱和度一般都比较高，
这样的颜色比较刺眼，所以饱和度比较高的 色彩一般都不用在背景上。
人机界面设计
上上设计
明 度 ( Brightness 或 Lightness 或 Luminousity)： 也叫亮度，体现颜色的明暗度。如白色明度
三原色：大多数色彩可以用其它色彩混合而成， 不能用其它色彩混合而成的色彩叫原色。 原色有两个系统，光的三原色：红，绿，蓝是光 的三原色，三色混合成为白光；色素或颜料的三 原色：红，黄，蓝是颜料的三原色，三色混合成 为黑灰色。
人机界面设计
上上设计
色环：我们将色彩按"红->黄->绿->蓝->红"依
次过度渐变，就可以得到一个色彩环。
高的颜色会使人觉得强硬。
华丽朴素：饱和度高的色彩给人的感觉华丽，而 饱和度低的色彩给人的感觉朴素。
积极消极：暖色给人的感觉兴奋而积极，冷色给
人的感觉沉静而消极。
人机界面设计
上上设计
（2）颜色的联想
色彩的联想作用虽是属于心理学的问题，然而
它的适用性在设计上是很重要的，若不能预测人
是如何感觉色彩，如何发生作用，就无法有效地
人机界面设计
上上设计
饱和度搭配 分为高饱和度、中饱和度、低饱和度 的搭配。纯色之间的对比给人的视觉刺激最强烈， 使色彩的效果更明确肯定。例如红、黄、蓝三种就 是最极端的色彩 ，这三种之间对比,哪一种色也无 法影响对方.而非纯色对比出来的效果就显得很柔 和。黄色是夺目的色，但是加入灰色会失去其夺目 的光彩，通常可以混入黑,白,灰色来降低饱和度。
人机界面设计
上上设计
五、硬件界面的色彩设计
1.满足产品的功能要求 例如，现在的消防车都采用红色为主体色调，这是根 据消防车的功能特点和色彩的功能作用与联想作用相 结合而进行选择的。
人机界面设计
上上设计
2.满足人机相适应的要求 例如，一般机床设备的底座、床身、立柱等大件，宜 用沉重、坚实的色，使人感到机床稳定可靠，而工作 台、溜板箱、滑块等零件，往往处在人经常工作的部 位，这些零件宜采用浅色，以解除人的沉闷感。
人机界面设计
上上设计
整体色调 设计作品给观者的感受是由全体配色效果
决定的，作品是充满活力或是稳定的，还
是寂寞的温暖的，都得看整体的色调而定， 取决于配色的色相、明度、饱和度的关系 和色彩面积大小的关系。首先确定配色中 占具最大面积的色彩，它决定主调。
人机界面设计
上上设计
在色彩的面积对比关系中，如果两种色块同样大小， 那么这两种色块之间的对比强烈，但是大小变得不
人机界面设计
上上设计
四、计算机色彩 网页设计还需要对颜色在计算机显示器上的显示 原理有一个基本的了解。 显示器的色彩是由RGB（红、绿、蓝）三种色光 所合成的，我们可通过调整这三个基色调校出其它 的颜色，网页html语言中的色彩表达即是用这三种 颜色的数值表示。例如：红色是color(255,0,0)，十 六进制的表示方法为(FF0000)，白色为(FFFFFF)。 十六进制颜色值为6位数字，前面两位定义红色， 中间两位定义绿色，后两位定义蓝色。颜色在不同 的显示器上的效果有很大不同，这取决于用户的偏 好设置及显示器的种类。
人机界面设计
上上设计
橙色也是一种激奋的色彩，具有轻快、欢欣、热
烈、温馨、时尚的效果。
黄色代表高贵、富有,具有快乐、希望、智慧和轻
快的个性，它的明度最高。
蓝色代表天空、清爽，是最具凉爽、清新、专业
的色彩。它和白色混合，能体现柔顺、淡雅、浪
漫的气氛(象天空的色彩)。
人机界面设计
上上设计
棕色代表土地。
人机界面设计
上上设计
人机界面设计
上上设计
（2）色彩的属性
自然界中的颜色可以分为非彩色和彩 色两大类。 非彩色指黑色、白色和各种深浅不一 的灰色，而其他所有颜色均属于彩色。任 何一种彩色具有三个属性，明度、色相、 饱和度。
人机界面设计
上上设计
色相(Hue)：也叫色泽，是颜色的基本特征，
反映颜色的基本面貌。可以理解成颜色的名
人机界面设计
上上设计
明度搭配 分为高明度、中明度、低明度及明暗对 比。暗色和高亮色，会给人清晰、强烈的刺激，如 深黄和亮黄色。暗色中含高纯色，会给人沉着、稳 重、深沉的感觉，如深红和大红。中性色与低明度 的对比，给人模糊、朦胧、深奥的感觉，如草绿和 浅灰。纯色与高亮度色，给人跳跃舞动的感觉，如 黄色与白色。纯色与低亮度色，给人轻柔、欢快的 感快，如浅蓝色与白色。纯色与暗色的对比，给人 强硬，不可改变的感觉。如彩图5-13所示51go网站 中的橙色和黑色的明度配色，体现了个性十足的网 站特色。
人机界面设计
上上设计
冷暖：
能使人感受到温暖之类的色彩称为暖色，反而称为 冷色，红色能使人联想到太阳或火，有热量感，所 以属于或靠近于红色之类的色彩都称为暖色。蓝色 能使人联想到海洋、天空，有爽快之感，浅蓝色能 产生寂寞、冷淡之感，所以属于或靠近于蓝色之类 的色彩都称为冷色。暖色给人热烈、热情、刺激、 膨胀、前进、喜庆等感觉，冷色给人寒冷、清爽、 收缩、后退等感觉。色彩的冷暖对比在运用中极其 重要。
一样时，小的一种色块就会成为大的色块的补充，
其实人不会注意到小块的色彩，而只会感觉到大的 色块的存在。色彩的大小对比会令色彩有一种生动 效果，试在一大片绿色中加入一小点红色，你会注 意到红色在绿色的衬托底下很抢眼，这就是色彩的
大小对比效果的影响，在大面积的色彩陪衬底下，
小面积的纯色会特别突出，但是如果用较淡的色彩， 则会让人感觉不到这种色彩的存在，例如在黄色中 加入淡灰色，你就根本不会注意到淡灰色。
（2）配色 组合两种以上的颜色称为配色。单是一种 颜色无所谓美不美，必须两种以上的颜色排 在一起才知道美的效果。下面我们就来分析 一下。
人机界面设计
上上设计
色相搭配 分为类似色相配色、补色配色。两种颜 色放在一起，会产生相互反衬的对比效应，各自走 向自已的极端，例如红色与绿色对比，红的更红， 绿的更绿，黑色与白色对比，黑的更黑，白的更白。 这是因为人的眼睛存在残像现象，当你凝视一红色 块稍久，然后突然把目光转向一张白纸，眼前就会 出现青绿色的虚影。当你要产生鲜明、强烈的对比 效果时，利用补色残像原理，使色彩双方得以互增 互补。比如在绿色底上的红紫色、红橙色，红色的 感觉就更强、更鲜艳。当要寻求安定、平静的色调 时，可以在每种颜色中混入少许其补色，以降低对 比的强度。另外，还可以利用近似明度、色相、关 系，排除残像效应，同化融合成一组和谐和色彩。