UI设计中色彩的应用

【摘 要】 如今随着互联网行业的迅猛、蓬勃的发展，各类互联网站、APP爆发式增多，并以惊人的势头融入我们的生活。色彩设计作为各类UI设计项目中的重要工序，有着举足轻重的作用，对UI界面的访问量和点击量有着不可忽视的影响。文章通过对UI设计中色彩的作用、UI设计中的色彩调和、UI设计中的色彩情感三个方面的论述，来探讨色彩在UI设计中的应用。

现在这个时代是色彩科学和色彩应用突飞猛进的时代。随着技术的改革和进步，UI设计师的交互思维水平、软件制作水平差距不大，设计审美水平也在伯仲之间，但最后产出的移动APP、网站的用户量、访问量、访问深度却千差万别。观察当下热门的UI设计产品，不难发现成功的色彩设计方案是它们必备而有力的武器。

一、UI设计中色彩的作用

色彩设计是UI设计过程中的重要一环。合理的界面色彩设计能帮助用户在进行人机交互的过程中完成一定的认知任务、让用户有更好的操作体验。色彩在UI设计中的重要作用主要体现在以下几个方面：

（一）营造界面的整体风格

UI界面虽然是个复杂的视觉图形系统，但通过对页面中主色、辅色、点缀色、背景色的对比调和会呈现出明显的风格倾向，不同的配色方案可以营造出不同的界面风格，从而给用户以不同的视觉感受，最终影响用户体验。

（二）可以明确界面的整体架构

用户接触的UI界面通常是一个由页面背景色、模块背景色、图标、按钮、图片、文字等元素构成的视觉系统。对色彩的合理使用可以有效的帮助用户在较短时间内了解界面的整体架构，从而快速的捕捉想要的信息。

（三）色彩的合理应用可以使界面更有层次

UI设计的内容是有层级之分的，如一级菜单与二级菜单的从属关系，菜单与内容间的从属关系、内容与内容间的同级关系等。通过对界面构成元素的合理配色可以明确区分不同模块、不同内容的层级关系，并做到有所侧重，帮助用户理解原本复杂的页面操作间的内在联系。

（四）满足用户的个性化需求

通过对色彩的合理运用可以满足对于用户于不同时间段、不同场景中或一些特殊用户群体（如色盲色弱等）的特殊视觉需求。

二、UI设计中的色彩调和

一个UI界面的色彩一般由主色、辅色、点缀色、背景色等几部分组成。在一定的用户研究和竞品调研分析后，为使UI界面达到产品定位要求的或清新简约、或时尚酷炫、或严谨专业的视觉效果，对主色、辅色、点缀色、背景色、字体色等进行选择、调整、搭配和组合的过程就是UI设计中的色彩调和。色彩调和一般分为以色相为基础的色彩调和、以明度为基础的色彩调和、以彩度为基础的色彩调和三大类。其中以色相为基础的色彩调和又可细分为同类色配色、类似色配色、互补色配色、多色配色等；以明度为基础的色彩调和又可细分为高明度配高明度、高明度配中明度、高明度配低明度、中明度配中明度、中明度配低明度、低明度配低明度六种搭配方式；以彩度为基础的色彩调和则可细分为同一色调配色、类似色调配色、对比色调配色。

三、UI设计中的色彩情感

色彩能够引起人的联想，通过联想又能给人带来一系列的情绪感受和心理反应。所以说，UI设计中的色彩除了具备视觉效果外，还能表现一定的性格与表情，给用户不同的心理感受，最终实现UI产品与用户之间的情感互动和交流。例如暖色会使人感觉到阳光、热烈、活泼、开放、积极等，冷色则给人镇静、微弱、理智、冷静、保守等感觉，中性色给人低调、细腻、含蓄、素雅等感觉；明度越高的色彩给人感觉越柔软、越近，明度越低的色彩给人感觉越硬朗、越远等。下图是具体色相给人带来的联想和心理感受：

设计者在UI设计前应当充分研究用户群体的心理，如目标用户群体的性别、年龄阶段、教育文化背景、个性审美特征等，进而结合色彩心理学合理运用色彩情感进行设计与配色。

四、色彩在UI设计中的应用

（一）主色的选择

用户打开一个移动APP或网站之后，通常首先注意到主色，主色所传达出来的情感意味会下意识的感染用户。它可以说是UI设计作品的文化方向，在很大程度上决定着设计风格及调性，不同的主色给用户的体验也不同。因此，UI界面的主色确定要经过推敲，需要在充分考虑用户的心理需求、个人偏好、地域文化差异以及产品行业属性等因素的同时又兼顾美观性。合理的主色和统一的主色调也让品牌更具识别性，让用户记忆深刻、找到品牌的归属感，如阿里品牌的橙色、京东的大红、唯品会的玫红、腾讯的蓝色、美团的绿色等。

（二）合理配色

然而，主色虽然是决定了界面及产品气质格调的色彩，但多数情况下不会大面积的出现。一般来说，首页使用主色相对较多，二级页面、三级页面等子页面中则使用的较少，主色会以点缀色的角色出现在界面中。这样一来，辅色、点缀色的搭配也尤为重要。常见的UI界面的配色方法有：①同色系配色法，即主色、辅色、点缀色都在相同的色相上，只是饱和度不同，这种配色方法会给人统一、稳定的感受；②邻近色配色法，即选取色相环上与主色邻近的（60°范围内）几种颜色来进行搭配设计，这种配色方法和谐又富于变化，比同色系配色更具多样性；③对比色配色法，即与主色有色相对比、明度对比、饱和度对比、冷暖对比、补色对比等关系的配色方法，这种配色方法有强烈的视觉冲击力，易给人留下鲜明的、深刻的印象，但使用不当容易让人眼花缭乱、分不清主次，造成用户的视觉疲劳；④中性色配色法，即用无彩色黑、白、灰与主色进行搭配，常应用在信息量大的网站，旨在突出内容，避免不必要的色彩干扰用户提取信息；⑤渐变色配色法，这种配色方法是近两年来一个新的设计趋势，时尚而富有层次感；⑥图片选择法，即通过一些自然和人文社会的照片来提取合适的色彩，从而获得符合产品需求的配色方案；⑦问卷调查法，即设计师根据其它配色方法先提供出多个配色方案，由用户研究人员进行问卷、访谈等形式进行数据搜集，根据收集的数据进行用户需求分析，最终选择出最适合的配色方案。

（三）色彩的比重

色彩也有轻重之分，PHOTOSHOP、AI等制图软件都有去色功能，把颜色去掉之后，会看到UI界面的灰度图。一般比较深的颜色会给人感觉比较重，较浅的颜色给人感觉则比较轻。用色的时候，还要注意轻重的平衡。通常亮色较多的界面看起来轻盈、透气、明快；深色比较多的界面看起来稳重、内敛、神秘；灰色较多的界面看起来素雅、低调、压抑。一个成功的UI界面设计还要平衡好黑白灰三个层次的关系，使界面更有层次感、节奏感。

（四）色彩的情感映射

UI界面设计的色彩情感是通过界面中的色彩来激发用户的内心情感从而创造出的心理体验。因此，为了更好的用户体验，设计师需要研究和理解哪些刺激因素能够激发哪些用户特定的情感和意愿，以吸引目标用户在自己的UI设计产品中多做停留、引导用户做出对界面更深入的点击。

综上，在UI设计中，色彩是最能引起用户情绪共鸣的元素。 UI设计中如何合理的运用色彩，从而更好的传达产品所要传达的信息并成功吸引用户的注意力是每个UI设计师在设计过程中都应该重视的关键一环。

【参考文献】

[1] 李时颖 .UI设计中的色彩运用研究[J].电脑知识与技术. 2016 .（12）：193-194.

[2] 南云治嘉（日）， 黃文娟译 . 色彩战略----色彩设计的商业应用[M]. 北京 .中国青年出版社 . 2006 . 44-46.

[3] 金容淑 . 设计中的色彩心理学[M] . 北京 . 人民邮电出版社 . 2011.36-50.

[4] 张美珍. 浅析色彩在UI设计中的应用[J].设计 . 2014 . 97-98.

[5] 顾文佳. UI设计中用户交互体验的视觉思维[D].中国美术学院 . 2012 . 24.

[6] 吴赛，王欣怡等. 多媒体交互数据可视化研究[J].设计 . 2013 .102-103.

作者简介：作者简介：李梦（1991--），女，汉族，河南信阳人，美术硕士，学习单位：浙江理工大学艺术与设计学院美术专业，研究方向：绘画艺术，色彩艺术。endprint