移动端手机主题图标的配色设计

方案分析

目前市场上主流的手机品牌有：苹果、华为、小米、三星、锤子、联想、opp、vivo、中兴……等等，这些主流品牌的手机主題图标和界面设计风格主要有以下三种类型。（如图1）是苹果手机的核心主题图标启动界面，从图标和界面配色效果整体视觉上分析：第一，图标和界面整体视觉色彩三要素的调性统一。第二，图标整体配色方案是以柠檬黄和紫罗兰、湖蓝和土黄、粉绿和粉红为主，视觉冲击力最强得互补色配色方案。第三，每一页界面配以小面积明度对比最强的黑白色图标在明度和饱和度上作为破笔来打破整体视觉效果的单调性，小面积的重颜色能让界面的配色更有层次和节奏，让亮颜色更亮，让轻渐变的高级灰调性更透气。但是，需要注意的是画面破笔不能太多，否则会造成界面视重混乱。因为单一图标是可以移动的，而且文件夹属性会缩小明度对比强的“指南针”和“股市”图标在整体界面当中的显示比例。所以，这个问题会在IOS高版本的系统界面中避免掉。第四，苹果手机界面背景色以半透明虚化的淡蓝淡紫色为主，达到在视觉效果上保持和主界面调性统一的同时，衬托主题图标的视觉效果，让主题图标的重要信息既突出又统一。苹果手机的主题图标界面配色设计堪称完美，这也是为什么很多消费者在购买手机的时候会选择苹果手机的原因之一。

（如图2）安卓系统的华为手机在市场上以其各种系列和其他品牌手机价位相等，但是性能高于其他品牌手机性能的超高性价比，和针对各种不同消费能力群体在价位上的细分，也得到了不同购买能力的买家青睐。华为手机主题图标和界面背景色整体色调统一，设计风格也是统一在圆角矩形轮廓下的扁平化风格。但是仔细观察就会发现：第一，主题图标配色虽然选用了互补色和类比色混搭，但是单一图标里面缺少点缀色，整体图标界面缺少破笔，颜色调性就会显得单调，层次感和节奏就会显得单一缺少变化。第二，界面背景色的饱和度太高，明度太低。给人的整体视觉感受是不透气和压抑感。界面背景色是需要弱化来衬托图标的颜色从而达到让图标的信息内容传达明确。第三，手机的屏幕和电脑相比较要小很多，所以在有限的空间里，图标的设计上应该适当缩小图标之间的间距让图标所占的面积再大一些。这样图标颜色的显示面积比例才会更大，互补色和类比色的搭配视觉效果才会凸显。

（如图3）是市场上小米手机的图标主界面。小米手机以其个性化造型设计和亲民的价位和超高性价比赢得了相当的市场占有率。小米手机的启动主界面图标整体配色设计在色调上区别于前两者，其界面整体色调为颜色比较厚重沉稳的暖色调。这种配色的调性更加会受到成熟稳重的成年男性的青睐。相比较于（图2），虽然都是扁平化风格，但是个别图标中间有小面积点缀色，而且为了不让图标整体看着单调，点缀色和底色的对比用了相同调性的互补色搭配，颜色变化和细节较多。单一图标的设计和图一的图标设计相比较，配色细节变化还是显得有些逊色。界面背景色的配色方案为互补色配色方案，明度较为重的蓝色渐变底色用来衬托时间模块，明度较为重的黄橙色渐变用来统一图标的暖色调风格，上下两部分接壤的中间部分用了明度较为淡化的渐变来让颜色融合，整体上又形成互补色对比，让厚重的整体风格不失冲击力。同时压重了顶端的明度，让视觉中心随着渐变集中到下端图标上面，可谓是非常用心的设计。但是，整体厚重的配色方案毕竟不如图一清爽的配色方案让人神清气爽心旷神怡。而且，图标作为手机界面当中的最主要内容，在扁平化风格的大框架之下的配色方案应该以轻渐变为底色，适当提高图标的明度，用点缀色或重颜色让界面图标的整体视觉效果层次和节奏感更强。

三、手机主题图标的配色

（一）手机主题图标配色的发展历程

“最早的手机屏幕很小，只有最基础的黑色、白色，界面图标大多是线条勾勒或单色图形，非常简洁，只表达了最基础的意思，没有过多的装饰。（如图4）。到了2001年，世界上第一部彩屏手机上市，虽然手机还是黑白的颜色居多，但是加入了少数的彩色点缀，比之前的黑白图标又向前迈进了一步。”（如图5）。

2007年开始，以诺基亚为主的手机品牌开始出现可更换主题的图标界面，手机不再是只能打电话发短信的通讯工具，人们开始侧重手机的功能性，并带给人更好的用户体验（如图6）。“iphone的出现让人们从此进入了全新的智能机时代，实体按键的取消使得图标更为重要。”图标设计已经不局限于仅仅对于功能性的传达，美观性和趣味性以及设计美学是如今图标设计的主要目的（如图11）。

（二）图标配色基本原理和图标调性与功能的关系

1.手机主题图标配色的基本原理

“光的物理性质不仅仅是由人类对颜色的感觉所决定的，周围的颜色也会影响到人类对颜色的感觉，一些时候人们也会将由物质产生出的不同颜色的物理特性直接称为颜色。”所以，颜色要在对比和搭配中观察，不同调性的颜色通过不同的组合搭配方式会产生千变万化的视觉效果。

2.图标的颜色调性和应用功能的联系

在色彩心理学中，每一种颜色都有自己的心理暗示和感情倾向。亮颜色要用重颜色底色去衬托，才会变得更亮。大面积的暖色要用小面积的冷色底色衬托才会显得暧色更暖。暖色系通常给人以活泼阳光的感觉，所以常被用到购物、游戏、音乐等主题图标的主色调配色当中。冷色系，通常给人以冷静清爽感，科技感和信任感。所以，冷色系通常被用到信用支付、旅游出行、学习、药房等主题图标的配色主色调当中。

为了不让所有图标在一整个界面当中看起来色相混乱或者色相沉闷，通常会用到主色、辅色、点缀色的组合，这三种颜色在单一图标和图标所在整体界面视觉效果上都会作相应调整，最终实现一整套图标主题功能层级和颜色调性的统一。对于图标背景界面的配色通常会使用色彩纯度较弱的或者明度较重的配色方案，来衬托主题图标的功能和视觉效果。

（三）手机主题图标具体的配色方案种类

当下手机应用UI设计行业里，对于手机APP界面的配色经常会借用到风景油画或摄影照片的配色方案，因为好看的风景油画或摄影照片的色彩能让人心里产生舒服和愉悦的感受，所以手机主题界面的配色规律和绘画其实是相通的。

1.单色搭配

单色搭配是很容易被视觉感受到的。例如（如图17）中，手机APP生日管家的图标设计用单一的红色作底色，上面是简约的白色蝴蝶结，不仅突出体现了软件的功能，单色的色彩搭配使用也使得界面更加简约。链家APP的图标也是采用单色搭配，设计简洁大方，主题明确。（如图8）中这两张图分别以蓝色和绿色作为主色。蓝色象征着理性和知性，也象征着诚实、信赖、权威和坚定。蓝色、绿色的视觉形象也能够让人完全放松。所以当我们看到蓝、绿这类低明度低纯度的冷色系颜色时，我们的心理活动一般会降到一个缓速阶段，会使人变得冷静。我们经常可以在一些诸如搜索引擎、辅助应用软件的图标设计中看到蓝色、绿色的大量运用。

2.近似色搭配

近似色是色相环当中不同色相之间紧邻的颜色。这种配色方案的优点是色相调性相似，相互不冲突，把其中一种颜色作为主色，和它相邻的颜色作为辅色，这种近似色的组合能使图标的调性和谐统一。例如在（如图9）中，淘宝的手机APP图标和Garageband的图标都选择了相邻的黄色和橙色进行搭配，相邻色的组合给受众以协调舒服的视觉审美感受。

3.互补色搭配

主题图标设计的互补色配色方案是指：确定图标主色以后，在色相环当中选择一百八十度角相对的颜色作为辅色搭配，点缀色通常用白色或者近似色。（如图10），相机360的图标以柠檬黄为主色，然后紫罗兰作为补色，用白色和橙色作为点缀色。腾讯视频的应用图标，也是运用了蓝色和橙色，形成强烈对比。“色彩的对比度决定色彩的强弱，而补色搭配对比是所有色彩搭配中对比度最强的。”

“配色与布局作为影响视觉设计效果的两个重要因素”，使用互补色的搭配方案时，不能用纯度太高，面积相等的互补色搭配，否则会引起色彩的颤动和不稳定性的情况，所以互补色搭配要用面积大小区分主色和辅色，用降低补色纯度和增加近似色或者白色来点缀。色相环中补色的组合是视觉冲击力最强也是眼睛对于颜色长久凝视后自然产生的物理补色需求。所以如果想要自己的作品更引吸引人，那互补色搭配就是一个很好的选择方案。

4.双色渐变搭配

2013年时开始盛行扁平化设计。“扁平化设计是抛弃多余的设计元素，更强调简洁的功能界面。”但随着扁平化的日趋流行，它的弊端也慢慢显现出来。比如，手机主题图标界面中图标的视觉信号过度弱化；图标信息较难拉开层级关系；图标缺少独特个性等，对用户的视觉吸引力不够。

要想使扁平化设计变得更加生动，加点不一样的元素，那渐变色就是一个不错的选择。比如（如图11）中的图标，糯米手机APP的图标用了黄色到玫红色的渐变，WPS的手机APP用了橙色到红色的渐变，使得简单的设计变得更加生动。类似这样，选择色谱盘上邻近的颜色进行糅合，产生双色渐变，这样整体界面效果绚丽中又不浮夸，运用得当又能为页面增色不少。简单、干净的双色渐变，赋予简单的设计活泼有趣的气息。

5.轻量渐变搭配

与双色渐变色相比，轻量渐变色更加柔和、减少视觉冲突。轻量渐变搭配更适合使用在需要突出产品意识的同时，又需要加入一些活泼的属性。轻量渐变色彩搭配一般是选用同一颜色的三个色度内的不同深浅的渐变过渡。这种配色方案使视觉感受更清爽活泼。例如（如圖12）的图标，美拍的图标选用橘色的渐变，FaceU的图标是选用薄荷绿作了渐变设计不仅使简单的设计看起来更有设计感，也产生了一种朦胧美。

6.彩色投影

彩色投影也是色彩搭配的一个视觉技巧。以往的投影多使用是灰色或者重颜色，现在另一种更大胆活泼的形式慢慢开始流行，叫作“彩色投影”或者“融入式投影”。这种色彩搭配方式是让投影的颜色随投影源的主体色彩改变而改变。使用彩色投影或者融入式投影的好处是能将投影带来的层次感控制在较好的弱体验之间，能够让投影的主体更好地融入到整体画面中。例如（如图13）中的两个图标，分别用橘色和薄荷绿作主色，然后用同样颜色的不同深浅作投影，（如图14）中，都选用与主色相同的投影色，这样避免了作一些亮色系搭配时，灰色投影显脏的问题。同时也让界面及色彩更加突出饱满。

结语

总之，在进行移动端主题图标设计的时候，要通过差异化色相和同质化饱和度、明度的合理组合，产生协调舒服的审美感官体验。颜色搭配的好坏与否，会直接影响界面信息的准确传达，因此在移动端界面主题图标设计蓬勃化发展的今天，笔者结合自己在企业和高校工作多年的经验和相关理论书籍文献的学习，梳理出以上个人观点和看法，希望能对移动端图标设计的理论建设发展贡献出自己的绵薄之力。