常用手機APP啟動圖標(biāo)的色彩復(fù)雜度分析

馬靜　干靜　周針兵

關(guān)鍵詞：啟動圖標(biāo) 色彩 圖標(biāo)復(fù)雜度 HSB 圖標(biāo)設(shè)計

中圖分類號：TP311.56 文獻標(biāo)識碼：A

文章編號：1003-0069（2022）02-0044-04

引言

隨著界面尺寸的增加及存儲容量的提升，智能手機承載的功能應(yīng)用不斷增多。移動互聯(lián)網(wǎng)行業(yè)數(shù)據(jù)研究報告顯示，2020年第二季度15至19歲網(wǎng)民群體人均手機App數(shù)量達83個，20至29歲網(wǎng)民群體人均App數(shù)量達了2個。手機應(yīng)用數(shù)量的增加，一方面可實現(xiàn)用戶多層次的需求，但另一方面也擴大了用戶點選交互的選擇范圍，致使圖標(biāo)視覺搜索效率降低。用戶在關(guān)注圖標(biāo)時，留下的第一印象就是圖標(biāo)的色彩設(shè)計。目前，與圖標(biāo)色彩因素相關(guān)的研究中，Kyungah Choi等采用圖標(biāo)矩陣分析可識別度高的色彩屬性;楊冷泠等基于色彩的誘目性理論分析應(yīng)用界面的色彩元素對視覺的引導(dǎo)作用;宮勇等研究顏色數(shù)量和顏色一致性對圖標(biāo)視覺搜索效率的影響;Ya-HsienKo研究色彩組合對品牌圖標(biāo)易讀性的影響;蔣雨妤等通過一項視覺搜索實驗考察圖標(biāo)間色相差異對兒童視覺功效的影響。針對日趨復(fù)雜的應(yīng)用環(huán)境，本文基于HSB模式量化分析手機App啟動圖標(biāo)的色彩語言，為今后啟動圖標(biāo)的色彩設(shè)計提供了理論指導(dǎo)。

一、圖標(biāo)復(fù)雜度

在圖形用戶界面中，圖標(biāo)是一種代表某種事物的符號，通過抽象的圖像語言提取代指事物的本質(zhì)特征，具有信息傳遞和引導(dǎo)操作的基礎(chǔ)功能。McDougall等人提出計算機圖標(biāo)的五個分類標(biāo)準(zhǔn)：具體性，語義距離，熟悉性，復(fù)雜性和美學(xué)吸引性。其中圖標(biāo)的復(fù)雜性與用戶感知強相關(guān)。圖標(biāo)越復(fù)雜，用戶在交互界面中就越難理解和使用，圖標(biāo)設(shè)計要盡可能降低在應(yīng)用場景中的復(fù)雜性，減少用戶在操作過程中的認知摩擦。張雄飛從三個維度對圖標(biāo)的復(fù)雜性進行判定：視覺復(fù)雜度、認知復(fù)雜度以及環(huán)境復(fù)雜度（如圖1）。視覺復(fù)雜度從整體和細節(jié)兩個視角展開，從圖標(biāo)的整體風(fēng)格來看主要包括擬物化風(fēng)格和扁平化風(fēng)格，從細節(jié)風(fēng)格來看包括顏色、造型以及元素等，目前國內(nèi)外關(guān)于圖標(biāo)細節(jié)因素已有許多實驗研究;認知復(fù)雜度劃分為先天和后天兩部分，先天是由于圖標(biāo)認知受到人種、年齡、國家以及性別等因素的限制，而后天則包括圖標(biāo)的具體性、語義距離以及使用的熟悉度;圖標(biāo)的環(huán)境復(fù)雜度從外部和內(nèi)部來分析，外部環(huán)境可能有噪聲、光照、壓力等，內(nèi)部復(fù)雜度主要源于界面的背景、布局和負荷等。本文以啟動圖標(biāo)為研究對象，探究圖標(biāo)的色彩因素與圖標(biāo)復(fù)雜度的內(nèi)在聯(lián)系。

二、啟動圖標(biāo)色彩

（一）啟動圖標(biāo)色彩的演進歷程

早期的手機界面啟動圖標(biāo)呈黑白色，隨著彩屏技術(shù)的發(fā)展，開始出現(xiàn)色彩點綴。進入21世紀(jì)后，界面啟動圖標(biāo)的視覺風(fēng)格逐漸從單一趨向豐富，擬物化圖標(biāo)和扁平化圖標(biāo)較為常見。2007年，第一代iPhone的發(fā)布向用戶展示了真實感強且具有隱喻意義的擬物化啟動圖標(biāo)設(shè)計。擬物化圖標(biāo)主要特征是模擬真實世界的裝飾效果，包括高光、陰影、漸變、材質(zhì)紋理等，實現(xiàn)高光、陰影等立體樣式，具有更豐富的視覺層次。如圖2（c）中借用指南針象征搜索引擎的功能意象。2013年，微軟的Metro系統(tǒng)圖標(biāo)大量采用鮮明色塊和二維圖案，推動扁平化風(fēng)格的應(yīng)用熱潮，帶給用戶嶄新的操作體驗，如圖2 （d）所示。扁平化圖標(biāo)的色彩鮮明，簡潔清爽，矢量化的設(shè)計能更好地適應(yīng)不同的操作系統(tǒng)，具有更強的實用性。目前，市面上的啟動圖標(biāo)設(shè)計大多沿襲扁平化的風(fēng)格，并且適當(dāng)?shù)厝谌肓私粕钆洹⒒パa色搭配、雙色漸變、輕量漸變和投影等方式來實現(xiàn)視覺上的新意。

（二）啟動圖標(biāo)色彩的認知效應(yīng)

啟動圖標(biāo)是代表系統(tǒng)應(yīng)用核心特征的一組圖標(biāo)，是打開應(yīng)用功能的第一窗口。在人機交互界面中，用戶與啟動圖標(biāo)的一般互動模式為目標(biāo)視覺搜索行為：首先，在潛意識中形成目標(biāo)圖標(biāo)的行為導(dǎo)向，查看主界面時完成視覺信息輸入、認知加工、認知決策的視覺認知流程，最終確定目標(biāo)對象并促發(fā)點擊行為（如圖3）。視覺認知流程中，降低用戶和界面圖標(biāo)之間的交互摩擦的關(guān)鍵過程在于圖標(biāo)的信息輸入。針對常見的手機應(yīng)用啟動圖標(biāo)，圖標(biāo)的基本信息已經(jīng)通過不斷的練習(xí)在大腦皮層形成視覺記憶。但實際在認知決策的過程中，用戶不僅需要提取圖標(biāo)基本信息的記憶，同時還需篩選掉其他圖標(biāo)產(chǎn)生的干擾信息，色彩是主要的視覺信息之一。

啟動圖標(biāo)的色彩認知效應(yīng)包含三個層面：色彩感知、色彩聯(lián)想與色彩象征。在色彩感知層，用戶通過感知色彩信息對圖標(biāo)辨色，形成圖標(biāo)的初期色彩記憶。色彩信息指色彩的色相、數(shù)量及色塊面積等。有研究指出高飽和、強對比的色彩能顯著提高圖標(biāo)的可識別度，與其他顏色形成較強的視覺差異，可促進用戶的識別與點擊。在色彩聯(lián)想層，色彩的冷暖感、輕重感和強弱感傳遞給用戶不同的情感聯(lián)想。例如在國內(nèi)，紅色和黃色常用于網(wǎng)絡(luò)購物模塊用于刺激人們的消費欲望（如圖4）。在色彩象征層，色彩可以作為品牌平臺文化的傳遞符號，例如國內(nèi)的愛奇藝視頻應(yīng)用，圖標(biāo)顏色對應(yīng)奇異果綠（如圖5），聯(lián)覺一致的品牌形象幫助用戶記憶與識別。

（三）啟動圖標(biāo)的色彩復(fù)雜度

1.按顏色數(shù)量分類：啟動圖標(biāo)按照色彩數(shù)量分為單色圖標(biāo)、雙色圖標(biāo)以及多色圖標(biāo)。單色圖標(biāo)和雙色圖標(biāo)主要呈現(xiàn)扁平化的設(shè)計風(fēng)格，多色圖標(biāo)既有扁平化風(fēng)格，也包括輕量立體風(fēng)格以及擬物化風(fēng)格。對單個圖標(biāo)而言，圖標(biāo)的色彩復(fù)雜度隨著顏色數(shù)量的增加而增大，如圖6所示。

2.按色彩設(shè)計形式分類：啟動圖標(biāo)按照色彩設(shè)計形式可分為純色圖標(biāo)、漸變色圖標(biāo)。對單個圖標(biāo)而言，純色圖標(biāo)的色彩復(fù)雜度較低，漸變色的色彩復(fù)雜度更高，后者會占用更多的視覺注意，產(chǎn)生一定的認知負荷，如圖了所示。

三、啟動圖標(biāo)色彩特征的研究方法

基于手機互聯(lián)網(wǎng)應(yīng)用的用戶規(guī)模和使用頻率，提取常見的手機App啟動圖標(biāo)，建立樣本圖標(biāo)庫。樣本圖標(biāo)包含兩組特征，分別為不同地域?qū)傩裕▏鴥?nèi)/國外）以及不同功能屬性（功能1/2/3/…）。選擇最接近人眼辨別的HSB色彩模式，通過色彩頻率表現(xiàn)法對樣本圖標(biāo)的色彩展開分析。色彩頻率表現(xiàn)法是根據(jù)圖形中某種色彩出現(xiàn)的頻率高低，使用餅狀圖或柱狀圖來表現(xiàn)圖形中色彩的組成與比例的方法。運用Windows平臺的色彩分析軟件Colorlmpact提取樣本圖標(biāo)的色彩以及色彩占比。最后量化分析樣本圖標(biāo)在色相、飽和度以及明度三個要素的特征值，歸納和總結(jié)在不同地域?qū)傩院筒煌δ軐傩韵碌氖謾CApp啟動圖標(biāo)的色彩特征。具體研究過程如下：

（一）樣本選擇

參考國內(nèi)外移動應(yīng)用權(quán)威數(shù)據(jù)服務(wù)平臺Talking Data網(wǎng)站和App Annie網(wǎng)站，選取2020年3月到6月網(wǎng)民常用的10個功能模塊的手機應(yīng)用，分別為即時通信、網(wǎng)絡(luò)支付、搜索引擎、網(wǎng)絡(luò)購物、網(wǎng)絡(luò)新聞、網(wǎng)絡(luò)音樂、網(wǎng)絡(luò)游戲、網(wǎng)絡(luò)文學(xué)、網(wǎng)上外賣以及在線教育。在各個功能模塊下，選用使用頻率最高的前5位作為樣本圖標(biāo)，如圖8。樣本量共計5×10×2=100個。基于120ppi高分辨屏幕設(shè)立樣本圖標(biāo)庫，圖標(biāo)大小為512×512px。

（二）色彩提取

在HSB色彩模式下，色相由0度到359度的數(shù)值表示一個色相環(huán)。孟塞爾顏色系統(tǒng)將色相環(huán)劃分為10大類，分別是紅（R）、紅黃（RY）、黃（Y）、黃綠（YG）、綠（G）、綠藍（GB）、藍（B）、藍紫（P）、紫（P）、紫紅（PR），其中0。對應(yīng)紅色色相（R）。飽和度和明度從0%到100%來進行度量，飽和度用來表示顏色的純度，0%對應(yīng)灰色;明度用來表示顏色的明暗度，0%對應(yīng)最暗的黑色。

通過Colorlmpact計算樣本圖標(biāo)的色彩數(shù)量（n），分析各個色相所占面積百分比（P）。所占面積百分比最大，且飽和度不為0%的色相為樣本圖標(biāo)主色相，主色相在色相環(huán)上的位置對應(yīng)的度數(shù)為主色相值（h）。樣本圖標(biāo)的飽和度（S）根據(jù)各個色相的飽和度值（s）與色相所占面積百分比（P）求和得來，同理可得樣本圖標(biāo)的明度（B）。樣本圖標(biāo)的色彩屬性值如表2所示。

（三）量化分析

對圖標(biāo)的色彩特征進行量化分析，分別采用獨立樣本t檢驗和單因素方差分析不同地域?qū)傩院筒煌δ軐傩缘臉颖緢D標(biāo)的色彩三要素特征。結(jié)果如下：

1.啟動圖標(biāo)色彩的色相數(shù)量及分布：分析樣本圖標(biāo)的色相數(shù)量及分布特征，結(jié)果發(fā)現(xiàn)：（1）從啟動圖標(biāo)的主色相分布情況來看，國內(nèi)和國外兩組別之間存在明顯差異。國內(nèi)的啟動圖標(biāo)色相分布相對集中（圖9），偏好紅色色相（R）、黃色色相（Y）和藍色色相（B）;而國外啟動圖標(biāo)的色相選用范圍相對更廣（圖10）。（2）國外部分功能模塊的樣本圖標(biāo)主色相具有明顯的色彩傾向性，網(wǎng)絡(luò)游戲模塊主色相多集中在藍色色相（B）和紫色色相（P），網(wǎng)絡(luò)音樂模塊和搜索引擎模塊則更集中在紅色色相（R）和紅黃色色相（RY）等暖色系。（3）從色相數(shù)量來看（圖11），國內(nèi)和國外基本呈現(xiàn)一致趨勢。38%的樣本圖標(biāo)只采用2種色相，通常以背景色與圖案色結(jié)合的方式呈現(xiàn)，如圖10所示。網(wǎng)絡(luò)購物和網(wǎng)上外賣模塊模塊常采用雙色圖標(biāo)，這可能是因為這兩者屬于消費性應(yīng)用，簡單鮮明的色彩有利于用戶的經(jīng)常使用并快速識別點擊。54%的樣本圖標(biāo)采用3～6種色相，在色彩設(shè)計形式上除了純色填充，還適當(dāng)融入了雙色漸變、輕量漸變等方式。8%的樣本圖標(biāo)均采用8種及8種以上的色相，這部分啟動圖標(biāo)基本屬于網(wǎng)絡(luò)游戲模塊，網(wǎng)絡(luò)游戲模塊常基于游戲的主題圖案行程豐富的配色。

2.啟動圖標(biāo)色彩的飽和度取值分布：分析樣本圖標(biāo)色彩的飽和度取值，結(jié)果發(fā)現(xiàn)：（1）整體而言，國內(nèi)的啟動圖標(biāo)飽和度均值55.60%（±23.911%）略高于國外52.80%（±26.036%），國內(nèi)的啟動圖標(biāo)色彩鮮艷程度更高，色調(diào)更為鮮明。（2）國外樣本圖標(biāo)的飽和度閾值比國內(nèi)更廣。國內(nèi)樣本圖標(biāo)飽和度最高的是網(wǎng)絡(luò)購物模塊68.80%（±12.478%），飽和度最低為搜索引擎模塊40.00%（±23.948%）;國外樣本圖標(biāo)飽和度最高的是網(wǎng)絡(luò)支付模塊了8.20%（±15.482%），飽和度最低的是搜索引擎模塊33.20%（±16.331%）。搜索引擎模塊的飽和度普遍偏低，在設(shè)計上多為淺色背景彩色圖案的樣式。啟動圖標(biāo)色彩飽和度的整體取值分布如圖12所示。

3.啟動圖標(biāo)色彩的明度取值分布：分析樣本圖標(biāo)色彩的明度取值，結(jié)果發(fā)現(xiàn)：（1）整體而言，多數(shù)樣本圖標(biāo)的明度值在了5%以上，適應(yīng)手機屏幕端的高亮度顯示的操作環(huán)境。國內(nèi)的啟動圖標(biāo)明度均值88.48%（±11.514%）高于國外82.42%（±20.406%）。（2）國內(nèi)不同功能模塊的樣本圖標(biāo)明度存在明顯差異，其中搜索引擎模塊明度最高，均值為98.60%（±1.140%），網(wǎng)絡(luò)游戲模塊明度最低，均值為66.08%（±11.563%）。網(wǎng)絡(luò)游戲模塊的明度值較低，這可能是因為游戲用戶多為年輕群體，對圖標(biāo)明暗閾值的視覺接受范圍更廣，且游戲模塊常采用游戲場景圖案作為圖標(biāo)設(shè)計元素，色彩數(shù)量較多，這在一定程度上讓游戲圖標(biāo)整體色彩不鮮明。（3）國外部分功能模塊的樣本圖標(biāo)明度存在較大的標(biāo)準(zhǔn)偏差，如網(wǎng)絡(luò)購物74.60%（±36.067%）和網(wǎng)絡(luò)文學(xué)83.20%（±30.434%）。相較于國內(nèi)各個功能模塊的明度取值標(biāo)準(zhǔn)差，國外的部分功能模塊下的圖標(biāo)之間的明度差異顯著。啟動圖標(biāo)色彩明度的整體取值分布如圖13所示。

四、討論

（一）啟動圖標(biāo)色彩復(fù)雜度與環(huán)境復(fù)雜度相關(guān)聯(lián)

在考慮啟動圖標(biāo)的色彩復(fù)雜度時，需要依據(jù)環(huán)境復(fù)雜度的布局、背景等因素綜合判定。例如，網(wǎng)絡(luò)游戲模塊常采用游戲圖案作為視覺元素，色彩層次豐富，色相數(shù)量較多，雖然單個圖標(biāo)的色彩復(fù)雜度較高，但在整體的圖標(biāo)環(huán)境種，網(wǎng)絡(luò)游戲模塊的色彩獨特性最高，更容易被識別。因此，當(dāng)環(huán)境布局復(fù)雜且圖標(biāo)數(shù)量繁多時，需盡量避免顏色的重復(fù)性，使用獨特的顏色有助于用戶識別目標(biāo)圖標(biāo);當(dāng)環(huán)境背景偏向淺色時，明度較暗的圖標(biāo)往往更容易被識別，同理在環(huán)境背景偏向深色時，明度較亮的圖標(biāo)更容易識別。綜合量化分析的結(jié)果，目前市場上常見的啟動圖標(biāo)在色彩設(shè)計上具有色相集中性、高飽和、高明度的特點。在同一個主界面中很可能會出現(xiàn)多個類似顏色的啟動圖標(biāo)，對用戶的視覺認知造成干擾。為了提升圖標(biāo)色彩的獨特性與合理性，圖標(biāo)設(shè)計需要結(jié)合手機市場的設(shè)計現(xiàn)狀，與應(yīng)用的功能語義、品牌文化、圖案設(shè)計等因素相關(guān)聯(lián)，突破常規(guī)的色彩使用習(xí)慣，創(chuàng)造獨特的“App形象”。

（二）啟動圖標(biāo)色彩復(fù)雜度的一致性

啟動圖標(biāo)色彩在色相數(shù)量分布、明度取值以及色彩傾向性上具有一致性。首先，國內(nèi)外啟動圖標(biāo)在色相數(shù)量的分布上呈現(xiàn)一致的趨勢，采用雙色色相的圖標(biāo)居多，圖標(biāo)的色彩設(shè)計形式主要為純色色塊，驗證了扁平化視覺風(fēng)格的流行態(tài)勢。其次，國內(nèi)外啟動圖標(biāo)的明度均值在了5%以上，使用白色作為背景色的圖標(biāo)居多，適應(yīng)于移動端高亮屏幕的使用環(huán)境。另外，部分功能模塊在色彩選用上表現(xiàn)為一致的傾向性，金融型應(yīng)用偏好使用明度值較低的冷色系，工具型應(yīng)用傾向使用淺色背景深色圖案的設(shè)計形式，娛樂型、消費型應(yīng)用傾向于使用飽和度較高的暖色系。

（三）不同認知背景下啟動圖標(biāo)色彩復(fù)雜度的相對性

啟動圖標(biāo)的色彩復(fù)雜度受到用戶先天認知特性的影響，在不同認知背景下是相對的。不同人種、年齡、性別以及國家的人群的認知習(xí)慣具有差異性。針對不同的國家，國內(nèi)更適應(yīng)于暖色系的色彩環(huán)境，對紅色、橙黃色以及黃色等色系的細膩度接受閾值更廣;而西方更關(guān)注理性視角下色彩對人的內(nèi)在本能的影響，追求色彩使用的科學(xué)性，在色相、飽和度以及明度三要素上接受閾值更廣，整體色彩應(yīng)用的細膩度更高。在色彩的生理機制上，年輕人的色彩識別閾值比老年人更廣，視覺認知的過程也更加靈敏，老年人對色彩的選用要求更高。因此.啟動圖標(biāo)的設(shè)計需結(jié)合目標(biāo)用戶的認知特性，避免隨意選用色彩。

結(jié)語

色彩是圖標(biāo)的一個重要屬性，了解現(xiàn)有圖標(biāo)的色彩特征可以為設(shè)計師提供有效的設(shè)計信息。本文選取國內(nèi)和國外不同功能模塊的100個代表性啟動圖標(biāo)，基于HSB色彩模式對啟動圖標(biāo)的色彩語言進行量化分析，初步歸納了國內(nèi)和國外樣本圖標(biāo)呈現(xiàn)的色彩應(yīng)用趨勢以及不同功能模塊之間的樣本圖標(biāo)的色彩差異性，對今后的圖標(biāo)色彩設(shè)計具有指導(dǎo)性意義。但啟動圖標(biāo)的設(shè)計不僅包括色彩要素，還有尺寸、形狀以及空間間距等要素，可在后續(xù)的研究中進行更深入更全面的探討。

2034501705290