手机UI设计中色彩的重要性及应用研究

韩晶晶+李洁

摘要：随着智能手机用户的不断增长，各种手机应用应运而生、鱼龙混杂，用户对手机应用界面的要求也越来越高，产品竞争日益激烈。优秀的应用往往在色彩的选择上更加深思熟虑，为了提升用户体验，提高手机应用的市场竞争力，指出了手机UI设计的特点，着重分析色彩在手机UI设计中的三大作用，以及应从三个方面对色彩加以合理应用。最后提出UI设计师应提升驾驭色彩的能力，通过色彩语言向用户表达情感，提高用户忠诚度。

关键词： 手机UI； 移动界面； 色彩； 设计； 应用

中图分类号：TP37 文献标识码：A 文章编号：1009-3044（2017）27-0281-02

Abstract：With the continuous growth of smart phone users， a variety of mobile phone applications came into being and quite a mixed bag， the user requirements for mobile phone application interface is also getting higher and higher， so that product competition is increasingly fierce. In order to improve the user experience and the market competitiveness of mobile phone applications， pointed out the characteristics of mobile phone UI design， focusing on three major roles of color in the mobile phone UI design， and should be from the three Aspects of the color to be a reasonable application. Finally， the UI designer should enhance the ability to control the color， through the color language to express feelings to users for improving customer loyalty.

Key words： mobile phone UI； mobile interface； color； design； application

1 概述

据工信部统计，截止到2017年2月末，我国移动互联网用户总数达到11.2亿户，使用手机上网的用户数接近10.6亿户，越来越多的智能手机用户，借助移动互联网完成工作和生活中的各项活动。随着人们工作、生活、社交的需要，各种功能的手机软件如雨后春笋般的出现，不可避免同类的软件产品也大量诞生，如购物类APP——淘宝、蘑菇街、唯品会、聚美优品、1号店等等，如此多的同类产品其竞争可想而知。那么，在内容相差不多的情况下，怎样吸引用户，提高用户的忠诚度便成为手机UI设计中亟待解决的问题。

在2015年豌豆荚设计奖的评选和内容制作过程中发现：往往设计优秀的应用，在颜色的选择上也更深思熟虑。色彩是人类感知世界最重要的手段之一，在我们的判断过程中是十分重要的信息，也最容易打动人心。好的色彩选择能够提升设计的存在感和魅力，因此在手机UI设计中如何驾驭色彩，使其成为一把利剑，是提升产品竞争力的关键。

2 手机UI设计

UI设计可以分为手机界面设计、网站设计和游戏界面设计等。手机UI设计是手机软件的界面美观、人机交互、操作逻辑的整体设计，其中界面必须基于手机的物理特性和软件的应用特性进行合理设计，手机UI设计中的美观的界面一直被业界称为产品的“脸面”，是用户最先注意到的部分。

手机UI设计具有其自身的特点，在设计工作中不容忽视，这是由手机的物理特性所决定的。第一，手机作为移动工具，其界面属于移动界面，很多情况下人们是在动态中完成操作的，要求设计一目了然；第二，手机界面尺寸小，无法显示非常全面的内容，要求首先把重要信息传递给用户。从手机用户角度出发，关心的问题是，产品画面是否制作精美，能够吸引我的眼球；界面上的所有信息，是否直观让我理解、清晰易懂；我能否快速地找到我所需要的信息。对于手机物理特性的局限性和用户所关心的问题，在UI设计中可以通过合理的运用色彩来克服和实现。

3 色彩在手机UI设计中的重要性

研究表明在被接收的视觉元素中，色彩最能引起用户的注意，对于好的手机 UI 界面设计，色彩選择显得尤为重要。色彩的重要性表现在：塑造风格、引导用户、强化记忆三个方面。

3.1 塑造风格

色彩是形成一个产品风格的必备要素之一，在设计风格表现上，颜色占据了80%以上的视觉体验，不同的颜色能引起用户心理上不同的感受。在UI设计中，色彩、文字、图形都是构成设计的基本元素，而对于手机这种具有特殊物理特性的工具，把握好色彩的运用是整个设计工作的重要环节。如淘宝、唯品会、京东这样的购物平台APP，要起到引起用户注意力、激发用户购买欲望的效果，则选择了如红色、橙色等温暖感强烈的暖色系。其中唯品会的目标用户定义为女性，选择了女性色彩极强的枚红色作为主打色调，颜色鲜艳、青春活泼，其塑造的风格是美丽、青春、时尚，这是每一位女性对自己期望的状态。色彩所塑造出来的产品风格是任何文字、图片都不足以展现的。色彩在UI设计中不仅可以突出产品的风格和主题，同时也能够美化版面，增强整个设计的美感，给用户留下深刻的印象。

3.2 引导用户

手机由于其携带便捷性，因而界面受到限制，相对较小。不能在大界面上大展拳脚，如何提升用户体验，使用户快速获取需要的信息是手机UI设计中必须考虑到的问题，而色彩的合理搭配应用能够克服这一局限性。首先，同一色调、不同明度的颜色能够由深到浅的引导用户浏览、操作界面，这是由于一般情况下，随着色彩明度的降低，用户的注意力会逐渐减弱。其次，局部与背景对比色的运用，也能够对用户起到提示作用，如深色选项与浅色背景的搭配，提示用户此选项的重要性和可操作性。最后，对多个并列功能选项使用不同色相、同一明度的颜色，能够突出这些功能的并列与同一重要性。endprint

3.3 强化记忆

人们对色彩的感知度要比对文字的感知度强，对色彩的记忆性也更强，这与人类长期的生活环境密切相关。如看到红、黄、绿三色，会联想到交通指示灯；看到红、蓝两种颜色会联想到热水、冷水或者男女洗手间等。不识字的小孩子相对于记忆热、冷两个字要比记忆红、蓝两种颜色难得多。在UI设计中，充分运用色彩强化记忆的作用，可以使品牌营销达到事半功倍的效果。唯品会的枚红色便是依据人们对颜色认识的一般规律，强化女性目标用户，强化其时尚、美丽、青春的风格特色。

4 色彩在手机UI设计中的应用

4.1 迎合目标用户

颜色是有情感的，不同的人群对颜色偏好是不一样的。在为APP设计进行配色时，需要考虑不同用户的喜好，并体会配色给用户带来的视觉感受。面向企业分析服务公司KissMeTrics的调查报告中有关于男性和女性对色彩的喜恶统计，如图1所示。从图表上看男女都喜欢绿色、蓝色，男女都讨厌橙色、褐色。不同的是男喜好黑色，女喜好紫色；男讨厌紫色，女讨厌灰色，在用色时可结合现实情况借鉴该调查结果，防止出现方向性的错误。从平时的产品体验看，在女性的颜色偏好中有着不可撼动的地位的色彩是红色，专门针对女性的APP设计，多选用了红、粉红等类似色调的颜色，如唯品会、聚美优品、闺蜜圈、美柚等众多的界面设计。

微信和QQ是两款使用量最多的产品，其目标用户非常广泛，分散在各个年龄段，不可选择某一类用户钟爱的色彩，而普遍喜爱程度较高的色彩应重点考虑。微信选择绿、黑、白三种主要颜色搭配，QQ选择浅蓝、浅灰、白三种主要颜色为默认皮肤搭配，正符合了KissMeTrics调查报告中男女都喜好绿色、蓝色的结果，大众接受度较高。另外，QQ的自由换肤功能更是进一步体现了迎合目标用户的理念，更为人性化。

4.2 符合产品卖点

不同的色彩能给用户不同的印象和感受，用户在接收不同颜色时情绪也会受到相应的影响。因此，产品在向用户传递信息、表明卖点时，色彩的选择非常关键。如针对高端产品的女性APP，此时色彩的选择便不应只满足目标用户为女性这个条件，而应结合考虑产品高端、时尚的卖点，一般选择明度低、饱和度高的冷色调为主色，深紫色、黑色、金色、咖色等都是很好的选择。而小游戏类APP希望传递给用户轻松、愉快的体验，因此会选择明度高、饱和度高的暖色调，象征轻松、活泼。

4.3 合理搭配色彩

在移动端的小尺寸手机上，杂乱无章的配色势必对用户的认知造成困难，用户会由于产生的视觉疲劳而对产品产生排斥心理，因此手机屏幕的小尺寸对界面的色彩搭配必然提出了更高的要求。在前文提到的色彩选择多为主体色，即界面的主色调，在实际的UI设计中还应确定出背景色、重点色和对比色。

背景色不可掩盖主题色，可分为无彩色和有彩色两类。无彩色是黑白灰系列，给人以干净、简洁的感觉，多适用于内容较丰富、信息量较大的界面；有彩色背景往往是为了进一步营造产品的风格，吸引用户注意，但应注意不可与主体色冲突，一般用明度和饱和度较低的颜色。重点色应选择与主体色反差较大的颜色，主要起到提示用户的作用，只占有界面的很少面积，但也有点缀、美化界面的功效。色彩的点缀在界面中形成一种紧张感，成为整体的一个着力点，加强吸引力。对比色能够使界面更具有层次感，引导用户浏览和操作。可以有两种选择，一种是与主色色相相同的颜色，通过明度和饱和度的调整，形成具有渐变对比的统一性视觉效果；另一种是与主色明度和饱和度相同的颜色，通过色相的调整，形成具有活泼感的、强调不同模块的视觉效果。

5 結束语

随着手机应用开发技术的日益成熟，UI设计中对界面色彩的驾驭能力显得更为重要，色彩运用的好坏直接关系到产品的竞争力和存亡。UI设计师应掌握色彩的应用技巧，对目标用户和产品卖点有清晰的认识，并能够转换为通过色彩语言向用户表达，设计出具有更强感染力、更好视角体验的个性化产品。

参考文献：

[1] liuyaping.APP配色[EB/OL]. https：//www.zhihu.com/question/32100418/answer/82339345.

[2] 林道贵，饶卫民. 智能手机教务学工系统APP UI设计的色彩研究[J].民营科技， 2016（9）：87-88.

[3] 黄超，谭美玲.手机 UI 界面的色彩搭配研究[J].科技创新与应用， 2016（19）：74-75.

[4] 鹰眼Eeyes. App界面设计风格[EB/OL]. http：//www.yixieshi.com/22381.html.

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