色彩在UI设计中的应用文档格式.docx

色彩在UI设计中的应用文档格式.docx

《色彩在UI设计中的应用文档格式.docx》由会员分享，可在线阅读，更多相关《色彩在UI设计中的应用文档格式.docx（10页珍藏版）》请在冰点文库上搜索。

色彩，UI设计，应用

绪论

当代对色彩的研究已包括色彩物理、色彩生理、色彩心理等多个领域。

色彩的作用，现已广泛体现在人类的生活生产中。

尤其在设计领域，正在把色彩的科学性、功能性和设计的目的性有机巧妙地结合在一起。

色彩是使设计产生强烈视觉冲击力和感染力的前提,它与人生活中的点滴存在着密不可分的联系。

正如色彩理论家菲利普·

奥托·

朗基所说：

“色彩是一种终极艺术，它现在是，将来也仍会是一个持久的谜。

”。

一个优秀的设计师不但要具有创新作品的能力，还应具备换位思考的思维，站在欣赏者的角度上进行创意设计，也是完成设计传达的重要环节，从而抓住欣赏者的心理。

设计师要有战略性的发展眼光，将技术与艺术完美的结合，才能拉近与生活的距离，充分利用UI设计的平台进行大胆的创新实践，为设计师未来的发展形成一个良好的循环。

随着科学的发展，

1色彩概述

1.1什么是色彩

色彩是载体在吸收光线中的各种波长后，将某种混合后的特定波长反射到人的眼睛，形成的视觉感觉。

光是由红、橙、黄、绿、青、蓝、紫七种不同波长构成的，每一种物体，吸收光线中的所有波长，因为表面介质的差异，对波长的吸收、混合与反射都有差异，最终形成了丰富的色彩视觉印象。

色彩即是一种变相的语言，就有它独特的沟通能力，想通过色彩来插画的意义就要灵活的对其应用。

我们将色彩细化，它可以分为不同的色相，不同的明暗度，不同的纯度，色相就是色彩大致的象征，这在插画设计中是很重要的，了解并熟练地掌握了色彩的色相，才能针对不同的设计题材特征和所要表达的含义，去寻找与之对应的色相得色彩了做基础色，或重点色，也就是主题颜色。

而明暗度则是跟多的是给人的心理感觉上的差异，代表了不同的心理含义，高明度的色彩就意味着快节奏，愉悦，亢奋，活泼，开朗等种种心理情感，反之就是低明度的色彩代表的也就是悲伤，哀愁，沉闷，深邃等的形象。

1.2色彩构成

1.2.1温度感

色彩的温度感是冷暖色形成的主要原因。

暖色调可以使人感到温暖，冷色调让人感到寒冷。

男性颜色一般是冷色调，比如黑色、灰色、蓝色。

女性色彩一般以暖色为主，红色系为主。

而体现儿童印象的配色往往以浅色调为主。

1.2.2距离感

不同的色彩出现，会发现有的色彩看起来近一些，有些色彩好像远一些，这就是色彩的距离感。

如同一面积、同一背景的物体，由于色彩的不同，给人造成的视觉效果就各不相同。

如浅色有膨胀感，深色与之相反有收缩感。

1.2.3重量感

色彩轻重的感觉是物体色彩作用于心理的感觉，在实际生活中，我们对质量和重量都有体会，并形成一些对质量固定的认识，比如棉花、雪花等白色的物体都轻柔无比，所以白色和轻的感觉相联系，而深色的物体如石头、钢铁等重的较多。

1.2.4尺度感

色相和明度两个因素影响着人们对于物体大小的知觉。

暖色和明度高的色彩具有扩散的作用，使物体显得大些；

而冷色和暗色则具有聚作用。

显得小些。

比如相同面积的黄色和蓝色色块，感觉黄色在蓝色面前，看起来比蓝色大。

1.2.5软硬感

色彩软硬感与明度、纯度有关。

凡明度较高的含灰色系具有软感，凡明度较低的含灰色系具有硬感；

纯度越高越具有硬感，纯度越低越具有软感；

强对比色调具有硬感，弱对比色调具有软感。

1.3色彩三要素的应用

1.3.1色相

色相，即各种色彩呈现出的相貌的称谓，如普蓝、柠檬黄、大红等。

色相是色彩的首要特征，是区别各种不同色彩的最标准的标准。

实际上任何黑白灰以外的颜色都有色相的属性，而色相就是由原色、间色和复色来构成的。

1.3.2明度

各种色彩所呈现出来的亮度和暗度被称为明度。

不同的色彩具有不同的明度程度，任何色彩都存在明暗变化。

其中黄色明度最高，绿、蓝、红、橙的明度相近，为中间明度，紫色明度最低。

另外在同一色相明度中还存在深浅变化。

如红色中由浅到深有粉红、淡红、深红等明度变化。

1.3.3纯度

纯度指的是色彩的鲜艳度或饱和度。

不同的色相不仅明度不同，纯度也不相同。

如颜料中红色是纯度最高的色相，黄、橙、紫等色在颜料中纯度也较高，蓝、绿色在颜料中是纯度最低的色相。

2色彩在UI设计中的重要作用

随着科技进步，触屏手机地普及，手机变成日常生活必需品，更新速度极快。

手机以及不仅仅是通话短信，而更重要的还能娱乐、资讯于一身。

人们对手机界面设计的要求也越发严格，手机界面设计一直追求以人为本，用户第一，相信将手机界面设计中的色彩进行更好的搭配设计，能为手机界面带来更多的人性化与有趣的交互，将色彩设计不断的创新发展，发展更好的手机界面设计。

2.1色彩的表现力

色彩对于事物的表现能力有着其他形式无法比拟的超强效果。

在我们生活里，无处不在的色彩是构成我们生活环境的重要组成部分。

可以说我们对每一件事物的认知，都是从色彩与形状开始的。

色彩是人脑识别反射光的强弱和不同波长所产生的差异的感觉。

2.1.1色彩是感知又是直觉

对于色彩的心理感知研究，是色彩研究中的一个非常重要的部分，也是非常复杂的，因为颜色与一个人的生活环境、文化、嗜好、经验都有很重要的联系，也就是说同样一种颜色，在不同的环境、时间、心情下产生的感觉都是不同的。

如：

在冬天见到冷色系，就会觉得特别冷；

选择暖色的如橙、大红；

夏天就要用些冷色的，如蓝色啦，绿色啦，让人觉得好清凉，清爽。

2.1.2色彩的心理效应

由色彩客观属性刺激人的知觉而产生，分为两种：

一是直接的心理效应，二是间接的心理效应。

其一，直接的心理效应：

如红色，让人感觉脉搏加快，血压升高，情绪冲动，思维活跃。

蓝色，脉搏减弱，情绪沉静、安祥。

儿童：

就会用鲜艳、明亮快活的色彩，如：

黄、橙、浅蓝、促进儿童的智力，而不会用咖啡，白色、黑色，这些颜色会感到很压力。

其二，间接的心理效应：

对人的印象、经验、体验导致出的联想。

当心情平缓适应的时候看红色是美的。

手机界面设计是以用户体验为目标，手机界面设计是为人所设计的，所以人使用后的感觉是最重要的，通过对色彩的心理效应的分析能将人的感官和情感联系起来的方式，通过手机界面设计直达人的心。

2.2人对色彩的记忆

在色彩中，颜色都会有具体的代表性，比如男性颜色一般是黑色、灰色、蓝色。

女性色彩一般以红色系为主。

暖色调用在食物的设计中，能使食物看起来美味可口，增进食欲。

在传递美味可口的印象时，暖调色彩是很有效果的。

由于年龄，性别，个性，职业，所受教育，自然环境及社会背景等多种原因而不同，且差别很大。

一般来说，暖色系比冷色系的色彩记忆性强，原色比间色容易记忆，高纯度色彩记忆率高，明清色比暗清色容易记忆，华丽色调比朴素色调容易记忆。

在UI界面中，颜色占很重要的位置。

因背景不同记忆性的变化很大。

暖色彩的纯度要比同色的高明度色彩记忆性高，而冷色系的纯色则与同色的高明度色彩记忆效果大致相同。

色彩单纯，形态简单的要比色数多而形态复杂的容易记忆，这样的配色方法对UI界面非常重要。

运用色彩以提升整体界面的档次，更好地提升手机的身价，从而表现出手机界面所具有的档次，应当借助于色彩之庄重和华丽，从而充分地展现出UI界面的风格，尤其是对于面对不同消费群的手机，需要更加充分的利用色彩对人心理的影响，充分了解色彩记忆的基本规律，才能在UI设计中对色彩的运用更加成熟，使色彩更好的为UI设计服务，能够更好的增强手机的人机体验。

3色彩在UI设计中的应用

UI设计包括手机图形的版式设计和图形用户界面设计。

图形用户界面设计包括手机的图标、手机上显示的色彩、手机的浏览器的导航、显示的文本文字等。

版式设计包括交互设计和布局设计。

UI设计中，不仅要保持界面的一致性，图标设计的风格和手法保持一致，并且色彩的设计也要形成统一的风格，让用户从视觉上感受到整体性和一致性。

在手机图标设计中，图标的颜色不是随便决定的，用户在接触图标的时候，首先第一眼就会注意到图标的色彩，不同的色彩给人带来对图标的感受也不同。

绿色给人无限的安全感受，在人际关系的协调上可扮演重要的角色。

绿色象征自由和平、新鲜舒适；

黄绿色给人清新、有活力、快乐的感受；

色彩明度降低会给人稳重、有重量的感觉，比如墨绿、橄榄绿等。

蓝色是冷色调的色彩，看起来沉稳、明亮、深邃、沉着、忧郁。

橙色是活跃的、温暖的、喜悦的、朝气蓬勃的，能带给人快乐，橙色非常活泼的颜色，给人眼前一亮，让人记忆深刻，可以搭配很多颜色。

介于橙色和粉红色之间的粉橘色，则是浪漫中带着成熟的色彩，让人感到安适、放心。

白色象征干净、简约、诚实。

是百搭的色彩。

黑色象征权威、高雅、低调、创意。

红色热情、兴奋、具有生命力，让人感觉脉搏加快，血压升高，情绪冲动，思维活跃。

图

（1）

比如图

（1）的图标，选用绿色作为主色调，绿色给人踏实、可靠、可信赖的感觉，这种软件需要，所以这样的颜色很让人放心。

图

（2）

比如图

（2）股市风云的图标，蓝色渐变的底，搭配白色的曲线，宁静、沉着，因为“炒股有风险、入市需谨慎”，所以为了降低人们心里的这种不安全感，选择沉着、安静蓝色，给人以安稳的感觉。

4UI设计中色彩的搭配方法

4.1色彩搭配的合理性

UI设计并不是一种完全脱离生活实际的艺术创作，而是借助艺术规律，为UI设计增加生动的视觉语言，能带给用户全新的体验，它还需要考虑人的生理特点，色彩搭配一定要合理，给人一种和谐，愉快的感受,一个有思想有容的UI设计用色就必须要有自己独特的风格，这样才能显得个性鲜明，给浏览者留下深刻的印象。

在色彩的三要素中，色相对人类心理的影响最大，其次是明度和纯度。

UI设计在很大程度上是由使用的色彩和配色效果决定的。

让设计具有鲜明的特色，在选择色彩时，要有属于自己的色彩搭配，给人记忆深刻才是作品本质的目的，只有特色鲜明的色彩，才能最直观的让观者有感。

4.2设计中色彩宣传的作用

色彩能直接的，在瞬间吸引人们的眼睛、聚焦人的注意力，刺激人的视觉、由此影响人的情绪、间接的影响人的判断。

研究表明：

人们在观看设计时，在前0.03秒是最关键的，在这个过程中，设计作品的色彩能在远距离短时间迅速传达给受众很多信息，吸引着人的注意力，对设计进行进一步的了解。

UI设计因为有了色彩，才有了生命和活力，带给人们更加丰富的视觉体验。

UI设计中需要找准恰当的色彩定位和风格，让强烈的色彩感受撞击手机使用者的视觉神经，快速的映射于心里，增加了使用着的体验感受，宣传了手机的品牌。

4.3色彩在UI设计中的心理影响

4.3.1.色彩的吸引心理 

世界因为有了色彩，而更加迷人，多姿多彩。

儿童都喜欢五颜六色、颜色艳丽的事物，各种颜色都能吸引人的注意力。

在UI设计中，运用适当的颜色，能带给手机界面舒服的视觉效果，漂亮的色彩能够让人更加的喜欢手机，从而产生更好的体验，产生很强的视觉效果，吸引人的注意力，给人留下深刻的印象。

4.3.2.色彩的情感心理

在UI设计中，人们首先接收到的是色彩信息。

色彩对于人视觉的触动，可以延伸到心，影响人的心理，并形成情感互动，与人交流。

UI设计中注重的是注重的是用户与系统之间的信息交流行为，运用适当的配色，能为用户带来更好的心理体验，会将人带入一个丰富多彩，激起人们心强烈的情感，并能产生心理的愉悦。

4.3.3.色彩的审美心理

人们对于色彩的审美心理，就是在观看的过程中，通过视觉感官产生的心理变化。

人们在日常的生活中，对于很多色彩都赋予了特定的意义和感情。

UI设计时，巧妙的将一些色彩搭配在一起，能唤起人们心的认同感，达到精神上的认识和享受。

4.4色彩能够增强消费者的记忆

因为手机屏幕没有电脑屏幕尺寸那么大，手机能够显示的东西是有限的，所以要保持手机界面简洁干净。

在UI设计中，需要通过色彩突出手机的主要功能和主要信息，便于用户浏览。

色彩不能凭空存在，需要借助某个事物或者依附在一个物体上，才能存在，手机界面设计中的色彩设计需要保持一致，更方便用户找到需要的信息与功能。

它是通过光的反射作用传达到人的眼睛，再经过眼睛到达大脑的视觉中枢。

时间长了，人们对于颜色的印象就会与颜色依附的事物相关联，在看到这个颜色时就会想到这个事物，对于界面图标的颜色选择，通过选择不同的色彩传达不同的感觉，色彩可以传达重量。

其次还有色彩的形式营造氛围，比如界面的复古风格，金属材质的感觉等。

色彩设计需要研究客户群的心理和习惯、喜好，才能设计出更符合现代人的手机界面设计。

运用得当的色彩能将作品的意图准确的传达给人们，色彩能增强人们的记忆，在人们的心里留下深刻的印象，

5总结

色彩对于人视觉感官的作用，可以延伸到人的心，影响人的心理，并形成情感互动，与人交流，从而打动人们。

在UI设计中，将丰富的色彩运用在设计中，对于不同色相的色彩，进行明度、纯度上的合理搭配，形成很好的视觉效果，会将人们带入一个丰富多彩，有很强感官体验的色彩世界，遵循色彩构成的温度、距离、尺度、重量、软硬等法则，以色彩美感为最终目标，深入研究色彩在UI设计中对人产生的心理影响，将色彩进行合理搭配，更好的为UI设计服务，将色彩组织安排在UI设计的画面上，让UI设计更加人性化，体现了以客户为中心的主旨，让人们使用更方便。

未来的手机界面发展都会朝着自适应的人机界面、自然的人机的界面、基于多通道的手机交互界面以及更多的延伸和创新，这样的发展方向会设计到更多的通感效应，而手机界面设计会更加智能化和人性化。

参考资料

[1]玉祥．色彩构成[M]．：

中国轻工业．1999.

[2]红．现在设计色彩语言的新观念[M]．：

中国美术．2002.

[3]望衡．艺术设计美学[M]．大学．2000.

[4]朱介英．色彩设计与配色[M]．中国青年．2004.