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

admin管理员组

文章数量:1532351

2024年5月18日发(作者：)

龙源期刊网

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

作者：南京

来源：《设计》2018年第15期

摘要：当下社会移动端手机应用程序的发展越来越迅速，随着微信和支付宝扫码支付和各

种依赖手机移动端应用程序娱乐和消费习惯的普及，手机已经成了现代社会当中人们生活的必

需品。现今市场上不同品牌手机的外观结构设计和手机性能越来趋近相似，除了IOS和安卓两

大主流操作系统的部分功能差异区别外，在应用程序的审美和操作体验上，国标界面设计无非

是首当其冲吸引普通消费者眼球最直观的审美要素。在图标的造型和配色设计当中，图标的配

色设计更是最直观让受众产生不同心理审美感受的主要因素。所以，文章就移动端手机主题图

标设计中的配色设计展开分析，对比当下不同主流品牌手机的主题图标配色设计作品展开论

述。

关键词：图标 配色 设计

一、手机主题图标的配色设计与研究现状和意义

（一）手机APP界面图标的重要性

图标就像是电影的海报，就像是书本的封面，它起着宣传和吸引受众注意力，传递和象征

手机应用功能的作用。作为一个标签，它存在的意义是向用户传递这个应用是什么类型，是做

什么的，有什么功能。

（二）手机主题图标的配色设计概述

手机主题图标是打开手机锁屏后的主要桌面图标。手机主题图标作为品牌手机的第一门

面，图标的配色调性和手机桌面的背景色调性共同构成了这个界面的视觉效果，其视觉效果的

好坏直接会影响到消费者对于这部手机界面视觉的第一印象。“色彩对于人的视觉感官有很大

作用，有研究数据表明，人们通过眼睛对一件事物的判断前0.03秒是最关键的。所以，手机

主要界面的图标配色和背景色配色至关重要。

（三）与本选题相关的知网文献研究现状和本选题的研究意义

本文选题通过中国知网关键字检索，共检索出28篇和本文选题接近的文献资料。其中研

究PC端网站UI界面配色设计和多媒体课件配色设计的文章居多，研究移动端手机主题图标

设计相关的文章只有三篇。这三篇文章的研究侧重点主要是从APP应用图标的设计原则和

APP扁平化图标设计风格等大的方向去论述。然而文献资料侧重点具体从移动端手机主题图标

的配色方向研究论述相对较少。所以本篇论文的选题具有相当研究价值，可以丰富和弥补从移

动端手机主题图标的配色理论与文献。

龙源期刊网

目前移动端手机主题图标的配色设计风格种类多种多样，可供购买使用的手机主题图标不

上下千套。可谓是百家齐放万家争鸣，满足不同人群的各种审美需求。但是，正是因为风格种

类太多鱼龙混杂，其中各种移动端手机主题图标设计作品水平层次参差不齐。所以，本论文的

选题也更有研究价值和意义。

二、不同品牌手机主题国标界面的整体配色方案分析

目前市场上主流的手机品牌有：苹果、华为、小米、三星、锤子、联想、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）中，都选用与主色相同的投影色，这样避免了作一些亮色系搭配时，灰色投

影显脏的问题。同时也让界面及色彩更加突出饱满。

结语

总之，在进行移动端主题图标设计的时候，要通过差异化色相和同质化饱和度、明度的合

理组合，产生协调舒服的审美感官体验。颜色搭配的好坏与否，会直接影响界面信息的准确传

达，因此在移动端界面主题图标设计蓬勃化发展的今天，笔者结合自己在企业和高校工作多年

的经验和相关理论书籍文献的学习，梳理出以上个人观点和看法，希望能对移动端图标设计的

理论建设发展贡献出自己的绵薄之力。

龙源期刊网

本文标签： 图标手机配色设计