交互界面设计中色彩对受众的引导

李建一 / 韩瑞大学

人的感官分为五种：视觉，听觉，嗅觉，味觉，触觉，视觉是人类的第一印象感觉，而对视觉最有影响的因素是色彩。在人机交互中，图像表现是一个非常重要的因素，而图像元素又包括文字、图形和色彩，其中色彩是人机交互的主要内容。

1 交互界面设计概述

“交互”是人与事物、人与人、人与环境的相互作用，并由此引起一定的改变。“界面”一般是指使用者界面。问题的答案在于“设计”。

APP的界面设计是指用户和智能移动终端设备的交互界面，它是用户与智能移动终端设备之间信息输入、输出、沟通的载体，是人机交互的辅助层次。APP的界面设计始终以“以人为本”为目标，优良的APP界面不仅能带来简洁、美观的视觉体验，更能提升用户的使用体验[1]。

APP界面上的色彩显示原则，即加色混合，是通过将不同色彩的光相进行混合而得到的新的色光。所有的色彩都是要在用户面前用光呈现出来，而在加色法中，将红绿蓝3种原色光按比例混合，就可以得到完整的色层。色彩有温度、距离、重量等多种感受，同时，人们对于色彩的感受也会受到情绪、环境等因素的影响。APP的界面依赖于由智能终端的显示屏发出的光线，然后通过视网膜传递到大脑，进行色彩识别[2]。智能移动终端设备的显示器均应用RGB像素排列方式或Pentile像素排列方式，与传统的印刷媒体相比，呈现出更加亮丽的色彩，从而使APP产品在市场上的竞争更加突出。

2 交互界面设计中色彩对受众的引导原则

2.1 符合主题信息原则

目前，人机交互界面的设计已成为当今的潮流，要真正了解使用者的真正需要，使使用者获得更好的使用感受，而视觉化的设计则是至关重要的。要确定产品风格，获得怎样的用户体验，要在第一时间吸引用户，就必须要在形式和内容上保持高度的一致性。

为产品定下主调，各行业对色彩的需求也有差异，例如机关色彩要严肃，以红色为主；金融机构的色彩应该是稳定的、让人安心的色彩，以蓝色为主（图1），蓝色界面代表冷静、沉稳，让受众在操作的过程中保持理性。实际上，交互界面就像是一件商品的外包装，在特定设计中，色彩导向要与主题内容相一致，让用户不用考虑太多就能明白这个产品的特性。

图1 冷色调手机应用界面设计示意图

2.2 体现色彩统-原则

结果表明，一个产品的可被发掘性非常关键，没有用户，这个产品就没有任何意义。因此，要做到颜色一致、界面完整、吸引用户注意、提高用户忠诚度。不过，屏幕的尺寸有限，要区分界面主要次要关系。在互动设计中，界面的跳跃性展示是用户使用时不会感到紧张的一个重要标识。除了箭头、文字、按钮等提示，还有颜色的提示。一般来说，按键的颜色不会超过三个，而表示“动作”的按键应该是统一的颜色。

2.3 增强情感互动原则

通过合理的颜色组合，达到了对使用者的视觉引导，将互动的颜色与使用者的精神形象相融合，从而增加使用者对产品的认识，增加使用者的使用频率。

比如，颜色的明亮和纯净程度会带来光明、明快、愉悦的感觉，是孩子最喜欢的颜色。比如，冷色会给人一种冷静、寒冷的感觉，越是靠近绿色，就越是能洗涤灵魂，反之，越是靠近紫色，给人一种神秘而又尊贵的感觉[4]。同样的色彩，在不同的场合搭配，会带来不同的感受，所以，可以通过多种角度设计来加强与人的感情交流。

3 色彩在APP界面设计中的应用意义

在APP的界面设计中，色彩常常起着先声夺人的作用，是APP界面设计的关键因素。

3.1 塑造界面与品牌风格

色彩在APP的界面设计中起到了很大的塑造和影响交互界面的功能，在色彩、明度、纯度等方面，通过色彩的对比和协调，可以产生多种界面的风格。比如淘宝APP，以红、橙两种色调为主，营造出生动的界面，激发消费者的购买欲；而支付宝APP则以蓝色为主色调，营造出稳定的界面样式，给用户带来安全、专业和可信赖的视觉效果。另外，每个色彩都有自己独特的符号含义，通过对交互界面色彩的选取，可以传递出企业文化和品牌观念，从而形成良好的品牌形象；比如网易云乐APP以红色为主色调，公司以红色调为主，代表积极乐观、热情、充满希望；网易的标志是“音乐的力量”，红色与网易公司的新兴势力的兴起形成了鲜明的对比，增强了人们分享和团结意识，网易把“红色”融入自身，树立深入人心的理念和印象。

3.2 引导用户视觉与功能划分

在APP的界面设计中，色彩有区分区域、指导用户视觉和功能划分的功能，人们的视觉往往对色彩有着很好的辨别能力，就像《视觉可用性》中提到的那样：当色彩成为战略的焦点时，色彩就会指示用户应该去哪里，从而指引用户的视线，这是最好的方法。在界面设计中，利用主色调、同色系辅助色彩以及多种色彩进行交互，可以有效地指导用户操作[5]。比如，淘宝APP以聚划算、百亿补贴推广为主要模块，文字和图像信息均以红色或橘色为主，在网页中呈现出鲜明效果，能瞬间抓住用户的眼球，引导用户点击或应用不同色彩的反差来突出界面的主要内容和版面，以吸引、引导用户。同时，还可以根据色彩差异，从色彩的色相、明度、纯度等方面进行直观划分，指导用户按照顺序有序地进行界面操作，大大提高了界面的可视化和实用性。

3.3 提升用户体验与审美愉悦

在APP的界面设计中，色彩的正确运用能提高用户的体验度，而界面色彩的搭配则会对用户的应用和美学产生直接影响。比如，界面的背景色彩，一般都是以亮或淡的色彩为主，根据调查，在APP界面的限制下，在浅色背景下阅读较深的文字信息，要比在深色背景下阅读较浅的文字要舒服得多，也更容易阅读，能让用户感到清爽愉快。不同色彩之间的协调配合，形成中度的对比，使界面色彩整体均衡，减轻用户的眼睛疲劳，给用户带来视觉上的快感。

4 交互界面设计中色彩对受众引导案例

为了更好地满足使用者的需要，让使用者对其产生认同，因此，在人机交互界面的设计中，应具备对颜色的知觉与心理的基础知识；可以让使用者轻松愉快地使用该产品。

例如，“淘宝”APP的启动图标是橘黄色的，充满了积极、正能量的视觉效果，能够刺激消费者的购买欲望。进入界面后，主色为橙色，饱和度比较高，但占据的区域不多，比如输入框、图标、按钮等，还加入了少量的黄色渐变，减少了饱和度，给受众带来了某种警示。在网页中，以白色为主体，以白色作为底板，可以方便地展示产品的内容，并能凸显图片的信息，使使用者迅速高效地了解产品的特性[6]。

在页面的设计上，苹果的界面依旧保持着一贯的风格，简洁而又优雅，白色的背景和黑色的导航条。按下后倒置的色彩可以让用户清楚地知道自己在哪里。界面上主要是产品的图片，很显然，这些产品的广告都很吸引人。每个网页的导航条都是相同的，同样的色彩处理、信息组织、视觉效果，可以让用户轻松地找到自己想要的东西。

通过应用多种色彩的组合，可以使产品的界面变得丰富多彩、有趣，从而达到很好的视觉效果，而不会使人感到单调、乏味。当用户在使用产品时，能够快速地在复杂的界面中寻找到所需的信息，并构建出一系列清晰的逻辑。让用户对自己的产品有一种莫名的好感。

5 色彩在手机购物应用界面中的作用

5.1 营造氛围，塑造风格

色彩是影响手机应用程序界面的首要因素，它在创造整体氛围中起着关键作用，从色调、色相上来说，色调是影响整个手机应用程序界面的整体形象，如纯色调、强色调，绚丽、浓烈；浅色调，柔软；音乐色调，舒服；深色调、灰色调严肃、厚重。在手机应用程序中，色相决定了联想空间和界面氛围。不同的色彩会给用户带来不同的情感体验，还能给人以冷暖，轻重，软硬，动静等不同的感受。设计师还可以根据宣传产品的特性、受众的喜好以及想要表达的情绪等因素，充分运用色彩效果这一法则。

5.2 强化视觉区域、引导视觉流程

颜色在移动应用软件中的另一个重要功能是增强了屏幕的可视度，这取决于移动电话的应用界面。比如将手机应用界面分成不同的版块。此外，色彩还能指导人们的视线，运用色彩的主次联系，为不同层面的信息传递提供支持，比如通过强调色彩来突出主体互动，应用色彩的改变来提示用户在界面内容中的不同和跳跃。

6 手机购物应用界面的色彩搭配分析

6.1 色彩搭配准确

6.1.1 与网站色彩搭配相符，与辅助色搭配相融

大部分移动电话软件都有公司网站，以增强公司的品牌影响力。用户在选择手机界面的色彩时，通常会优先使用网站中的标准色彩。比如京东商城，是中国最大的自营电商平台，京东APP的屏幕，是以大红色为主，亮度和纯度都比较高，而淡灰色和深灰色则是辅助色。虽然界面中有大量的信息，但是在应用辅助色的情况下，可以很好地指导用户的互动，帮助用户快速地完成交易。还有亚马逊中国，是一家集千万商品于一体的电商平台。其移动应用程序界面也采用了与站点相同的色彩[7]。白色、橘色、黑色的交互，让整个画面呈现出都市、现代、简洁的感觉。旨在营造和谐、宁静、温馨的购物环境，提升顾客的使用感受，增加顾客的回头率，并推动长期获利。

6.1.2 了解色彩心理形成的社会文化环境，充分考虑用户感受

手机的应用程序应结合当前经济社会文化，理解用户的色彩感受。在不同的时空，不同的国家，不同的民族，不同的环境下，颜色在不同的人群中所代表的意义。

中西两种不同的文化与美学，可以从国内外手机购物应用中看出不同效果。国内手机应用多以热烈、温馨的颜色为主，具有强烈的视觉冲击力和强烈的情绪，容易引起消费者的购买欲望。比如，淘宝的颜色是橙色的，天猫的颜色是红色的；而在国外，则是以冷色或浅色为主，例如 Lyst的黑色，NET-A-PORTER的浅灰色，提倡成熟、时尚、现代。在理解使用者心理的过程中，应注意到使用者的情感，并注意其心理状态。

6.2 色彩整体搭配

6.2.1 根据手机购物应用需求，考虑主辅页的色彩搭配

当手机的主副页使用同样颜色时，第二次跳跃的网页应用将会以同样颜色为基础，再应用不同的版式布局、图标样式、应用多样图标来调和单一色彩。比如“有范APP”，APP分成三个部分，分别是男生、女生、生活三大板块，主页和其他次要页面都是黑色的，走的是时尚、追求个性的风格，但每个展馆的图标色彩、图标风格和不同色彩的图画都有细微的差别，色彩一致而不单调。

如果在手机应用中使用不同颜色的主副页，色彩差异较大，容易造成杂乱无章的不统一感，则可采用不同色调、相近色调，增强整体感[8]。通常，在手机购物应用中，设计师会在欢迎网页上制作四张色彩鲜明的网页，以吸引用户的注意力。但是它们的色彩相似，都是明快的色彩，用相似的格式来保持网页的一致性，从而确保用户的接纳程度。

6.2.2 考虑图片与手机应用界面色彩搭配的关系。

在这个阅读图片的年代里，随着网络速度的提高和通信网络的约束逐渐消失，移动端软件的用户端逐渐成为用户端的重要部分；不但 PC用户，手机用户也开始采用漂亮、清晰的照片；一些谨慎的设计师，在设计手机应用的时候，会根据客户的实际使用习惯，会有两个接口，一是有无线连接的高清图片；一种是不带 WiFi的正常图片 一般情况下，为了让消费者的视觉体验更加流畅、舒适，都会对产品进行一些修改，让产品的照片能够与手机的色彩融合在一起。

6.3 色彩搭配个性

在移动手机的应用程序中，基础色彩的数目很少，但是色彩搭配和色彩的感觉是非常丰富的。比如，顾客们需要的是“粉色”，而“粉色”却是包罗万象，有鲜艳的粉红，有优雅的粉红，由不同的色彩所形成的情感差异很大，所以给人的自然印象也是不一样的。我们在开发移动应用程序时，首先要查找颜色的关键字，而要生产婴儿用品，首先要考虑的是温和、舒适、淡雅，所想的颜色是浅粉色、浅蓝色和浅黄色。例如，蜜芽宝宝会选择最普通的粉红色为主，不过在每个类型中，都会按照图案的要求，与柔软的蓝、紫、绿、橘相配合，避免过于粉嫩的感觉，为消费者创造简单、放心、有趣的母婴产品购买体验。

7 结语

在信息社会中，用户的交互界面表现出多样化特征，同时也体现了设计者的思想观念、情感、主观感受等社会性文化特征。实际上，设计是人的主体性思考和现实生活相互影响的结果。而色彩的感受与应用难以精确地描绘，由于人们的视觉心理具有差异性，并无统一的规范，要想找到其中的规律，就必须要不断地去摸索、开发色彩，去引导、吸引用户。