前言：尋找寫作靈感？中文期刊網用心挑選的常用手機APP啟動圖標的色彩復雜度分析，希望能為您的閱讀和創作帶來靈感，歡迎大家閱讀并分享。
摘要：研究常用手機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個?；?20ppi高分辨屏幕設立樣本圖標庫，圖標大小為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色彩模式對啟動圖標的色彩語言進行量化分析，初步歸納了國內和國外樣本圖標呈現的色彩應用趨勢以及不同功能模塊之間的樣本圖標的色彩差異性，對今后的圖標色彩設計具有指導性意義。但啟動圖標的設計不僅包括色彩要素，還有尺寸、形狀以及空間間距等要素，可在后續的研究中進行更深入更全面的探討。
作者：馬靜 干靜 周針兵 單位：四川大學機械工程學院