教学课件4-人机界面的艺术设计

人机界面的艺术设计，主要是从美的需求出发，来研究人机界面以何种形式呈现。其中，硬件界面设计主要由工业设计师与技术工程师完成，软件界面设计主要由艺术设计人员、界面设计师与软件工程师完成。第3章人机界面的艺术设计13.1艺术设计的研究内容3.2.艺术设计的形态3.3艺术设计的内涵3.4色彩调和与色彩搭配3.5色彩感觉3.6软件设计的色彩搭配23.1艺术设计的研究内容艺术设计，是指非艺术的尤其是非纯艺术的物质产品的设计，它的产品对象主要是批量生产的工业化产品，包括软件产品。之所以冠以“艺术”二字，在于它具有艺术的某些特质和一定的审美价值。人机界面中的艺术设计，要看界面涉及的具体内容。硬件界面与软件界面，对于艺术设计的要求是不一样的，同时又存在着本质上的联系。3艺术设计不同于技术设计，它在解决物与物关系的同时，还侧重解决物与人的关系，涉及产品的外观造型、形体布局、装饰效果、色彩搭配等。艺术设计要考虑产品对人的心理、生理的作用，从而提高产品在市场上的竞争力。艺术设计也不同于纯艺术，它首先应满足消费者的物质需求，以实现功能为目的，其次才是满足精神上的需求。它对产品的外形、图案、装饰、色彩的关注，必须以特定的功能和内部结构为基础。43.2艺术设计的形态所谓形态，是内在的质、组织、结构、内涵等本质因素，上升到外在的表象因素。通过视觉而产生的一种生理、心理过程，通常与感觉、构成、结构、材质、色彩、空间、功能等紧密联系。反映在硬件界面上，形态是以客观存在的形态与人们发生关系；而对于软件界面，它则是以一种非物质化的数字形态与人们进行交互。在界面设计要素中，形态是一种最容易理解、又最引人注目的要素。正因为如此，每个设计师都要煞费心思地在用户界面形态上做文章。5宇宙间万物的形态，无论其复杂性如何，皆可归纳为点、线、面、体四个固定而单纯的基本架构。抽象派画家康定斯基曾说过，“点、线、面是造型艺术表现的最基本的语言单位，它具有符号和图形特征，能表达不同的性格和丰富的内涵，它抽象的形态，赋予艺术内在的本质和超凡的精神。”63.3

艺术设计的内涵艺术设计包括文化、经济、社会、科技等特性内涵。艺术设计的文化特性：文化是协调人与自然、人与人以及人与社会的媒介，也是人机交互研究的一个重要课题。作为艺术与技术的结合，设计要以科技即智能文化为基础，以一定的价值观文化为导向，以艺术作为形式创造的手段，为人们的生活方式提供物质和非物质的依托。艺术设计师受到文化的制约，按照人的需要、爱好和情趣来设计产品，通过设计新器物以改变文化价值。艺术设计的经济特性：艺术设计的经济性是其区别于纯艺术、手工艺的首要特征。设计是创造高附加价值的办法。就设计物本身来说，成本、生产流程、生产技术、产量、价格等方面内容直接影响着它的功能因素的发挥，相应的社会经济环境、市场需求和销售策略则决定了设计物的实现效果和价值内容。好的设计不仅能够增加品种、节能降耗，建立良好的企业形象，还能发展具有高附加值的产品。7艺术设计的社会特性：这主要表现在以下两个方面；第一，设计的服务对象是包括各阶层的社会大众；第二，设计既要受社会制约，同时又对社会的进步产生巨大的推动作用。艺术设计的科技特性：设计依赖于高科技，现代设计要求更加智能化、更加灵活，以适应不同消费者的文化背景。高科技对设计的影响主要体现在以下方面：①设计对象的变化。信息时代提供了大量以视觉传达艺术、符号学和数字化的信息传达技术为基础的电子信息产品。同时，不断增加的媒体也正在造就不少新兴的信息产业，如移动通信、计算机产业等，为设计师提供了新的设计对象。②设计方式的变化。并行设计、协同设计、虚拟设计、敏捷设计。83.4色彩调和与色彩搭配在人机界面设计中，色彩往往具有先声夺人的魅力。同一种界面设计，色彩的差异可以给人截然不同的感受和印象。如何才能最大限度地发挥色彩的美学功能和视觉效益，创造良好的界面效果，是人机界面色彩设计的关键问题。在界面设计中，常用色彩的色调、色彩的搭配关系达到一定的视觉效果，起到短时“凝聚”人的视觉的作用。91、

色调在色彩的属性中，色相比较容易区别，但是明度和纯度有时则不易区别，所以把明度和纯度放在一起，作为色彩的调子，即色调。色调是色彩作品的总倾向、总特征，是直接传达设计意念的关键。色彩的主色调分为以色相关系为主的调子，如冷调、暖调、红调、绿调等，以及以鲜灰、明暗关系为主的调子，如明灰调、暗色调等。在色彩关系不变的前提下，只改变作品中色块的面积、形状、位置、数量等形象关系，主色调会发生变化，并可以从中获取意想不到的色彩效果。10111213142、配色组合两种以上的颜色称为配色。（1）三基色原理

人眼的彩色视觉有这样一种特性，即某一单色光的彩色视觉可以由不同光谱的光组合而获得，并与该单色光产生相同的彩色感觉。如果合适地选择三种基本颜色并把他们按不同的比例组合，可以引起人眼各种不同的颜色感觉，这就是三基色原理。从理论上讲，三种基色的选择是任意的。在多媒体计算机和彩色电视机中，通常选用红、绿、蓝三种颜色作为三基色。其原因主要有：

1、人眼对红、绿、蓝三种颜色比较敏感；

2、红、绿、蓝三种颜色彼此互为独立；15红色+绿色=黄色红色+蓝色=品红绿色+蓝色=青色红色+青色=绿色+品红=蓝色+黄色=白色我们称青色、品红和黄色分别为红、绿、蓝三色的补色。三基色光的等量混合构成无色光，称为白光，即:红色+绿色+蓝色=白色红、绿、蓝三原色或三基色，通常用R、G、B来表示。16由三基色原理可知，适当选择三种基色，按不同比例混合，就可引起不同的色彩感觉。合成彩色的亮度是三个基色的亮度之和，而色度(色调和饱和度)则由三个基色的比例决定。

基于三基色原理，对人眼的混色可分为两类，即相加混色和相减混色。17相加混色模型（RGB型颜色空间）

将三种基色光，按不同的比例混合相加，从而获得不同彩色光的方法，称为相加混色。

RGB模型适用于显示器这类发光物体，即用在所有使用光线形成色彩的设备上。这些设备包括电视、显示器、电影、投影机和扫描仪等。18相减混色模型（CMY型颜色空间）

CMY模型主要用于彩色打印机和彩色图片印刷这类吸光物体上。以打印在纸上的油墨的光线吸收特性为基础。当白光照射到半透明的油墨上时，某些可见光波长被吸收（减去），而其他波长则被反射回眼睛。这些颜色因此称为减色。理论上，青色(C)、品红色(M)和黄色(Y)色素在合成后可以吸收所有光线并产生黑色。19相加混色相减混色生成色关系R(红)G(绿)B(蓝)C(青)M(品红)Y(黄)颜色互为反码000111黑001110蓝010101绿011100青100011红101010品红110001黄111000白RGB相加混色与CMY相减混色的关系20（2）色相搭配分为类似色相配色、补色配色。两种色彩放在一起，会产生相互反衬的对比效应，各自走向自己的极端，例如红色与绿色对比，红得更红，绿得更绿；黑色与白色对比，黑得更黑，白得更白。这是因为人的眼睛存在“负残像”现象，当眼睛凝视红色块稍久，然后突然把目光转向一张白纸，眼前就会出现青绿色的虚影。当要产生鲜明、强烈的对比效果时，利用视觉的“负残像”原理，使色彩双方得以互增互补。比如在绿色底上的红紫色、红橙色，红色的感觉就更强、更鲜艳。当要寻求安定、平静的色调时，可以在每种色彩中混入少许其补色，以降低对比的强度。另外，还可以利用近似明度、色相关系，排除负残像效应，同化融合成一组和谐的色彩。21（3）

明度搭配

分为高明度、中明度、低明度及明暗对比。暗色和高亮色搭配，会给人清晰、强烈的刺激，如深黄和亮黄色；暗色搭配高纯色，会给人沉着、稳重、深沉的感觉，如深红和大红；个性色与低明度的对比，给人模糊、深奥的感觉，如草绿和浅灰；纯色与高亮度色，给人跳跃舞动的感觉，如黄色与白色；纯色与低亮度色，给人轻柔、欢快的感觉，如浅蓝色与白色；纯色与暗色的对比，给人强硬，不可改变的感觉。22（4）

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

面积对比在色彩的面积对比关系中，如果两种色块同样大小，那么这两种色块之间的对比强烈；如果大小变得不一样时，小的一种色块就会成为大的色块的补充，其实人一般不会注意到小块的色彩，而只会感觉到大的色块的存在。（示例）色彩的大小对比会令色彩有一种生动效果，试在一大片绿色中加入一小点红色，就会注意到红色在绿色的衬托下很抢眼，这就是色彩的大小对比效果的影响，在大面积的色彩陪衬下，小面积的纯色会特别突出，但是如果用较淡的色彩，则会让人感觉不到这种色彩的存在，例如在黄色中加入淡灰色，根本不会注意到淡灰色。（示例）243.5色彩感觉面对色彩时，观者的心理会受到色彩的影响而起变化，这种变化虽然有个人差异，但大多数会有下列心理反应效果：冷暖、轻重、软硬、进退、强弱、涨缩、明快忧郁、兴奋沉静、华丽朴素和质感等。其实色彩本身是不带任何含义的，只是人的心理感觉把它们分成不同的类别。色彩的联想作用虽属于心理学的问题，然而它的适用性在设计上是很重要的，若不能预测人如何感觉色彩，如何发生作用，就无法有效地活用色彩。由于色彩与人的情绪有着微妙的联系，利用不同的色调设计会给人不同的心理感受。251)红色是一种激奋的色彩，代表热情、奔放、喜悦、庆典，有刺激效果，能使人产生冲动，充满愤怒、热情、活力。2)绿色介于冷暖两种色彩的中间，代表植物、生命、生机，有和睦、宁静、健康、安全的感觉，它和金黄、淡白搭配，可以产生优雅、舒适的气氛。3)橙色也是一种激奋的色彩，具有轻快、欢欣、热烈、温馨、时尚的效果。4)黄色代表高贵、富有，具有快乐、希望、智慧和轻快的个性，它的明度最高。5)蓝色代表天空、清爽，是最具凉爽、清新、专业的色彩。它和白色混合，象征着淡雅、浪漫的气氛(像天空的色彩)。6)棕色代表土地。7)白色代表纯洁、简单，具有洁白、明快、纯真、清洁的感受。8)黑色代表严肃、夜晚、沉着，具有深沉、神秘、寂静、悲哀、压抑的感受。9)灰色代表阴暗、消极，具有中庸、平凡、温和、谦让、中立和高雅的感觉。10)紫色表征高贵、奢华、优雅、神秘、阴险、阴暗、悲哀等。有些色彩给人的感觉是双重的，比如黑色有时给人沉默、空虚的感觉，但有时也表示庄严、肃穆。白色同样有时给人无尽的希望，但有时也给人一种恐惧和悲哀的感受。每种色彩在纯度，透明度上略微变化，就会产生不同的感觉。263.6软件设计的色彩搭配软件设计的色彩搭配对于软件界面设计的效果起到十分重要的作用，软件设计的色彩日益已经受到软件公司与设计师们的高度重视。色彩设计的一些原则包括：1)在一帧屏幕上的色彩种类数目，在非真实感图形显示时，应加以限制，一般少于7种。因为人们在观察屏幕时很难同时分辨多种色彩。2)根据对象的重要性来选择颜色，对于重要的对象应选取醒目的颜色。3)一个系统中各种颜色设计应该一致。例如错误信息用红色表示时，都应前后一致用红色表示，黄色表示警告，绿色表示运行正常。274)在色彩的选取上尽可能符合人们的习惯用法。例如，在财务上红色表示赤字；化工上红色代表热，绿色表示冷：地图上蓝色表示水，黄色代表沙漠，绿色代表平原。5)背景色一般选用饱和度低的浅色，如灰色或带有网格点的浅色。蓝色对人眼不敏感