页面交互设计中的色彩语言.docx

页面交互设计中的色彩语言.docx

《页面交互设计中的色彩语言.docx》由会员分享，可在线阅读，更多相关《页面交互设计中的色彩语言.docx（30页珍藏版）》请在冰豆网上搜索。

页面交互设计中的色彩语言

天津工业大学

毕业设计说明书

页面交互设计中的色彩语言

姓名

学院艺术与服装

专业视觉传达设计

指导教师

职称讲师

2013年6月1日

摘　　要

交互设计的色彩研究正在随着交互设计理念的不断变化而快速发展，作为交互设计的重要组成部分，色彩在交互设计中的作用显而易见。

当我们在为交互设计作品中色彩的精彩表现而陶醉时，也不得不为设计师的匠心独运而感叹。

交互设计作品的色彩取向往往带着浓郁的时代背景，而时代的变迁又往往依赖于社会的政治、经济、文化、艺术等各方面的综合发展。

交互设计中的色彩的对比与协调是对立统一相互存在的，有对比就有协调。

在交互设计中要熟练的运用好强对比和弱对比的色调。

有时需要和谐统一色彩搭配，对比太强会显得画面色彩混乱缺乏主次。

而有时又需要对比强烈的色彩搭配，太专注色彩的协调又会使画面没有亮点。

掌握交互设计中色彩搭配的方法，也就是学会如何处理好个体与整体的关系。

关键词：

色彩搭配；交互设计；和谐统一；对比强烈

ABSTRACT

Interactiondesignresearchiswithcolorchanginginteractiondesignconceptandtherapiddevelopmentofinteractiondesignasanimportantpartofthecolorintheroleofinteractiondesignisobvious.Whenweworkforinteractiondesignbrilliantcolorperformancewhileintoxicated,theyhadtothedesigner'simaginativeandsigh.Interactiondesignapproachoftenworkswitharichcolorbackground.Thechangingtimesandtendtorelyonthepolitical,economic,cultural,artisticandotheraspectsofcomprehensivedevelopment.

Interactiondesignincolorcontrastandcoordinationareoppositesexistwitheachother,acontrastthereiscoordination.Ininteractivedesigntoskillfullyuseagoodstrongcontrastandweakcontrastcolors.Sometimesnecessaryharmonywithcolor,contrastcolorscreenwillseemtooconfusinglackofprimaryandsecondary.Andsometimestheyneedstrongcontrastingcolors,toofocusedoncolorcoordinationwillmakethepictureisnotbright.Grasptheinteractiondesigncolormatchingmethod,thatis,tolearnhowtodealwiththerelationshipbetweentheindividualandthewhole.

Keywords：

colormatching；interactiondesign；harmony；contrast

前言

目前全球经济一体化，各种文化的碰撞，社会和科技的迅猛发展，给人类的意识形态领域带来前所未有的冲击。

现代设计作为社会新陈代谢更迭的推动力之一，其使命就应反映时代的特征和变化，并且推波助澜。

今天的设计，渐渐进入了成熟的发展时期，从设计观念到表现形式都在不断地变化革新，并不断向纵深发展。

很多设计领域出现了多学科多专业横向整合的趋向。

设计的潮流呈现出多元整合的特征。

展示设计在飞速发展的过程中有力而生动地表述了这一特征。

资迅社会的今天，相对过量的信息已经麻木了人们神经。

我们都可能有过这样的体会：

在一个比安静和人员相对固定的学校教室里，如果发生了一件很小的事情，同学们都会津津乐道相当长一段时间；但在一个人员繁杂的商业广场，哪怕发生了一个很大的盗窃案，人们很快就忽略了它的发生。

这就说明了这样的一个事实：

当在信息量少，相对封闭的环境里，相应的信息就容易与人们发生互动和关联；当在一个信息量庞大，相对开放的场所里，人们普遍只关心与自己利益密切的信息。

同样地，我们的门户网站是一个相对开放的空间。

那我们应怎样使使用我们交互产品的受众接受我们所传达的信息，并与之发生联系。

这就需要从板式的划分，功能的更新和色彩的搭配等方面进行分析。

第一章什么是交互设计

交互设计，又称互动设计，（英文InteractionDesign,缩写IxD或者IaD）,是定义、设计人造系统的行为的设计领域。

人造物，即人工制成物品，例如，软件、移动设备、人造环境、服务、可佩带装置以及系统的组织结构。

交互设计在于定义人造物的行为方式相关的界面。

1.1交互设计解决的问题和目前发展状况

交互设计在人工物的设计和制作过程中由始至终的起到相当重要的作用，其差别只是在于有显意识和无意识之分。

然而，随着产品和用户体验日趋复杂、功能增多，新的人工物不断涌现，用户的体验到的新鲜事物不断增多的情况下，人们对交互设计的需求也越来越明显，从而使其在理论和实践上作为单独的设计学科的提议越发的频繁。

然而，由于交互设计的研究者和交互设计的实践者来属于不同的学科，而且这个领域本身还不成熟，因此人们往往对某些问题尚未达成共识，甚至对类似或相同的问题本身的理解以及解决方式也可能有不同方案，且相互矛盾。

例如交互设计中的基本元素包含什么，现在也还在讨论中。

但是人们也形成了一些共识，例如，交互设计是设计人和物的对话，而交互设计研究和实践的本质可能是隐藏于这个对话中的。

交互设计的目的包括：

有用性、易用性和吸引性的设计和改善。

现在是数字时代，多媒体让交互设计的研究显得更加多元化，多学科各角度的剖析让交互设计理论显得更加丰富。

现在交互设计功能服务的产品已经越来越多，同时还有很多新的产品也大量的采用了交互设计的理论。

1.2交互设计与界面设计的关系

用户使用的界面是交互设计产生的结果，但是俩者并不是同一事物。

交互设计的本质是研究人和物在交流过程中，人的心理模式和行为模式，并根据此项研究，设计出可以支持人工物的交互方式，来达到人们对使用人工物的三个层次的需求。

这样看来，交互设计只是研究人工物交互方式的一种设计方法，而研究结果是产生了界面设计。

显意识交互设计不一定会影响到界面设计，但是界面设计必然会有交互设计的影子。

需要注意：

交互性不只局限于某种相关的技术。

人和人之间天然存在交互的。

因此，交互设计可以用于所有与人相关的活动中，例如服务。

这样的交互设计者，会用到各种交互设计的方法和原则。

1.3交互设计与产品开发的关系和可应用的设计领域

在没有提出交互设计和体验设计以前，产品设计者总是将交互设计以其他形式划分到其他相关人员的工作范围内。

从某种意义上来讲，设计出来的产品就应该能满足人们的使用需求也就是交互设计；然而，当人们意识到简单的界面设计不能满足人们的使用需求时，交互设计就以一种独立的设计种类应运而生。

并且有相关人员指出，交互设计应当在提出产品的初步构想和技术设计之间进行实施，这样有效的节省时间和资源。

交互设计师的活动领域如下：

界面设计、系统设计、网络设计、产品外观设计、环境设计、服务设计以及综合性的系统设计。

上述各个领域不仅需要有自身的设计特点，也都会用到交互设计的方法和原则。

交互设计师一般会参与团队设计的各个环节，例如：

图形设计、程序设计、用户心理、用户测试、产品设计等等。

因此，交互设计师需要对上述领域有相当理解，以便于和不同领域专家开展合作。

1.4人机交互的基本原则

（1）系统界面应当直观简洁，作为一种人机交互界面，设计开发刚开始的时候就应该考虑到系统界面设计需要保持一致、直观、功能性突出这三方面原则。

使得用户得到简单直观的界面的前提下，同时获得灵活使用软件的功能。

（2）保持一致性。

语言、布局和设计的界面元素是需要保持一致性的重点。

保持一致性的界面可以让用户对于如何操作软件有更好的理解，从而提升效率。

（3）界面设计要始终保持和用户的沟通，提供实时反馈。

（4）方便使用原则：

方便使用的第一原则是要符合用户使用习惯。

其它还包括：

实现目标功能的最少数操作原则，鼠标移动距离最短的原则等。

（5）界面色彩要求：

人们肉眼的视觉成像与计算机显示器的发光成像有很大的区别，应该注意这种区别作出适合人们视觉成像的色彩搭配。

对于长时间被用户使用的交互系统来说，能够让用户在较长的时间使用后不会感到视觉疲劳为宜。

例如灰色沉稳的主色调，配以轻松活跃的淡彩色等等。

千万不要颜色过多烦乱，花哨艳丽，这样不利于用户的视觉交互。

（6）界面功能区域划分要求：

系统功能排列需要整齐统一，尽量按照功能的不同来划分区域，这样可以方便用户使用；功能区域的划分不要过于紧密，避免用户在使用过程中产生视觉疲劳。

第二章交互设计的色彩运用

2.1目前交互色彩设计的时代特征

在这个世界无所不在的媒体中，人类在世界的某一个地方开垦着属于自己的色彩文化。

色彩是企业经营的有利条件，它是21世纪商业设计的新资源。

无论怎么使用，也不会枯竭的自然资源，它是地球上的人类一刻都不能回避的生活的环境。

没有色彩的世界是不可想像的。

交互设计的色彩研究正在随着交互设计理念的不断变化而快速发展，作为交互设计的重要组成部分，色彩在交互设计中的作用显而易见。

当我们在为交互设计作品中色彩的精彩表现而陶醉时，也不得不为设计师的匠心独运而感叹。

交互设计作品的色彩取向往往带着浓郁的时代背景。

而时代的变迁又往往依赖于社会的政治、经济、文化、艺术等各方面的综合发展。

在交互设计领域里，我们所说的交互设计各个方面的时代特征通常都可以从交互设计作品的色彩中找到答案。

交互设计在中国虽然年轻，但充满活力；交互设计色彩的研究和教育虽然起步较晚，但却前程似锦。

我们在国内外众多设计师及专家的色彩运用和研究成果的基础上，作了更进一步的拓展与探索，从不同角度和视角分析了交互设计色彩的相关特征和风格，使交互设计的色彩研究更加全面和具有较强的艺术性和学术性。

一个交互色彩设计的成功与否，对用户的视觉和心理感染力有着明显差异。

因为色彩是最直观、最易影响人心理的设计因素，用户看到网站或者交互软件的第一感觉主要是由色彩营造的展览氛围。

好的交互色彩设计，具有很强的视觉吸引力，能充分体现交互的艺术魅力。

同时，色彩设计又是交互设计中较难表现的一个方面。

因为，人们受到的地域、民族、文化传统的影响，对色彩的象征意义、偏好是有很大差异的。

所以，交互色彩设计应根据产品用途、产品性质、针对群体，特别是使用者的特点来具体分析、落实。

进行科学合理的色彩设计，首先要了解构成交互色彩的设计元素有哪些，我们要在哪些方面进行色彩设计；其次我们要知道色彩设计所要达到的是一个什么样的效果。

也许有人说，色彩是视觉设计师需要考虑的问题，交互中可以不考虑颜色。

没错，视觉设计师对于颜色有较强的见解和把握，由于色彩设计的重要度（人们对于信息的把握，首先也是由色彩开始的，其次才是图形、文字），在产品设计过程中，视觉设计师有着第一评判权。

对于色彩的认知，从哲学层面转入科学范畴后发现，人对固定色彩的心理影响有其固化的习惯性，这些认知习惯也就延伸到了人对于产品的选择中。

这样，在产品交互过程中，色彩也就可以被宽泛的表述进来，从而明确人的行为动机。

2.2交互设计中色彩的选择法

2.2.1色彩心理选择法

我们所看到的一切色彩，都具有色相、明度和纯度三种不同属性。

不同的色相、明度、纯度，会给人们带来不同的心理感受，色彩从心理感受上出发，宏观到微观，渐渐地接近最符合用户心理感受的色彩区域。

选择颜色时，根据色彩给人们带来的心理属性来筛选颜色，大家都知道，色相是色彩的冷暖，如赤、橙、黄、绿、蓝、靛、紫，这几种颜色的色相在人们的心理的上有明显的冷和暖的差别。

（图2-1）如赤、橙、黄让人想到太阳、阳光、烈火、灯光，这种能给人们带来暖和的感觉就是暖色系；蓝、靛，让人想到冰块、冬天、雪花，给人们清凉冷寂的感觉就是冷色系。

给产品选择颜色的时候要首先考虑的是产品定位和消费群体，其次考虑的是给人们带来的心理感受是什么。

如果需要给人们带来年轻、活泼的感觉就选择赤、橙、黄，如果需要给人们带来冷酷、高贵、安静的话就选择蓝、靛，这样就完成第一轮筛选。

（图2-2）

图2-1　　光的颜色

图2-2　色环

第一轮筛选之后，选择的如果是冷色系，就选择色环右边的区间，然后根据产品定位和色彩心理进行缩小范围的筛选，使小范围的色彩偏向、明度、饱和度的微小差别得到调整，最后匹配出相对最适合的色彩。

2.2.2.图片映衬法

在拟物化场景图片中寻找适合的色彩，进行设计，例子：

阅读器概念设计过程。

虽然图形概念最终没有采用，但是设计过程思考方式可以进行参考。

最早设计的时候寻找了一些读书馆场景图片资料，然后在场景图片（图2-3）中取用3种色值（图2-4）作为软件主体颜色进行设计。

图2-3　场景图片

从图片中取用3中色值，进行场景化模拟。

图2-4　上图中提取的3中颜色

最后实现效果:

（图2-5）

图2-5　　阅读器

2.2.3.调查问卷数据分析法 

即设计师提出多种色彩方案，以交互常用的调查问卷、用户访谈等方式进行数据收集，根据数据分析删选出最适合的色彩，这种方式准确率高，缺点就是时间成本和人力成本都消耗比较多。

2.3网页交互设计

在网页交互设计中，既要立足信息的传达，又要符合人们的视觉和思维习惯。

设计网页时注意各种信息要素的合理分布，使各类信息要素的位置、间隙、大小保持一定的节奏感和美感。

人们对美的追求是不断深入的，网页交互设计同样如此。

我们可以通过网页的内容与形式表现出统一和具有秩序，以及突出主题要素的方式来迎合大众的审美需求。

在协调网页交互设计中的各构成元素时，要注意对比其元素构成的面积、前后、数量等因素，强化视觉效果，以突出网页的整体效果。

网页中的构成要素可以分为两个方面：

风格定位：

对于设计某个网站来说，要做的第一步工作就是确定网站整体的风格，不同的网站需要有不同的风格，其风格要与主题内容相统一。

版面排版：

网页、报刊、杂志等平面媒体的版式设计有许多异曲同工的地方，板式设计在网页的设计中有着举足轻重的作用。

在网页交互设计中，好的色彩搭配起到的作用相当重要。

在一个网站中，如果有具备专业水平的色彩搭配，哪怕只出现很少的图形，仍然会带给浏览者难忘的印象和强烈的视觉冲击力。

除了以上论述的几种要素，还有页面的布局、框架的构成等也属于网页的构成要素。

而色彩的运用往往会在第一时间抓住用户的眼球。

总体来说，在一个页面最多不要超过四种色彩为好，选择一种为主色调；应当巧妙的使用颜色给人们带来的心理感受。

色彩运用的原则遵循“总体搭配合理，局部对比鲜明”，也就是说主页在色彩的整体运用当中应当是协调统一的，局部色彩运用中有一些有视觉冲击的对比即可。

网页的主题表现可以用色彩的不同来展现。

以下是一些常用色系：

（1）蓝色，多用于商业宣传，能使网页看起来具有专业性，体现出一种严谨性和科技感。

蓝色也往往用于专业性、科技感比较强的场合，体现出一种严谨和庄重。

（图2-6）

（2）绿色，是大自然的颜色，给人以清爽舒服的感觉，可以让浏览者阅读时的视觉压力大大降低。

绿色多被用于与环保节能可持续相关的题目，如节能企业的网站。

（图2-7）（3）红色，是充满热情的颜色，会使网页变得充满活力。

红色也是年轻活力的象征，有很强的视觉感染力和亲和力。

（图2-8）（4）黄色，多用于卖场折扣宣传。

黄色给人放松安逸的生活情调，可以是人们感觉到一种友善亲切感和实惠的廉价感。

同时，黄色还是一种色调鲜明的颜色，它搭配各种颜色都会出现很好的效果。

此外,我们还可以适当的搭配一些黑、白、灰的颜色使用，可以产生出人意料的效果。

（图2-9）

一个页面中尽量不要超过四种色彩，色彩太多找不到主色调，会显得没有主次，令人眼花缭乱。

再者，需要注意的是文字与背景之间的颜色的区分，对比太强或太弱都不利于浏览者的阅读。

图2-6　　蓝色调的网站

图2-7　　绿色调的网站

图2-8　　红色调的网站

图2-9　黄色调的网站

第三章色彩语言在交互设计中的重要性

在宇宙和自然界中，因为有了阳光、月光和人工照明，才使人类在白昼夜晚看清各种不同的物象，及其表面千差万别的色彩。

没有了光，也便没了有颜色的区别。

因为阳光是由赤、橙、黄、绿、蓝、靛、紫七种彩色光合成的，各种不同颜色之所以呈现出不同的色彩，是因为吸收了其它颜色的光，只反射出与本身表面颜色相同的光的原因。

色彩具有三种属性色相、亮度、饱和度，还可以按变化规律分为原色、间色和复色。

色彩对人的心理、情绪、行为产生影响，色彩在人类社会生活各个方面都起着举足轻重的作用。

3.1色彩在交互设计中的作用

色彩是交互设计中一个非常重要的设计因素，同时色彩设计又有较高的难度。

人们的色彩偏好更多地受到知觉经验、情绪状态、民族习惯、地区差异以及社会时尚的影响，因此不同的地域和种族甚至不同的个体对色彩的喜好有很大的差异。

在交互设计中，大胆巧妙地使用色彩，可以更完美的突出主题内容、交互主体形象和特定信息。

充分运用色彩带给人心理的感觉，能产生感受上的大小变化。

色调浅而亮丽的颜色通常有扩张交互页面的作用；相反，明度低，暗淡的颜色则会使交互页面显得狭小压抑。

在统一的大交互区域面中，通过使用不同色块的区域，可划分出不同功能的交互区域。

与此同时，与分割交互区域恰好相反，通过使用色调或色相相近或者相同的色彩进行联系与呼应，这样多区域之间也会存在连续性，产生浑然一体的效果。

利用色彩对交互区域的分割、延续与融合，色彩在交互设计中即有丰富性又有统一性，从而增加交互设计的整体性和多样性，统一与变化同存。

色彩在交互设计中传达情绪的作用显而易见，不同的色彩给人的心理感受也是不同的，同时也能营造出不同的氛围。

（图3-1）

图3-1　色块的对区域的划分

3.2色彩在人的心理和情感上所产生的作用

色彩能引起人情绪上的变化，能强有力地表达感情。

色彩进入人的视觉被感知的速度和程度差异，反映了色彩的物理属性、视觉的生理属性和人对自然现象的视觉经验与色相联系的心理属性。

从相同距离看不同的色彩，有的感觉近（前进色），有的感觉远（后退色）。

从色相讲，暖色系有前进感，冷色系有后退感。

从明度讲，明度高的色有前进感，明度低的色有后退感。

从饱和度讲，饱和度高的色有前进感，饱和度低的色有后退感。

这是由于人眼睛对颜色（光）的波长、振幅产生的感知度差异造成的，波长越长感知度越高，扩张感越强。

明度高的色彩比明度低的色彩振幅强，易于被感知。

同样面积的色彩，有的看起来大一些，有的看起来小一些。

明度、饱和度高的色彩看起来会大于真实的面积，而明度、饱和度低的色彩则会小于真是的面积。

暖色有扩张感，冷色有收缩感。

色彩华丽与朴素是因饱和度和明度不同而引发的感受。

饱和度高或明度高的色，给人以华丽感，反之给人以朴素感。

不鲜明的冷色有真实感，白、金、银往往给人以华丽感，而黑色根据使用情况有时有真实感，有时则有华丽感。

色彩的冷暖是通过人的视觉对世界上具有冷暖属性的事物的经验积累，与色相联系在一起的一种心理感受。

红、橙、暖黄使人感到温暖，蓝色、青绿色使人联想到水等冷性事物。

绿和紫是中性色，改变它们明度和饱和度的高低，就可以产生冷暖感的变化。

无彩色中白色冷，黑色暖，灰色呈中性。

色彩的轻重感主要是因色彩的明度不同而引发的感受。

明度高的颜色感觉轻，深颜色感觉重，在明度相同的前提下，色彩纯度高的颜色感觉轻，低的颜色感觉重。

色彩的兴奋与沉静感主要由视觉刺激的强弱引起，根据科学家测定，红色可以起到兴奋作用，蓝紫起到抑制作用，蓝绿起到沉静作用。

红、橙黄等纯暖色系列能引发观众的兴奋情绪，被称为消极的色彩。

明度和饱和度也有积极与消极之分，高明度、高饱和度色彩倾向于兴奋色，反之则趋于沉静色。

色彩的柔软与坚硬感是由明度和饱和度引起的感受。

一般讲，明度高、饱和度低的色给人以柔软感；明度低、饱和度高的色给人以坚硬感。

白和黑有坚硬感，灰色有柔软感。

色彩的味觉感是一种由联想产生的心理上的感觉。

据调查，一般人认为，黄色、白色、橙色是甜味，绿色是酸味，茶色、灰色、黑白是苦味，青色、蓝色是咸味，这大概是因为人们对色彩的味觉和相应于该味道的代表性事物的颜色及特征有关。

表3-1典型色彩的不同心理感受

颜色

绿

红

橙

黄

棕

紫

蓝

白

黑

灰

距离感

后退

近

非常近

近

非常近幽闭恐怖

非常近

后退

前进

无限深远

深远

温度感

非常冷冽

温暖

非常温暖

非常温暖

中性

冷

冷

偏冷

中性

中性

情感

非常平静柔和

非常刺激不安

使人激动

使人激动

使人激动

不安压抑

平静柔和

不压抑

抑制压抑

使人平静

3.3交互色彩协调搭配的基本方法

确定一种颜色作为统率交互的主色调，即在交互中确立的一种主导颜色，其面积、纯度、明度等要素占绝对优势，由于灯光等因素的影响，有时甚至只用一种颜色也能构成一个色彩变化丰富的交互。

这种单色搭配方法简洁干练、协调统一，容易被多数人接受，但也容易平淡乏味。

尽量选用比较容易实现交互协调的同色系颜色（同类色和临近色）。

例如红色、橙色、紫红色、紫色、蓝紫色等颜色都含有红色因素。

用无彩色、中性色缓解色彩的对比程度，即金、银、黑、白、灰来隔离画面的冲突色彩。

调节交互距离，不要把相互冲突的颜色放在同一视角范围内，避免对立颜色在同一视角内以较大比例出现。

应当增加高纯度色彩的透明度，这样它们就可以互相透叠彼此的颜色使交互的色彩实现融合。

（图3-2）

改变光源的色彩倾向，就能使交互的色调协调统一，白光源能更好的反映固有色，而色光能够提亮它的同类固有色，降低它的对比固有色。

依靠渐变色达成调和。

用渐变色调和是指一组色彩根据明度、纯度排列成色阶，使色彩有交互过渡，形成有序的多色系变化，从而实现色彩的调和。

渐变色不仅能让色彩变的协调，还增强了色调变得丰富性。

依靠纯度的变化使色彩统一。

在色彩的三属性中，色相和明度的变化是显而易见的，而纯度的变化容易被忽视，而事实上，通过调节色彩的纯度也同样可以达到色彩调和的目的。

色彩纯度的对比相对于色相、明度的对比不会产生很大的视觉冲突，因为一旦色彩区分开纯度对比，纯度低的色在视觉上会往后退，而限量的色则会往前进，自然形成一个交互层次。

低纯度色彩在画面上的出现实际上刚好起到减弱色彩矛盾对立的作用。

依靠色彩面积的变化达成调和，在交互中缩小不易协调的颜色的面积，自然也就达成色彩的协调了，也就是说面积对比与色彩对比成反比关系。

通过添加色彩的肌理效果达成调和。

有肌理的色块，因为其自身有微妙的变化而容易和其他颜色调和。

例如一块带有肌理效果的蓝色，其中包括了深蓝、浅蓝、灰蓝的