色彩在界面设计中的应用研究

王亮

延安大学西安创新学院艺术与传媒学院 陕西 西安 710100

前言：界面是人与产品间传递和交换信息的媒介[1]。交互界面设计要素为结构框架层、交互层和表现层三个方面[2]。而变现层主要的呈现方式为界面的视觉设计。作为视觉设计中的重要组成部分，色彩对于人们感知，情绪等感受都会产生直接的影响。色彩作为传递产品情绪的媒介帮助传递以及获取信息，成为帮助建立用户第一印象的重要工具，色彩作为文化的载体往往代表某种象征，承担特定的含义，代替语言文字的功能[3]，在整个界面设计的过程中需要用大量的时间进行对比，考虑得到适合产品的界面色彩。

一、色彩应用到UI设计中展现出的基本内涵及遵循的原则

1.色彩应用到UI设计中展现出的基本内涵

UI 设计指的就是用户的界面，主要体现在人与机器的互动上，在界面上展现出众多的功能，给予用户良好的使用体验。在界面设计中合理的应用色彩可以提供给用户更丰富，更深层次的视觉效果和感受，多样化的色彩对比应用在界面的设计中可以帮助用户快速的区分各个功能从而做到快速定位，比如绿色代表通过，正确；红色代表禁止，关闭，用户可以通过这样的颜色提示进行快速操作，形成愉悦的体验。色彩逐渐被应用到UI设计领域中，大大降低了用户获取信息的难度，凸显出界面内的各个区域，使用户快速获得相关的信息，通过色彩的对比加深对信息的印象[4]。

2.色彩应用到UI设计中需要遵循的使用原则

色彩的使用呈现出的效果会直接影响整个界面的呈现效果，为了提高界面的设计品质需要考虑的首要条件就是色彩的使用，而色彩在界面上的使用也需要遵循多项原则：第一，色彩在界面设计中需要不断地考虑色彩关系，在确定界面的主体配色之后，就需要寻找与主色调相对应的颜色，保证界面的配色更加和谐。第二，界面的颜色设计中需要遵循色彩心理学的相关规律，色彩心理学是一门通过研究人类感受颜色的影响后，而产生的系列行为或心理活动的学科[5]。这种影响是用户通过视觉观察颜色之后所产生的心理特征，例如：看到红色会有热，焦躁，热烈的感觉，看到蓝色会有冷静，平和等的心理感受。这是色彩在色相层面上对于人们心理的影响但是这种影响不止停留在色相层面，不同明度的颜色也会对用户的心理影响，例如，明度高的颜色会给人透亮的感觉而明度低的颜色会给人们厚重，稳重的心理感受。

二、色彩在界面设计中的作用

1.区分界面的功能区域

色彩在界面设计中有着不可替代的作用，在界面设计中合理地运用颜色可以帮助用户更加清晰地区分各个功能模块，快速定位到自己想要寻找的功能。颜色可以区分界面的背景，图标的颜色，图标的状态（选中状态，不可点击状态等），状态栏，导航栏等区域。

2.加强界面层级关系，做到强弱对比明显

界面中会有不同重要程度关系的呈现，不同的内容之间会有一定的从属关系和不同的重要程度，界面中用颜色进行信息重要程度的区分可以更好地区分界面的层级，能够快速传递给用户重要的信息，例如微信界面中用户，群组的名称用到了颜色比较深的黑色而用户信息则用到了灰色来进行设计，这样就可以快速定位到用户想要寻找的某个人然后再看到所发的信息，并且未读信息则用到了红色这样强烈，吸引眼球的颜色凸显未读信息的重要性。

3.体现界面设计风格，增强用户沉浸感

不同的颜色对于人们所产生的心理影响是不一样的，那么我们在界面的设计中可以利用好这一点，帮助产品更好地实现定位，明确产品风格。例如，微信最初设计时所对标的产品是手机中的短信功能，而手机中的短信的图标设计为绿色+白色气泡的模式，用户看到绿色+白色的气泡就会想到信息这一含义微信的设计团队就利用了这一点对微信图标进行设计，使得产品的整体风格和定位都符合最初时的设定。

4.满足不同用户群体的需求，帮助更多人正常使用

对于重视残疾人，老年人，视觉障碍等特殊人群，在界面设计中，需要将这类用户考虑进去，颜色作为最重要的视觉因素在设计的过程中也需要将“无障碍设计”考虑进去，无障碍设计（barrierfreedesign），这个概念名称始见于1974年，是联合国组织提出的设计新主张。其理想目标是“无障碍”。关注、重视残疾人、老年人的特殊需求。人类是拥有视觉、听觉、触觉等诸多感知“通道”的整合体，其中，无障碍色彩设计是一个面向所有公众的视觉设计系统，该系统的最终目标为创建无障碍可视环境，使信息尽可能准确地传达给更多的公众。在使用操作界面上清除那些让使用者感到困惑、困难的“障碍”（barrier），为使用者提供最大可能的方便，这就是无障碍设计的基本思想[6]。

例如高德地图V7.7.8正式版中新增了色觉障碍模式，用户开启该功能后路况便会采用色觉无障碍配色显示，如图1所示，开启该功能之后使用者的界面会从以前的绿色-（通畅）黄色-(缓行)红色（拥堵）深红色（重度拥堵）改变为蓝色-（通畅）浅黄色-(缓行)土色（拥堵）深灰色（重度拥堵）来进行替代，将原来界面中的绿色，红色，深红色这些难以辨别的颜色进行替代，这样做的目的就是帮助色觉障碍人群能够更好的在使用导航过程中辨别实时路况选择最优的线路进行通行。

图1 高德地图的视觉障碍模式

高德的这种思考方式是让任何人在任何情况下都能平等地、方便地、无障碍地使用地图导航。

由于手机在我们的生活场景中占有越来越重要的地位，越来越多的人习惯于只携带一部手机出门，所以不同的APP在我们的生活中占有越来越重要的地位，在众多的使用者中，有视觉障碍的用户也占到了一定的比例，所以我们在设计APP时需要考虑到这部分用户的使用体验，保证他们的日常体验。目前市面上针对色觉障碍的用户的设计主要分为两个方向：第一种方向：会推出针对色觉障碍用户的色觉障碍模式，这样做的好处是会保证色觉障碍以及普通用户的体验，但是作为设计者来说一般需要做出两套设计方案，那么如果产品的界面总数较少的话对于我们设计师来说工作量并没有增加很多，但是这种方法并不适用于所有的界面设计，于是就有了第二种设计方向：针对界面量比较大的界面，我们往往只会设计出一套界面来适应更多的用户，那么在设计的过程中我们就要考虑到不同用户的不同需求，其中就包含了色觉障碍的用户，那么针对色觉障碍的用户我们通常的做法是：减少界面中色相出现的频率。如微信中关注公众号的界面升级：由于微信的主色调为绿色，在微信未进行升级之前，关注公众号的按钮为绿色+白色这样的颜色模式，由于这两种颜色的明度相近，会导致在色觉障碍用户眼中识别度不高的情况，针对这种情况，微信的团队对此按钮进行了调整，从原来色块+文字的模式调整成为图标显示的模式，如图2，这样做会从根本上避免辨识度不高这种情况，使界面更具有普适性。

图2 微信关注公众号改版设计

三、色彩在界面设计中的应用原则

1.利用色彩三要素进行设计

色彩的三要素分别为：色相，明度和饱和度。设计师通过使用不同的颜色明亮程度来增加颜色的层次感，虽然上文提到不同的区域需要用不同的颜色进行区分处理，这里指的颜色具体指的是色彩的色相，但是在界面的整体设计过程中我们用到的色相种类一般来说不会超过三种，所以在色相区分大功能区的前提下，设计师需要利用色彩的明度对其他部分的信息做出信息层级上的区分。

2.做好色彩搭配

在界面设计中如何合理使用色彩从而达到更好的界面效果，我们在界面设计中应该遵循以下三种原则：

（1）统一性

如上文所说，界面中各个区域都有它的作用，我们在界面设计的过程中，在保证界面中各区域合理性的基础上，需要保证整体界面的整体性，帮助用户从视觉等各个层面做到统一。界面设计的过程中，设计师们会将版式设计应用到界面的设计中用来区分界面的各个功能区域，但从宏观来看，版式设计在功能区域的划分中所用到的方法大多是为版式设计中的格式塔原则，但是为了更加加强格式塔的视觉效果，界面设计的时候应该更多地利用色彩进行区域的划分，例如在苹果官网的首页设计中，使用大面积，不同颜色的色块让各个部分产生联系与区分，相似的色彩区间以及板式的划分让整体界面达到高度的统一。

（2）合理性

以用户为中心作为出发点，用户在使用界面的过程中，界面的色彩搭配会给用户带来第一印象，用户在慢慢使用产品的过程中能够逐渐适应和习惯界面所用到的色彩，让用户对界面的色彩与行为操作建立起联系，让整个产品的后续延续更加规范，合理。

我们在界面设计中考虑到色彩的话一定要考虑到使用颜色的性格，不同色相的颜色会给人不同的心理感受，但是在界面设计中我们也要注意调研在市场上的同类产品，同类型产品比我们的产品早一步投入市场，用户对于这些产品的主题色已经形成习惯，例如，ios系统中电话，信息的图标都是绿色+白色，作为同类型但是上线时间比较晚的微信来说，微信的色彩设计就遵循了这样的规律采用了绿+白的色彩模式进行设计，这样在产品上线之后用户只需要通过色彩就可以辨认别出产品的性质，如图3。

图3 ios电话 信息 微信图标对比

我们在色彩设计的时候也需要将这部分因素考虑进去，这样在产品上线的时候可以降低用户的学习成本。

（3）简易性

色彩的合理应用会给界面更多的层次感和空间感，而不同色彩的搭配也会塑造出不同的界面风格。但是界面设计中最重要的原则就是不适合太复杂，我们在设计中应该以简洁性为主，从用户体验的角度来说，简洁的界面和操作能够减少用户的学习成本，简单明确的界面也能够给用户更明确的指向性，帮助用户更加快速上手产品，如最初的微信只有用简单的界面将所有的功能串联起来，让用户在使用时候能够一目了然。

结语

作为界面的重要组成部分，色彩的应用对于整个产品来说都是至关重要的，只有在界面设计的过程中用好了颜色才会更加体现出产品的整体设定并且会带给用户更好的体验以及沉浸感，在界面设计中不仅要考虑到颜色的属性也需要考虑到界面的适用性，在界面设计的时候需要将不同类型的用户考虑进去，我们的用户中会包含很多有视觉障碍的用户，在界面设计中需要将这些用户考虑进去，这样做出来的产品才会更加地具有普适性。设计界面时使用颜色的过程中也需要考虑到色彩的三要素以及色彩的性格以及7:3:1的色彩搭配原理，只有做好了色彩搭配的环节，我们界面的设计才会更加出彩更加贴近产品的设定，从而达到提升用户体验的目的。