色彩在移动端界面设计中的导向性应用研究

王羽菲

摘 要：从色彩在界面设计中的导向作用出发，探索如何在界面设计中合理运用色彩的导向性。结合色彩在界面设计中的重要性，重点分析色彩在用户心理上的情感传递作用和在生理认知导向上的表现和影响，总结归纳出色彩导向性在界面设计中的设计方法，得出色彩需要与功能保持一致性、注意界面整体与局部的关系、科学合理地应用色彩、传递相应情感和色彩符合审美共五条设计方法。

关键词：色彩；界面设计

Abstract：Based on the guiding role and importance of color in interface design， focusing on the function of colorin psychological emotional transmission， as well as its performance and influence on physiological cognitionorientation， this paper explores how to reasonably make use of the orientation characteristic of color. This papersummarizes the color-oriented design methods in interface design， and concluded out five design principals：thematching consistency of color application and function， the relationship between the zoomed-in parts and the fullpicture during interface designs， the rational methods of applying colors， the convey of emotion and the colors thatconforms to aesthetics.

Keywords：Color;interface design orientation

互聯网发展迅速，越来越多的用户使用移动应用，信息技术的支撑也让移动互联网的整体覆盖率不断扩大，智能产品层出不穷，海量的应用潜移默化地改变人们的生活方式和通讯手段，呈现色彩的视觉载体从传统平面拓展至移动端交互界面，通过手机获取和传递信息，互联网的产品也不断迭代更新，信息量暴涨的生活大环境下，通过界面传达的信息越来越多，用户对审美的追求也不断提高，除了产品自身需要具备能够解决用户痛点的实用性外，用户体验成为产品能否成功的重要度量。不论纯界面产品还是线下实体产品，色彩一直是设计中必不可少的部分，往往作为辅助性元素被应用在装饰环节中，但只关注其装饰性功能必然已不能满足大众需求，用户追求的精神和心理需求愈来愈高，因此色彩除装饰性作用外，在心理及生理认知上对用户起到的导向作用也需受关注。

1 移动端界面设计中色彩的重要性

光的波长和强度不同，形成了我们现在肉眼可见的不同颜色，饱和度、明度、对比度的不同更让颜色可以被分为同类色、互补色，不同的产品所具有的不同色彩属性，是影响设计的最基本元素，但与其他影响设计的因素不同，色彩具有其独特性，它具有文字和图片无法代替的作用，在一定程度上能够跨越不同年龄层和文化水平，甚至在一些情况下，用户对色彩传递的信息比图文更敏感和直接。

从视觉影像的角度看，我们常接触到界面上的加载进度条基本都是用冷色调，很少用暖色调，因为相关研究表明，颜色能影响用户对加载速度的感知，而这种作用是在用户处在放松状态下产生作用的[1]，实际上相同时长的等待时间，但暖色调会让用户对于时间的感知变长，而冷色调可以减缓用户对页面加载的焦虑情绪（图1）。但在游戏界面中，常见的如倒计时的显示界面，除了背景声音会愈发让人紧张外，在接近时间结束点的时候，倒计时的数字颜色也会越来越鲜艳，从黄色系变为红色系，此时倒计时界面和加载界面的场景不同，主要是为了让用户能够尽快在有限时间内完成操作，制造紧张的氛围，故越接近结束时刻，倒计时数字越发醒目，在视觉上让玩家觉得更具危险性。

色彩亦会直接影响用户对产品的初印象和对品牌的理解。移动端的界面产品是当今时代的主流产品类型，和传统产品不同，用户通过手机屏幕看到的是APP 图标以及其呈现的界面，大部分没有线下对应的工业产品，故颜色在移动端界面产品中的影响力度相比传统产品更高。每种颜色都有其独特的情感表达，在不同语境下表达的情感内容也不同，但具有相同共性，也就意味着移动端产品中视觉规范里的主体色需要与产品本身的特性、气质相符合，主体色会贯穿产品的所有页面，影响用户对于产品本身功能的理解和后续的使用。除了需要考虑产品本身的功能使用外，也需要考虑产品面向的目标人群，人群的性别、年龄差异都会影响产品的色彩选择，根据目标用户去选择色彩搭配也是提升用户体验的重要方式之一。

视觉上，合理的色彩能够，引导品牌表达其感知，更好__地满足用户的情绪。在品牌形象中，色彩能够让用户加深对品牌的印象和加大品牌传播力度，贴合用户对相关移动端产品的功能性理解。在互联网时代下，我们日常生活信息传递和获取的载体基本都已经演变为手机通讯，移动端的界面更是承载了大部分信息内容，但手机屏幕大小有限，如果一味地堆积信息，提供过多内容，会让用户的认知承载超负荷，而内容过少又会导致用户需要不停滑动或点击来达到切换屏幕的目的，交互成本过高，因此相对于传统色彩，现在的色彩应用需要更要注重其在界面中的引导性。

2 色彩的导向作用

2.1 色彩对用户的心理认知导向

用户对色彩的认知可以分为心理和生理两部分，色彩的心理认知指的是色彩的间接性心理感应，是人通过自己的喜好、一系列对色彩的联想而最终产生的感觉[2]，不同的色彩会给人带来不同的心理感受和情感联想，但同种颜色在不同的场景和背景下可以有多种不同的情感传递。若单纯从颜色与物的联想角度出发，红色则经常被作为热情的象征，因为我们意识中接触到的太阳、火都能够提供给人温暖，红色就被赋予了热情似火的性格，可灭火器、防火服这类基本也以橙红色为主，不光是从火的角度联想，也有警惕之意，禁止符号通常也用红色标注，因为醒目，能够及时引起他人注意，并作为一种提醒，达到让人防范的目的。可见同样的色彩，联想到不同的物品也可以被运用在不同场景。相同的颜色除了联想的具象与抽象内容不同外，在不同文化背景下所拥有的深层内涵也不同。在中国传统文化中，红色与黄色象征皇权，是尊贵的代表色，但在西方的一些国家中，黄色有胆小鬼和耻辱之意。

合理的色彩应用能使人感知到产品自身带有的情感，产生人机情感上的交互，而愉悦的情感能够让用户忽略产品使用过程中出现的小问题。产品除了能够解决用户的痛点外，在解决痛点过程中，也不仅仅只是冷冰冰的工具，只有带着提升用户体验的目标，结合不同用户在不同场景下的运用，所设计的产品才会具有温度。

唐纳德· 诺曼在《情感化设计》中将设计区分为3 种水平：与外观关联的本能水平、与使用关联的行为水平和与记忆有关的反思水平[3]。外观会影响用户对产品的初始印象，从而会涉及与产品后续使用相关联的行为水平，又在反思层激发相关记忆。在与外观关联的本能水平中，视觉是最主要的影响因素，而色彩更是影响视觉的重要方面，需要与功能相吻合。比如我们常看到的办公软件，大部分都用蓝色来作为产品视觉的主体色，比如：腾讯会议（图2），因为蓝色容易让人联想到大海、天空，让人产生沉静、理智的抽象情感联想，贴合办公软件注重效率和客观态度的功能调性，因此色彩在产品本能设计上具有预示产品功能的作用。

在行为层设计上，色彩对受众也有引导作用，因为与纯实物产品不同，用户通过界面获取信息需要更细致地設计视觉动线，考虑复杂的信息如何展现才能提高用户的使用体验。如前文所说，醒目的颜色也容易被用作警示作用，如红色、黄色，通过手机屏幕承载的信息很多，这类醒目的颜色就会被用来吸引用户注意。比如当我们在手机上填写信息时，往往会有必填和非必填内容，必填内容或必选项经常用红色的星号来标注，结合符号含义来告知用户此部分为必填项，用户就能更容易捕捉到相关信息，如果没用醒目的色彩，用户忽略标注的概率就会提升，当用户提交时，系统提醒其未符合提交要求需要补信息的可能性上升。

满足人们的需求是产品的初衷也是核心目的，但人们对产品的需求也在日渐增加，上升到用户对产品的内在精神需求和心理诉求，这就会涉及反思层的设计。尤其部分产品是为了特殊群体服务的，特殊群体对于精神上的需求会更高也会更难满足，如何能够实现与特殊群体的情感互动并使产品得到他们的认可也是色彩应用在界面设计中需要重视的问题，通过色彩拉近产品和用户之间的距离。

2.2 色彩对用户的生理认知导向

色彩对人的生理认知是指色彩固有且客观的视觉效果，是人类观察到色彩时所产生的单纯的生理感应，与颜色本身自带的波长相关。色彩从光进入到人眼中分为三个阶段：第一个阶段即物理性阶段，由光的性质和亮度决定；第二个阶段是由视细胞产生光和色的对应，为生理性阶段；第三个阶段是人接受光时，心理产生的意识变化，色的感觉，就是光作用在眼睛感觉器官上的刺激结果。在认知对象或客观性事实的过程中，由远心性神经所产生的反应[4]。颜色并不是孤立存在的，会与其他有色区域重叠或比邻，产生对比效果，色彩在生理上最基础的导向作用是让用户有点击的欲望，能够明确分辨出不同模块的功能，强调关键信息，作为重要元素的引导，色彩遍布界面设计中的每一个元素，再小的图标也需要考虑色彩的应用。

波长同样也会影响人类生理上的视觉感知，尤其需要注意的就是低龄儿童和老年用户。学龄前儿童的视力还处在发育完善的阶段，后期才达到正常成人水平，他们对色彩的认知能力也是在成长过程中才不断提高的，3 岁及以下的儿童往往难以区分复杂的混合色，但学龄阶段的儿童也已经有自己的颜色喜好，往往对暖色调产生一定偏好[5]。对学龄前的儿童来说，色彩在界面设计中的作用主要是辅助学龄前儿童的认知，因为色彩能够帮助增强信息传递的效率和准确性，减少儿童的认知障碍。他们无法通过阅读文字来接受大部分图2 腾讯会议界面截图信息内容，但色彩的对比能够引导他们点击主要元素，所以色彩在界面中就格外重要。

与学龄前儿童类似的是老年用户，现在很多移动端产品的界面都已经研发出了针对老年用户群体的关怀版本，相较正常版本，老年版界面上的字号会更大，字体也会加粗，但色彩上却容易被忽略。随着年龄增长，进入老年期后，老年人对颜色感知的敏感程度也会下降，因此需要拉高色彩上的对比度以及饱和度，用色彩辅助引导用户。

同时色盲和色弱这类特殊群体，他们因为先天基因或后天的影响导致对特定颜色失去辨识度，虽然大部分产品并非针对这类特殊群体，但也有一些界面端产品是针对需要关怀的特殊群体而设计的，就更需要从色彩角度出发，减少信息理解成本。

3 色彩导向性设计方法

3.1 与功能保持一致

对产品而言，讲究设计的一致性往往指产品在不同使用场景下反映相同的设计方式。比如同类型页面的跳转动画、交互方式，色彩导向性上的一致性包含两个方面：一方面与设计方式相同。即在不同场景下同样重量级的元素在页面的颜色尽量保持一致性，不能每个页面相同的元素都用不同的色彩表现，不仅不利于审美，更容易让用户困惑，需要遵循视觉规范；另一个方面，即从产品的功能出发，用户容易在视觉上对产品有相关预期，而色彩对视觉的影响更是不可忽略，要让界面视觉色彩贴合产品的功能和品牌调性，有利于用户对产品形成良好的初印象和后续的使用。

3.2 注重整体与局部关系

界面设计中，不可能只有一种颜色，其他颜色都需要和主体色匹配，才能保持整体统一和谐。整体到局部合理的色彩搭配更能够让用户从各方面体会到产品传递的色彩语义，并影响用户处理信息的速度。因为颜色与颜色之间也会构成各种关系，通过对比度、明度、纯度的搭配，以及色相差的对比，用色彩告知用户哪些部分是一体的，哪些部分是突出的重点内容，因为色彩颜色的增加会让用户在潜意识中对信息进行区分，如果不注重整体与局部，太过于强调区分，会让用户不停分析各个元素之间的关系，而好的用户体验是要让用户能够快速获取想知道的信息，降低学习成本。因此要注重整体和局部色彩的运用，更简单有效地传递信息，让用户能够快速对信息进行筛选。产生对比的同时，也注重色彩与元素形态的和谐，完成信息指引。

3.3 科学合理的应用

色彩在界面设计中具备的作用相同，但是作用的大小对不同的用户群体而言也是不同的，因为不同群体对相同颜色的感知能力不同，如前文所述，学龄前儿童对界面设计中的颜色要求就更高，因为他们对其他信息的感知能力相对更弱，对他们而言，颜色起到的信息传递作用相较于正常成年人更大，他们需要通过色彩的导向作用来获取部分信息。同时，即便不针对特殊群体，我们日常在手机屏幕上所花费的时间很长，一些波长的光产生的颜色在长期注视下会让用户容易产生视觉疲劳，因此，在运用色彩的导向性时，要遵循科学。

3.4 传递相应情感

视觉上和产品功能的一致性能够传递一定的情感，但更重要的是色彩搭配在界面内的合理应用。用户已经愈来愈开始追求反思层面的情感，情感也是影响用户体验的关键，要让色彩帮助产品与用户建立起情感联系。如学龄前儿童的界面产品，颜色往往比较明亮，给人轻快的感觉，因为明亮的颜色在情感上容易让人觉得轻松，更容易让人心情愉悦，也可以通过色彩传递的这种感觉吸引学龄前儿童的注意力，配合界面动画，起到导向性作用，与界面产生交互行为，心理的认知逐渐成熟。

3.5 符合審美

虽然色彩的导向性很大程度上以实用性为主，但产品在美学层面给用户的感受也会影响用户的情绪。而情绪会改变人脑解决问题的方式，进而改变认知系统的运行过程。通过审美来拉动用户的情绪，引导其对产品产生兴趣，可以让产品使用者在与产品发生交互前心情更愉悦，美感来自人与色彩交互过程中无碍且快速基本的沟通、生活经验的嵌入和环境的关系、经验人化的创造和保留等[6]。通过符合用户审美的色彩满足其主观的视觉享受快感，提升产品的价值。

4 结语

色彩作为设计中最基本的元素，在界面设计中有重大影响力，承担的功能已经不仅仅是纯视觉的装饰作用，随着用户体验被越来越重视，在用户与产品色彩交互过程中色彩的导向性更应该被关注。色彩的表现力渗透在界面中的每一个元素中，信息技术的支持更让色彩的表现形式不同于以往。我们提倡以人为中心的设计，检验产品好坏最基础的标准即使用者的感受，从目标导向的角度出发，思考如何运用色彩的导向性去提升用户体验，拉近产品与用户之间的距离，帮助用户提高获取信息的准确性和有效性。

5 参考文献

[1] 仲祥成. 基于用户体验的移动端产品色彩研究[J]. 西部皮革，2020（12）：103-104.

[2] 王至柔. 色彩引导性在移动端信息筛选中的应用——以二十四节气导购平台为例[D]. 北京： 北京邮电大学，2020.

[3] 唐纳德· 诺曼. 情感化设计[M]. 付秋芳， 程进三译. 北京： 电子工业出版社，2005.

[4] MADEAＪ.The law of simplicity[M].Cambridge，Massachusetts：MITPress，2006.

[5] 郝晶. 基于学龄前儿童认知心理的游戏APP 界面设计研究[D].北京： 中国矿业大学.2015.

[6] 毛静， 王峰. 交互色彩的导向性功能探究[J]. 包装工程，2012（20）：86-89.