手机UI的色彩运用技巧

李天赐（沈阳师范大学美术与设计学院 110034）

一、研究背景

随着各类手机应用的不断优化和升级，UI设计的美观性得到越来越高的重视，人们对UI设计色彩运用技巧研究也在不断深入，如何能在手机UI设计中灵活的使用色彩运用技巧，对界面进行合理的色彩搭配进而提高UI设计的实用性和美观性是一个非常有意义的课题。

二、手机UI设计中通用的色彩常识

想要设计出配色方案优秀的手机UI设计作品，首先要求UI设计者要有敏锐的色彩感觉，扎实的色彩运基础知识，因为手机UI设计同其他设计类行业一样都属于艺术设计领域，所以艺术设计领域内的色彩常识、配色原理同样适用于手机UI设计领域。但是因为“手机”这个载体的特殊性，我们在进行UI设计配色选择时又要具体问题，具体分析。

（一）色彩的定义

色彩按字面含义上理解可分为色和彩，所谓色是指人对进入眼睛的光并传至大脑时所产生的感觉；彩则指多色的意思，是人对光变化的理解。

（二）色彩的基本属性

1.色彩的明度

明度也叫亮度指的是色彩的明暗程度的大小，明度越大，色彩越发亮。明度越低，颜色越暗，一些大型的手机游戏，为了加游戏内容的神秘性和冒险性，界面配色主色调通常都选择黑色、褐色等明度很低的颜色。有明度差的色彩更容易调和。

2.色彩的纯度

纯度指色彩的鲜艳程度，纯度高的色彩纯，鲜亮，给人以活泼、明朗、大方特点。纯度底的色彩暗淡，纯度低的颜色通常给人以深远、稳重之感。

3.色相

色相指的是色彩的名称。这是色彩最基本的特征，是一种色彩区别于另一种色彩的最主要的因素。在UI设计中，同一色相的色彩，调整一下亮度或者纯度就会很容易搭配。

三、手机UI设计中色彩的运用技巧

（一）注重颜色与行业之间的关系

手机应用商店上数以百万计手机应用五花八门，种类繁多，分类不同的手机应用的界面设计也明显地体现了其所属行业特征。而颜色做为区分其行业特征的一个最直接因素，合理配色选择显得尤为重要。不同的颜色给人不同的感觉，营销和宣传效果也不同，在手机UI设计中，颜色的运用上，暖色调更适合营销。暖色一般应用于购物类手机应用，电子商务类手机应用，儿童类应用等，用以体现商品的琳琅满目，儿童的活泼。红色、橙色等鲜艳的颜色使用率通常很高。暖色调更能引起用户的情绪波动，激发人的购买欲望。

（二）只用一种颜色

手机UI设计有一个准则——简单。我们在进行UI设计时会遇到这样一种情况，就是觉得某个应用的界面只适合一种颜色，同一色相、不同明度和纯度的色相调和，会形成有条理的渐进，明度与纯度发生变化，弥补了相同色调的单一感；通过明度的黑白灰或者纯度不同来稍微加以区别，会形成一种微妙的韵律感。灵活运用色彩的明暗度对比，只选择一种颜色进行UI的配色是一个很实用的技巧，越简单的色彩有时越会达到意想不到的效果。

（三）合理运用互补色

在手机UI设计中，使用色相环上不同色相的颜色对界面进行优化也是设计师常用的手段之一。

互补色：在色相环的组成中，相隔180度的色彩我们称之为互补色。红与绿互补，黄与紫互补而蓝色与橙色互补。由于互补色有强烈的分离性，所以使用互补色的配色设计，可以有效加强整体配色的对比度、拉开距离感，而且能表现出特殊的视觉对比与平衡效果，使用得好能让作品令人感觉活泼、充满生命力的感受。

（四）按钮颜色的选择技巧

一套完整的手机UI设计，里面会包括几个，十

几个，甚至是几十个二级页面。而每一个页面都会有一个或者多个按钮，所以按钮颜色的选择在手机UI设计中显得至关重要。我们最常见的按钮颜色主要为红色，橙色，绿色等明度很高的颜色。

红色属于暖色，红色又代表热情、活力，红色属于暖色，我们在上文设计技巧一中提到过暖色更能激发人的购买欲望，所以很多购物类的应用的购买按钮都为红色比如天猫、京东商城的手机客户端的按钮设计。同时红色又为诱目性最高的颜色，从这一角度来讲也适合做为抢购按钮的使用颜色。

绿色有通行、安全的象征意义，所以在UI设计中，用绿色做为按钮颜色也是常见的做法。比如某些应用的下载成功按钮、程序安装按钮通常都为绿色。而橙色则会给人明快、时尚的感觉所以很UI设计中也采用橙色作为按钮的配色。

灰色一般情况下都代表“不允许、无效、禁用”的状态，所以购物类应用“已售罄”“已领完”等点击无效的按钮颜色通常为灰色。能够正常点击的按钮尽量不要使用灰色，以免对用户造成误导和困惑。

（五）背景颜色的选择技巧

UI设计中，背景颜色的选择是十分重要的，背景色做为界面中占用面积比例最多的颜色，决定着UI界面的整体色调。背景色的选择首先要遵循两个原则。一是，背景颜色的选择应该与手机应用的风格定位一致。二是背景色的选择一定不要阻碍用户对界面文字、图片等信息的浏览。

白色是永不过时背景色。购物类、新闻类、浏览器类的手机应用，信息量大、文字、图片内容繁杂，通常选择白色作为界面背景色。白色有简化，清洁页面的视觉效果，白色是中性色也是万能色，能与任何颜色进行搭配。除了白色是常用的背景色之外，铁灰色，深灰色，藏蓝色等明度很低的冷色也常被选为背景颜色使用，比如一些娱乐影音类应用常选用这类颜色作为背景色，因为灰色，藏蓝色通常给人一种神秘、高档的感受，选用这类颜色作为背景色能够使界面效果显得更加高端、大气、上档次。

四、结语

色彩是UI设计中重要的视觉语言，不同颜色的搭配，所展现的效果是不一样的。在手机UI设计中色彩的运用要达到创意独特又符合产品观念的目的， 单纯地靠色彩的机械组合很难达到。这要求设计师，必须扎实的掌握色彩方面的基础知识，注意不同颜色的相互作用关系，灵活的运用各种色彩搭配技巧，对色彩组合进行合理的配置，同时又要考虑用户心理、行业区别、品牌理念等其他因素对色彩选择的影响，综合所有因素，进行配色设计，进而达到最佳的视觉效果。色彩的灵活运用展现的不仅是界面美观的视觉效果，而是针对不用分类的应用界面能够通过色彩的搭配，表达不同的色彩意向，充分发挥不用色彩搭配的优势，使手机UI设计方案主题内容更加突出，给用户留下良好的印象。通过对色彩运用技巧的灵活运用，创作出具有更强感染力、更高的视觉体验度的个性化作品才是最终目的。

[1]程亚鹏.设计艺术色彩学[M].北京大学出版社，2009.9.

[2]吴翔.设计形态学[M].重庆大学出版社，2008.

[3]金容淑.设计中的色彩心理学[M].人民邮电出版社，2011.1.

[4]Sun I 视觉设计.配色设计法则[M].电子工业出版社，2012.11.

[5]陈根.话说手机产品设计 [M].北京，电子工业出版社2013.5.