浅析移动应用UI设计中色彩的使用

范美英

(北京信息职业技术学院软件工程系,北京 100018)

浅析移动应用UI设计中色彩的使用

范美英

(北京信息职业技术学院软件工程系,北京 100018)

对于任何一款移动应用(简称APP),如果它具有良好的UI,就可以得到更多用户的青睐。在UI设计中有诸多元素需要考虑,色彩便是其中之一。通过研究光色基本原理、人类对色彩的感知方式、色彩的呈现方法,以及在APP中影响色彩使用的因素,分析得出了在APP中如何才能调出可感知的颜色从而使得用户乐于接受并使用APP;如何搭配色彩才会使得APP的UI更加光彩夺目。

APP UI 设计 色彩 颜色对抗通道

在人类物质生活和精神生活不断发展、进化的过程中,色彩也不断地展示着其神奇的魅力。人们不仅发现、观察、创造、欣赏着绚丽缤纷的色彩世界,还通过日久天长的时代变迁不断深化着对色彩的认识和运用。当前是以移动互联为主题的时代,人们对APP耳熟能详。从市场角度来看,用户对APP的选择几乎达到万里挑一,如何才能使得用户对APP一见倾心？这是时代对APP的设计者们提出的严峻考验。设计涉及的领域有很多,本文将以颜色的使用为核心,探讨在APP的UI设计中色彩的使用规则。

1 光与色彩的基本原理

所谓光,就其物理属性而言是一种电磁波。电磁波的波长和强度可以有很大的区别,在人可以感受的波长范围内(约312．30纳米至745．40纳米),它被称为可见光,可以为人的视觉器官——眼所接受,并作出反应,有时也被简称为光。

色彩是通过眼睛内的感光细胞、大脑和我们的生活经验所产生的一种对光的视觉效应。有时人们也将物质产生不同颜色的物理特性直接称为颜色。

因此,色彩应是可见光的作用所导致的视觉现象,可见光刺激眼睛后可引起视觉反应,使人感觉到色彩和知觉空间环境。人对色彩的感觉不仅仅由光的物理性质所决定,往往受到周围其他因素的影响。

2 人对色彩的感知途径

人眼内的视网膜中包含两种感光细胞：视杆细胞和视锥细胞。视杆细胞的外段与内段呈细杆状,称视杆;视锥细胞为圆锥状,称视锥。它们是感光的特殊结构,而且各司其职。

视杆细胞负责察觉光线强度,只在低亮度下工作,这意味着在光线很暗的环境中,它们才起作用。在明亮的白天和人工照明环境中,视杆细胞完全不能提供任何有用的信息。

当视神经向大脑传递一系列频率的信号后,大脑后部视皮层上的神经元将中频和低频视锥细胞的信号去掉,得到“红-绿”的信号通道;一部分神经元将来自高频和低频视锥细胞的信号去掉,得到“黄-蓝”的信号通道;还有一部分神经元将来自低频和中频视锥细胞的信号处理产生“黑-白”的信号通道。这三个通道被称为颜色对抗通道(如果一个或者多个对抗通道无法正常工作,就不能区分某些颜色对,此时会产生颜色视觉障碍),紧接着大脑对所有颜色对抗通道做更多的减法处理,从而使得来自视网膜某个区域的信号被其附近区域的类似信号减掉。所有这些处理使得人的视觉系统对颜色和亮度产生差别。

综上,人类对颜色的感知是从位于视网膜的细胞差异化的输出开始,然后经由大脑的视觉皮层和其它相关区域中完成复杂的过程来实现的。

3 色彩呈现方式对感知的影响

人区别颜色的能力取决于颜色的呈现方式。基于人类视觉系统运作的方式,影响人对色彩的感知能力的因素主要有以下几方面。

第一,色彩的饱和度。当色彩的饱和度较低时,很难将相似的颜色区分开,所以纯度亦是色彩感觉强弱的标志。对于液晶显示屏而言,由于液晶每个象素由红、绿、蓝(RGB)子象素组成,背光通过液晶分子后依靠RGB象素组合成任意颜色光。如果RGB三原色纯度较高,那么显示器可以表示的颜色范围就越广。如果显示器三原色不够鲜艳,那这台显示器所能显示的颜色范围就比较窄,因为其无法显示比三原色更鲜艳的颜色。

第二,色彩区域的大小。色彩区域也可以称之为色块,色块对象越小或者越细,人们就越难辨别其颜色。在一些用于统计的数据图表中,经常会出现较小的色块,虽然许多统计软件都可以为图表生成相应的图例,但生成的图例中的色块也非常小,这就会影响用户对信息的捕获。根源在于色彩区域的大小影响了用户的视觉感知。

第三,色彩区域之间的距离。两个色块之间的距离越远,人们就越难区分其颜色,尤其是当其距离大到需要人们运动眼球才可看到时,区分度会大幅下降。反之,如果两个色块之间的距离较近,且其色彩对比度较强,则越容易被人识别。

第四,其他外部因素。除与色彩密切相关的因素之外,影响人们对色彩感知的因素还有很多,如环境光线、显示器的使用技术、显示角度、使用者本身对色彩的敏感度等。在设计UI的色彩时,对这些因素的考虑越周到细致,那么UI效果将越容易被用户所接受。

4 在APP的UI设计中如何使用色彩

4.1 屏幕呈现着色彩,结合硬件选用色彩

APP的运行载体可以是智能手机或平板电脑。在智能手机中,无论是何种APP,其屏幕色彩均起到不可忽视的作用,这是因为一款色彩度饱满的智能手机能够给用户带来完美的视觉体验。对于手机屏幕来说,屏幕材质在很大程度决定了这款手机的显示效果。

目前,主流手机屏幕材质分为LCD(Liquid Crystal Display的简称,即液晶显示器)和OLED(Organic Light-Emitting Diode的简称, 即有机发光二极管)两大类。市面上比较常见的TFT(Thin Film Transistor的简称,即薄膜场效应晶体管)以及SLCD(Splice Liquid Crystal Display的简称,即拼接专用液晶屏)都属于LCD的范畴,而三星引以为傲的AMOLED(Active-Matrix Organic Light-Emitting Diode)系列屏幕则隶属于OLED的范畴。

三者的各自特点在于：TFT可以精确控制显示灰度,所以TFT液晶的色彩更真;SLCD中规中矩,显示效果接近自然,能让人产生舒服的感觉;AMOLED所显示出的色彩风格更加艳丽,三原色得到了很大程度的加强,但其色彩过渡不是很协调,色彩也显得不那么真实。

在设计UI色彩时,需要考虑APP最终将主要运行在哪些设备中,其屏幕色彩使用的是哪种技术。

4.2 需求决定了色彩,按照需求使用色彩

UI设计师除了需要考虑硬件对色彩的影响之外,其次需要考虑的因素就是APP的需求。

在任何一款APP产生之前,都需要系统分析师对用户的需求进行深刻了解,生成需求分析报告。所谓需求分析就是指理解用户的需求,就软件的各项功能与客户达成一致,估计软件风险和评估项目代价,最终形成开发计划的一个复杂过程。在这个过程中,用户处在主导地位,需求分析工程师和项目经理要负责整理用户需求,为之后的软件设计打下基础。由此可看出,任何设计都要基于用户的需求,需求决定了一切,需要按照需求使用色彩。

4.3 色彩的使用准则,根据准则确定色彩

在符合用户需求的前提下,设计APP的UI色彩时,需要遵守色彩的使用准则。对于那些需要依赖色彩来传递信息的交互式APP而言,这些准则显得尤为重要。

第一,用色相、明度和饱和度来区分颜色。具体地,UI中所使用的色彩尽可能使色彩之间有较高的反差,但要避免将对抗色(如红与绿、蓝与黄)放在一起。

第二,使用颜色对抗通道的颜色。如前文所述,正常人的视觉系统综合了从视锥细胞传过来的信号而生成了三个颜色对抗通道。人们最容易区分的恰好就是能够在这三个通道中的一个上触发强信号,而在另外两个通道上触发空信号的颜色(如黑、白、红、绿、黄、蓝)。所有其他颜色都会在超过一个通道上产生信号,所以,为了提高用户的视觉感知,我们可以使用这6种颜色。

第三,避免使用颜色视觉障碍的人无法辨别的颜色对。在使用APP的用户中,也许会有颜色视觉障碍的用户存在,所以在使用颜色时,要避免使用不易区分的颜色对,如红与绿、蓝与黄、深红与黑、蓝与紫、浅绿与白等,最好不要在任何深色背景上使用深红、蓝或紫色。但在浅黄或浅绿背景上可以使用深红、蓝和紫色。

第四,用颜色以外的方法完成UI中的提示。如果在APP中用某种颜色代表了某个事物,那么最好再使用另外一种方法来标记这个事物,从而使得UI中的元素更加容易辨别和区分。

第五,使用符合用户心理期待的色彩。用户期待从APP的UI上获得何种心理体验或感受,在色彩使用时就要将用户的期待加以满足。一般来讲,红色容易引起人的注意,也容易使人兴奋、激动、紧张、冲动、还容易造成人的视觉疲劳,在表达惊喜情绪的UI中,可以适当使用红色;蓝色比较朴实,常为那些性格活跃、具有较强扩张力的色彩提供一个深远平静的空间,在表达浪漫和愿景的UI中,可以适当使用蓝色;绿色显得柔顺、恬静、潢足、优美,在需要表现希望、和平、青春的UI中,推荐使用绿色。

以上是在APP的UI设计中使用颜色的基本要领。除此之外,不同文化的用户对颜色也有不同的诠释。UI中到底如何使用颜色才能营造出更加引人注目的效果,需要设计师对潜在用户也有所研究。

5 结语

用户对UI的色彩感知受到APP需求、运行环境、硬件设施,以及用户自身年龄、性别、性格、文化、教养、职业、民族、宗教、生活环境、时代背景、生活经历等各方面因素的影响。在设计者们完成其UI设计时,需要综合考虑其潜在用户的各种特征,只有这样才能恰如其分地将内容呈现在UI中。

[1]Jeff Johnson.认知与设计-理解UI设计准则[M].北京:人民邮电出版社,2011.9.

[2]百度百科.色彩[OL/DB].http://baike.baidu.com/subview/37967/5062576.htm#1,2014.4.2

[3]互动百科.彩色视觉[OL/DB].http://www.baike.com/wiki/%E5%BD%A9%E8%89%B2%E8%A7%86%E8%A7%89,2013.3.2

[4]百度百科.视细胞[OL/DB].http://baike.baidu.com/view/4428920.htm,2013.12.16

[5]百度百科.色彩饱和度[OL/DB].http://baike.baidu.com/view/631125.htm,2014.4.9

[6]Susan Welnschenk.100 Things Every Designer Needs to Know About People[M].北京:人民邮电出版社,2013.5.

[7]手机中国.屏幕不光只看尺寸 各材质屏幕实战解析[OL/DB].http://www.cnmo.com/guide/158299.html,2012.6.9

[8]互动百科.色彩[OL/DB].http://www.baike.com/wiki/%E8%89%B2%E5%BD%A9,2013.7.11

范美英(1982.5),女,硕士,中级讲师,从事软件开发的研究。