摘要：研究常用手机App启动图标的色彩复杂度特征。遴选国内和国外100个常用App的启动图标为样本，基于HSB色彩模式分析样本图标的色相数量及各个色相的面积占比，可视化呈现样本图标的色相分布，比较国内外不同功能模块下样本图标的色相、饱和度以及明度的特征差异。国内的样本图标多集中在红、黄、蓝三色相，国外使用色相较多且相对均衡;启动图标需降低颜色使用的重复性，并参考目标用户的认知习惯来进行色彩设计。
关键词：启动图标；色彩；图标复杂度；HSB；图标设计
引言
随着界面尺寸的增加及存储容量的提升，智能手机承载的功能应用不断增多。移动互联网行业数据研究报告显示，2020年第二季度15至19岁网民群体人均手机App数量达83个，20至29岁网民群体人均App数量达72个[1]。手机应用数量的增加，一方面可实现用户多层次的需求，但另一方面也扩大了用户点选交互的选择范围，致使图标视觉搜索效率降低。用户在关注图标时，留下的第一印象就是图标的色彩设计[2]。目前，与图标色彩因素相关的研究中，KyungahChoi等[3]采用图标矩阵分析可识别度高的色彩属性;杨冷泠等[4]基于色彩的诱目性理论分析应用界面的色彩元素对视觉的引导作用;宫勇等[5]研究颜色数量和颜色一致性对图标视觉搜索效率的影响;Ya-HsienKo[6]研究色彩组合对品牌图标易读性的影响;蒋雨妤等[7]通过一项视觉搜索实验考察图标间色相差异对儿童视觉功效的影响。针对日趋复杂的应用环境，本文基于HSB模式量化分析手机App启动图标的色彩语言，为今后启动图标的色彩设计提供了理论指导。
一、图标复杂度
在图形用户界面中，图标是一种代表某种事物的符号，通过抽象的图像语言提取代指事物的本质特征，具有信息传递和引导操作的基础功能。McDougall等人提出计算机图标的五个分类标准：具体性，语义距离，熟悉性，复杂性和美学吸引性[8]。其中图标的复杂性与用户感知强相关。图标越复杂，用户在交互界面中就越难理解和使用，图标设计要尽可能降低在应用场景中的复杂性，减少用户在操作过程中的认知摩擦。张雄飞[9]从三个维度对图标的复杂性进行判定：视觉复杂度、认知复杂度以及环境复杂度（如图1）。视觉复杂度从整体和细节两个视角展开，从图标的整体风格来看主要包括拟物化风格和扁平化风格，从细节风格来看包括颜色、造型以及元素等，目前国内外关于图标细节因素已有许多实验研究;认知复杂度划分为先天和后天两部分，先天是由于图标认知受到人种、年龄、国家以及性别等因素的限制，而后天则包括图标的具体性、语义距离以及使用的熟悉度;图标的环境复杂度从外部和内部来分析，外部环境可能有噪声、光照、压力等，内部复杂度主要源于界面的背景、布局和负荷等。本文以启动图标为研究对象，探究图标的色彩因素与图标复杂度的内在联系。
二、启动图标色彩
（一）启动图标色彩的演进历程
早期的手机界面启动图标呈黑白色，随着彩屏技术的发展，开始出现色彩点缀。进入21世纪后，界面启动图标的视觉风格逐渐从单一趋向丰富，拟物化图标和扁平化图标较为常见。2007年，第一代iPhone的向用户展示了真实感强且具有隐喻意义的拟物化启动图标设计。拟物化图标主要特征是模拟真实世界的装饰效果，包括高光、阴影、渐变、材质纹理等[10]，实现高光、阴影等立体样式，具有更丰富的视觉层次。如图2（c）中借用指南针象征搜索引擎的功能意象。2013年，微软的Metro系统图标大量采用鲜明色块和二维图案，推动扁平化风格的应用热潮，带给用户崭新的操作体验，如图2（d）所示。扁平化图标的色彩鲜明，简洁清爽，矢量化的设计能更好地适应不同的操作系统，具有更强的实用性。目前，市面上的启动图标设计大多沿袭扁平化的风格，并且适当地融入了近似色搭配、互补色搭配、双色渐变、轻量渐变和投影等方式来实现视觉上的新意。
（二）启动图标色彩的认知效应
启动图标是代表系统应用核心特征的一组图标，是打开应用功能的第一窗口。在人机交互界面中，用户与启动图标的一般互动模式为目标视觉搜索行为：首先，在潜意识中形成目标图标的行为导向，查看主界面时完成视觉信息输入、认知加工、认知决策的视觉认知流程，最终确定目标对象并促发点击行为（如图3）。视觉认知流程中，降低用户和界面图标之间的交互摩擦的关键过程在于图标的信息输入。针对常见的手机应用启动图标，图标的基本信息已经通过不断的练习在大脑皮层形成视觉记忆。但实际在认知决策的过程中，用户不仅需要提取图标基本信息的记忆，同时还需筛选掉其他图标产生的干扰信息，色彩是主要的视觉信息之一。启动图标的色彩认知效应包含三个层面：色彩感知、色彩联想与色彩象征。在色彩感知层，用户通过感知色彩信息对图标辨色，形成图标的初期色彩记忆。色彩信息指色彩的色相、数量及色块面积等。有研究指出高饱和、强对比的色彩能显著提高图标的可识别度[3]，与其他颜色形成较强的视觉差异，可促进用户的识别与点击。在色彩联想层，色彩的冷暖感、轻重感和强弱感传递给用户不同的情感联想。例如在国内，红色和黄色常用于网络购物模块用于刺激人们的消费欲望（如图4）。在色彩象征层，色彩可以作为品牌平台文化的传递符号，例如国内的爱奇艺视频应用，图标颜色对应奇异果绿（如图5），联觉一致的品牌形象帮助用户记忆与识别。（三）启动图标的色彩复杂度1.按颜色数量分类：启动图标按照色彩数量分为单色图标、双色图标以及多色图标。单色图标和双色图标主要呈现扁平化的设计风格，多色图标既有扁平化风格，也包括轻量立体风格以及拟物化风格。对单个图标而言，图标的色彩复杂度随着颜色数量的增加而增大，如图6所示。2.按色彩设计形式分类：启动图标按照色彩设计形式可分为纯色图标、渐变色图标。对单个图标而言，纯色图标的色彩复杂度较低，渐变色的色彩复杂度更高，后者会占用更多的视觉注意，产生一定的认知负荷，如图7所示。
三、启动图标色彩特征的研究方法
基于手机互联网应用的用户规模和使用频率，提取常见的手机App启动图标，建立样本图标库。样本图标包含两组特征，分别为不同地域属性（国内/国外）以及不同功能属性（功能1/2/3/…）。选择最接近人眼辨别的HSB色彩模式，通过色彩频率表现法对样本图标的色彩展开分析。色彩频率表现法是根据图形中某种色彩出现的频率高低，使用饼状图或柱状图来表现图形中色彩的组成与比例的方法[11]。运用Windows平台的色彩分析软件ColorImpact提取样本图标的色彩以及色彩占比。最后量化分析样本图标在色相、饱和度以及明度三个要素的特征值，归纳和总结在不同地域属性和不同功能属性下的手机App启动图标的色彩特征。具体研究过程如下：
（一）样本选择
参考国内外移动应用权威数据服务平台TalkingData网站和AppAnnie网站，选取2020年3月到6月网民常用的10个功能模块的手机应用，分别为即时通信、网络支付、搜索引擎、网络购物、网络新闻、网络音乐、网络游戏、网络文学、网上外卖以及在线教育[1]。在各个功能模块下，选用使用频率最高的前5位作为样本图标，如图8。样本量共计5×10×2=100个。基于120ppi高分辨屏幕设立样本图标库，图标大小为512×512px。
（二）色彩提取
在HSB色彩模式下，色相由0度到359度的数值表示一个色相环。孟塞尔颜色系统将色相环划分为10大类，分别是红（R）、红黄（RY）、黄（Y）、黄绿（YG）、绿（G）、绿蓝（GB）、蓝（B）、蓝紫（P）、紫（P）、紫红（PR）[12]，其中0°对应红色色相（R）。饱和度和明度从0%到100%来进行度量，饱和度用来表示颜色的纯度，0%对应灰色;明度用来表示颜色的明暗度，0%对应最暗的黑色。通过ColorImpact计算样本图标的色彩数量（n），分析各个色相所占面积百分比（Ρ）。所占面积百分比最大，且饱和度不为0%的色相为样本图标主色相，主色相在色相环上的位置对应的度数为主色相值（h）。样本图标的饱和度（S）根据各个色相的饱和度值（s）与色相所占面积百分比（Ρ）求和得来，同理可得样本图标的明度（B）。样本图标的色彩属性值如表2所示。对图标的色彩特征进行量化分析，分别采用独立样本t检验和单因素方差分析不同地域属性和不同功能属性的样本图标的色彩三要素特征。结果如下：1.启动图标色彩的色相数量及分布：分析样本图标的色相数量及分布特征，结果发现：（1）从启动图标的主色相分布情况来看，国内和国外两组别之间存在明显差异。国内的启动图标色相分布相对集中（图9），偏好红色色相（R）、黄色色相（Y）和蓝色色相（B）;而国外启动图标的色相选用范围相对更广（图10）。（2）国外部分功能模块的样本图标主色相具有明显的色彩倾向性，网络游戏模块主色相多集中在蓝色色相（B）和紫色色相（P），网络音乐模块和搜索引擎模块则更集中在红色色相（R）和红黄色色相（RY）等暖色系。（3）从色相数量来看（图11），国内和国外基本呈现一致趋势。38%的样本图标只采用2种色相，通常以背景色与图案色结合的方式呈现，如图10所示。网络购物和网上外卖模块模块常采用双色图标，这可能是因为这两者属于消费性应用，简单鲜明的色彩有利于用户的经常使用并快速识别点击。54%的样本图标采用3~6种色相，在色彩设计形式上除了纯色填充，还适当融入了双色渐变、轻量渐变等方式。8%的样本图标均采用8种及8种以上的色相，这部分启动图标基本属于网络游戏模块，网络游戏模块常基于游戏的主题图案行程丰富的配色。2.启动图标色彩的饱和度取值分布：分析样本图标色彩的饱和度取值，结果发现：（1）整体而言，国内的启动图标饱和度均值55.60%（±23.911%）略高于国外52.80%（±26.036%），国内的启动图标色彩鲜艳程度更高，色调更为鲜明。（2）国外样本图标的饱和度阈值比国内更广。国内样本图标饱和度最高的是网络购物模块68.80%（±12.478%），饱和度最低为搜索引擎模块40.00%（±23.948%）;国外样本图标饱和度最高的是网络支付模块78.20%（±15.482%），饱和度最低的是搜索引擎模块33.20%（±16.331%）。搜索引擎模块的饱和度普遍偏低，在设计上多为浅色背景彩色图案的样式。启动图标色彩饱和度的整体取值分布如图12所示。3.启动图标色彩的明度取值分布：分析样本图标色彩的明度取值，结果发现：（1）整体而言，多数样本图标的明度值在75%以上，适应手机屏幕端的高亮度显示的操作环境。国内的启动图标明度均值88.48%（±11.514%）高于国外82.42%（±20.406%）。（2）国内不同功能模块的样本图标明度存在明显差异，其中搜索引擎模块明度最高，均值为98.60%（±1.140%），网络游戏模块明度最低，均值为66.08%（±11.563%）。网络游戏模块的明度值较低，这可能是因为游戏用户多为年轻群体，对图标明暗阈值的视觉接受范围更广，且游戏模块常采用游戏场景图案作为图标设计元素，色彩数量较多，这在一定程度上让游戏图标整体色彩不鲜明。（3）国外部分功能模块的样本图标明度存在较大的标准偏差，如网络购物74.60%（±36.067%）和网络文学83.20%（±30.434%）。相较于国内各个功能模块的明度取值标准差，国外的部分功能模块下的图标之间的明度差异显著。启动图标色彩明度的整体取值分布如图13所示。
四、讨论
（一）启动图标色彩复杂度与环境复杂度相关联
在考虑启动图标的色彩复杂度时，需要依据环境复杂度的布局、背景等因素综合判定。例如，网络游戏模块常采用游戏图案作为视觉元素，色彩层次丰富，色相数量较多，虽然单个图标的色彩复杂度较高，但在整体的图标环境种，网络游戏模块的色彩独特性最高，更容易被识别。因此，当环境布局复杂且图标数量繁多时，需尽量避免颜色的重复性，使用独特的颜色有助于用户识别目标图标;当环境背景偏向浅色时，明度较暗的图标往往更容易被识别，同理在环境背景偏向深色时，明度较亮的图标更容易识别。综合量化分析的结果，目前市场上常见的启动图标在色彩设计上具有色相集中性、高饱和、高明度的特点。在同一个主界面中很可能会出现多个类似颜色的启动图标，对用户的视觉认知造成干扰。为了提升图标色彩的独特性与合理性，图标设计需要结合手机市场的设计现状，与应用的功能语义、品牌文化、图案设计等因素相关联，突破常规的色彩使用习惯，创造独特的“App形象”。
（二）启动图标色彩复杂度的一致性
启动图标色彩在色相数量分布、明度取值以及色彩倾向性上具有一致性。首先，国内外启动图标在色相数量的分布上呈现一致的趋势，采用双色色相的图标居多，图标的色彩设计形式主要为纯色色块，验证了扁平化视觉风格的流行态势。其次，国内外启动图标的明度均值在75%以上，使用白色作为背景色的图标居多，适应于移动端高亮屏幕的使用环境。另外，部分功能模块在色彩选用上表现为一致的倾向性，金融型应用偏好使用明度值较低的冷色系，工具型应用倾向使用浅色背景深色图案的设计形式，娱乐型、消费型应用倾向于使用饱和度较高的暖色系。
（三）不同认知背景下启动图标色彩复杂度的相对性
启动图标的色彩复杂度受到用户先天认知特性的影响，在不同认知背景下是相对的。不同人种、年龄、性别以及国家的人群的认知习惯具有差异性。针对不同的国家，国内更适应于暖色系的色彩环境，对红色、橙黄色以及黄色等色系的细腻度接受阈值更广;而西方更关注理性视角下色彩对人的内在本能的影响，追求色彩使用的科学性，在色相、饱和度以及明度三要素上接受阈值更广，整体色彩应用的细腻度更高。在色彩的生理机制上，年轻人的色彩识别阈值比老年人更广，视觉认知的过程也更加灵敏，老年人对色彩的选用要求更高。因此，启动图标的设计需结合目标用户的认知特性，避免随意选用色彩。
结语
色彩是图标的一个重要属性，了解现有图标的色彩特征可以为设计师提供有效的设计信息。本文选取国内和国外不同功能模块的100个代表性启动图标，基于HSB色彩模式对启动图标的色彩语言进行量化分析，初步归纳了国内和国外样本图标呈现的色彩应用趋势以及不同功能模块之间的样本图标的色彩差异性，对今后的图标色彩设计具有指导性意义。但启动图标的设计不仅包括色彩要素，还有尺寸、形状以及空间间距等要素，可在后续的研究中进行更深入更全面的探讨。
作者：马静 干静 周针兵 单位：四川大学机械工程学院