南京

摘要：當(dāng)下社會(huì)移動(dòng)端手機(jī)應(yīng)用程序的發(fā)展越來(lái)越迅速，隨著微信和支付寶掃碼支付和各種依賴手機(jī)移動(dòng)端應(yīng)用程序娛樂(lè)和消費(fèi)習(xí)慣的普及，手機(jī)已經(jīng)成了現(xiàn)代社會(huì)當(dāng)中人們生活的必需品?，F(xiàn)今市場(chǎng)上不同品牌手機(jī)的外觀結(jié)構(gòu)設(shè)計(jì)和手機(jī)性能越來(lái)趨近相似，除了IOS和安卓?jī)纱笾髁鞑僮飨到y(tǒng)的部分功能差異區(qū)別外，在應(yīng)用程序的審美和操作體驗(yàn)上，國(guó)標(biāo)界面設(shè)計(jì)無(wú)非是首當(dāng)其沖吸引普通消費(fèi)者眼球最直觀的審美要素。在圖標(biāo)的造型和配色設(shè)計(jì)當(dāng)中，圖標(biāo)的配色設(shè)計(jì)更是最直觀讓受眾產(chǎn)生不同心理審美感受的主要因素。所以，文章就移動(dòng)端手機(jī)主題圖標(biāo)設(shè)計(jì)中的配色設(shè)計(jì)展開(kāi)分析，對(duì)比當(dāng)下不同主流品牌手機(jī)的主題圖標(biāo)配色設(shè)計(jì)作品展開(kāi)論述。

關(guān)鍵詞：圖標(biāo) 配色 設(shè)計(jì)

一、手機(jī)主題圖標(biāo)的配色設(shè)計(jì)與研究現(xiàn)狀和意義

（一）手機(jī)APP界面圖標(biāo)的重要性

圖標(biāo)就像是電影的海報(bào)，就像是書(shū)本的封面，它起著宣傳和吸引受眾注意力，傳遞和象征手機(jī)應(yīng)用功能的作用。作為一個(gè)標(biāo)簽，它存在的意義是向用戶傳遞這個(gè)應(yīng)用是什么類型，是做什么的，有什么功能。

（二）手機(jī)主題圖標(biāo)的配色設(shè)計(jì)概述

手機(jī)主題圖標(biāo)是打開(kāi)手機(jī)鎖屏后的主要桌面圖標(biāo)。手機(jī)主題圖標(biāo)作為品牌手機(jī)的第一門(mén)面，圖標(biāo)的配色調(diào)性和手機(jī)桌面的背景色調(diào)性共同構(gòu)成了這個(gè)界面的視覺(jué)效果，其視覺(jué)效果的好壞直接會(huì)影響到消費(fèi)者對(duì)于這部手機(jī)界面視覺(jué)的第一印象?！吧蕦?duì)于人的視覺(jué)感官有很大作用，有研究數(shù)據(jù)表明，人們通過(guò)眼睛對(duì)一件事物的判斷前0.03秒是最關(guān)鍵的。所以，手機(jī)主要界面的圖標(biāo)配色和背景色配色至關(guān)重要。

（三）與本選題相關(guān)的知網(wǎng)文獻(xiàn)研究現(xiàn)狀和本選題的研究意義

本文選題通過(guò)中國(guó)知網(wǎng)關(guān)鍵字檢索，共檢索出28篇和本文選題接近的文獻(xiàn)資料。其中研究PC端網(wǎng)站UI界面配色設(shè)計(jì)和多媒體課件配色設(shè)計(jì)的文章居多，研究移動(dòng)端手機(jī)主題圖標(biāo)設(shè)計(jì)相關(guān)的文章只有三篇。這三篇文章的研究側(cè)重點(diǎn)主要是從APP應(yīng)用圖標(biāo)的設(shè)計(jì)原則和APP扁平化圖標(biāo)設(shè)計(jì)風(fēng)格等大的方向去論述。然而文獻(xiàn)資料側(cè)重點(diǎn)具體從移動(dòng)端手機(jī)主題圖標(biāo)的配色方向研究論述相對(duì)較少。所以本篇論文的選題具有相當(dāng)研究?jī)r(jià)值，可以豐富和彌補(bǔ)從移動(dòng)端手機(jī)主題圖標(biāo)的配色理論與文獻(xiàn)。

目前移動(dòng)端手機(jī)主題圖標(biāo)的配色設(shè)計(jì)風(fēng)格種類多種多樣，可供購(gòu)買(mǎi)使用的手機(jī)主題圖標(biāo)不上下千套?？芍^是百家齊放萬(wàn)家爭(zhēng)鳴，滿足不同人群的各種審美需求。但是，正是因?yàn)轱L(fēng)格種類太多魚(yú)龍混雜，其中各種移動(dòng)端手機(jī)主題圖標(biāo)設(shè)計(jì)作品水平層次參差不齊。所以，本論文的選題也更有研究?jī)r(jià)值和意義。

二、不同品牌手機(jī)主題國(guó)標(biāo)界面的整體配色方案分析

目前市場(chǎng)上主流的手機(jī)品牌有：蘋(píng)果、華為、小米、三星、錘子、聯(lián)想、opp、vivo、中興……等等，這些主流品牌的手機(jī)主題圖標(biāo)和界面設(shè)計(jì)風(fēng)格主要有以下三種類型。（如圖1）是蘋(píng)果手機(jī)的核心主題圖標(biāo)啟動(dòng)界面，從圖標(biāo)和界面配色效果整體視覺(jué)上分析：第一，圖標(biāo)和界面整體視覺(jué)色彩三要素的調(diào)性統(tǒng)一。第二，圖標(biāo)整體配色方案是以檸檬黃和紫羅蘭、湖藍(lán)和土黃、粉綠和粉紅為主，視覺(jué)沖擊力最強(qiáng)得互補(bǔ)色配色方案。第三，每一頁(yè)界面配以小面積明度對(duì)比最強(qiáng)的黑白色圖標(biāo)在明度和飽和度上作為破筆來(lái)打破整體視覺(jué)效果的單調(diào)性，小面積的重顏色能讓界面的配色更有層次和節(jié)奏，讓亮顏色更亮，讓輕漸變的高級(jí)灰調(diào)性更透氣。但是，需要注意的是畫(huà)面破筆不能太多，否則會(huì)造成界面視重混亂。因?yàn)閱我粓D標(biāo)是可以移動(dòng)的，而且文件夾屬性會(huì)縮小明度對(duì)比強(qiáng)的“指南針”和“股市”圖標(biāo)在整體界面當(dāng)中的顯示比例。所以，這個(gè)問(wèn)題會(huì)在IOS高版本的系統(tǒng)界面中避免掉。第四，蘋(píng)果手機(jī)界面背景色以半透明虛化的淡藍(lán)淡紫色為主，達(dá)到在視覺(jué)效果上保持和主界面調(diào)性統(tǒng)一的同時(shí)，襯托主題圖標(biāo)的視覺(jué)效果，讓主題圖標(biāo)的重要信息既突出又統(tǒng)一。蘋(píng)果手機(jī)的主題圖標(biāo)界面配色設(shè)計(jì)堪稱完美，這也是為什么很多消費(fèi)者在購(gòu)買(mǎi)手機(jī)的時(shí)候會(huì)選擇蘋(píng)果手機(jī)的原因之一。

（如圖2）安卓系統(tǒng)的華為手機(jī)在市場(chǎng)上以其各種系列和其他品牌手機(jī)價(jià)位相等，但是性能高于其他品牌手機(jī)性能的超高性價(jià)比，和針對(duì)各種不同消費(fèi)能力群體在價(jià)位上的細(xì)分，也得到了不同購(gòu)買(mǎi)能力的買(mǎi)家青睞。華為手機(jī)主題圖標(biāo)和界面背景色整體色調(diào)統(tǒng)一，設(shè)計(jì)風(fēng)格也是統(tǒng)一在圓角矩形輪廓下的扁平化風(fēng)格。但是仔細(xì)觀察就會(huì)發(fā)現(xiàn)：第一，主題圖標(biāo)配色雖然選用了互補(bǔ)色和類比色混搭，但是單一圖標(biāo)里面缺少點(diǎn)綴色，整體圖標(biāo)界面缺少破筆，顏色調(diào)性就會(huì)顯得單調(diào)，層次感和節(jié)奏就會(huì)顯得單一缺少變化。第二，界面背景色的飽和度太高，明度太低。給人的整體視覺(jué)感受是不透氣和壓抑感。界面背景色是需要弱化來(lái)襯托圖標(biāo)的顏色從而達(dá)到讓圖標(biāo)的信息內(nèi)容傳達(dá)明確。第三，手機(jī)的屏幕和電腦相比較要小很多，所以在有限的空間里，圖標(biāo)的設(shè)計(jì)上應(yīng)該適當(dāng)縮小圖標(biāo)之間的間距讓圖標(biāo)所占的面積再大一些。這樣圖標(biāo)顏色的顯示面積比例才會(huì)更大，互補(bǔ)色和類比色的搭配視覺(jué)效果才會(huì)凸顯。

（如圖3）是市場(chǎng)上小米手機(jī)的圖標(biāo)主界面。小米手機(jī)以其個(gè)性化造型設(shè)計(jì)和親民的價(jià)位和超高性價(jià)比贏得了相當(dāng)?shù)氖袌?chǎng)占有率。小米手機(jī)的啟動(dòng)主界面圖標(biāo)整體配色設(shè)計(jì)在色調(diào)上區(qū)別于前兩者，其界面整體色調(diào)為顏色比較厚重沉穩(wěn)的暖色調(diào)。這種配色的調(diào)性更加會(huì)受到成熟穩(wěn)重的成年男性的青睞。相比較于（圖2），雖然都是扁平化風(fēng)格，但是個(gè)別圖標(biāo)中間有小面積點(diǎn)綴色，而且為了不讓圖標(biāo)整體看著單調(diào)，點(diǎn)綴色和底色的對(duì)比用了相同調(diào)性的互補(bǔ)色搭配，顏色變化和細(xì)節(jié)較多。單一圖標(biāo)的設(shè)計(jì)和圖一的圖標(biāo)設(shè)計(jì)相比較，配色細(xì)節(jié)變化還是顯得有些遜色。界面背景色的配色方案為互補(bǔ)色配色方案，明度較為重的藍(lán)色漸變底色用來(lái)襯托時(shí)間模塊，明度較為重的黃橙色漸變用來(lái)統(tǒng)一圖標(biāo)的暖色調(diào)風(fēng)格，上下兩部分接壤的中間部分用了明度較為淡化的漸變來(lái)讓顏色融合，整體上又形成互補(bǔ)色對(duì)比，讓厚重的整體風(fēng)格不失沖擊力。同時(shí)壓重了頂端的明度，讓視覺(jué)中心隨著漸變集中到下端圖標(biāo)上面，可謂是非常用心的設(shè)計(jì)。但是，整體厚重的配色方案畢竟不如圖一清爽的配色方案讓人神清氣爽心曠神怡。而且，圖標(biāo)作為手機(jī)界面當(dāng)中的最主要內(nèi)容，在扁平化風(fēng)格的大框架之下的配色方案應(yīng)該以輕漸變?yōu)榈咨?，適當(dāng)提高圖標(biāo)的明度，用點(diǎn)綴色或重顏色讓界面圖標(biāo)的整體視覺(jué)效果層次和節(jié)奏感更強(qiáng)。

三、手機(jī)主題圖標(biāo)的配色

（一）手機(jī)主題圖標(biāo)配色的發(fā)展歷程

“最早的手機(jī)屏幕很小，只有最基礎(chǔ)的黑色、白色，界面圖標(biāo)大多是線條勾勒或單色圖形，非常簡(jiǎn)潔，只表達(dá)了最基礎(chǔ)的意思，沒(méi)有過(guò)多的裝飾。（如圖4）。到了2001年，世界上第一部彩屏手機(jī)上市，雖然手機(jī)還是黑白的顏色居多，但是加入了少數(shù)的彩色點(diǎn)綴，比之前的黑白圖標(biāo)又向前邁進(jìn)了一步?！保ㄈ鐖D5）。

2007年開(kāi)始，以諾基亞為主的手機(jī)品牌開(kāi)始出現(xiàn)可更換主題的圖標(biāo)界面，手機(jī)不再是只能打電話發(fā)短信的通訊工具，人們開(kāi)始側(cè)重手機(jī)的功能性，并帶給人更好的用戶體驗(yàn)（如圖6）?！癷phone的出現(xiàn)讓人們從此進(jìn)入了全新的智能機(jī)時(shí)代，實(shí)體按鍵的取消使得圖標(biāo)更為重要。”圖標(biāo)設(shè)計(jì)已經(jīng)不局限于僅僅對(duì)于功能性的傳達(dá)，美觀性和趣味性以及設(shè)計(jì)美學(xué)是如今圖標(biāo)設(shè)計(jì)的主要目的（如圖11）。

（二）圖標(biāo)配色基本原理和圖標(biāo)調(diào)性與功能的關(guān)系

1.手機(jī)主題圖標(biāo)配色的基本原理

“光的物理性質(zhì)不僅僅是由人類對(duì)顏色的感覺(jué)所決定的，周圍的顏色也會(huì)影響到人類對(duì)顏色的感覺(jué)，一些時(shí)候人們也會(huì)將由物質(zhì)產(chǎn)生出的不同顏色的物理特性直接稱為顏色?！彼?，顏色要在對(duì)比和搭配中觀察，不同調(diào)性的顏色通過(guò)不同的組合搭配方式會(huì)產(chǎn)生千變?nèi)f化的視覺(jué)效果。

2.圖標(biāo)的顏色調(diào)性和應(yīng)用功能的聯(lián)系

在色彩心理學(xué)中，每一種顏色都有自己的心理暗示和感情傾向。亮顏色要用重顏色底色去襯托，才會(huì)變得更亮。大面積的暖色要用小面積的冷色底色襯托才會(huì)顯得曖色更暖。暖色系通常給人以活潑陽(yáng)光的感覺(jué)，所以常被用到購(gòu)物、游戲、音樂(lè)等主題圖標(biāo)的主色調(diào)配色當(dāng)中。冷色系，通常給人以冷靜清爽感，科技感和信任感。所以，冷色系通常被用到信用支付、旅游出行、學(xué)習(xí)、藥房等主題圖標(biāo)的配色主色調(diào)當(dāng)中。

為了不讓所有圖標(biāo)在一整個(gè)界面當(dāng)中看起來(lái)色相混亂或者色相沉悶，通常會(huì)用到主色、輔色、點(diǎn)綴色的組合，這三種顏色在單一圖標(biāo)和圖標(biāo)所在整體界面視覺(jué)效果上都會(huì)作相應(yīng)調(diào)整，最終實(shí)現(xiàn)一整套圖標(biāo)主題功能層級(jí)和顏色調(diào)性的統(tǒng)一。對(duì)于圖標(biāo)背景界面的配色通常會(huì)使用色彩純度較弱的或者明度較重的配色方案，來(lái)襯托主題圖標(biāo)的功能和視覺(jué)效果。

（三）手機(jī)主題圖標(biāo)具體的配色方案種類

當(dāng)下手機(jī)應(yīng)用UI設(shè)計(jì)行業(yè)里，對(duì)于手機(jī)APP界面的配色經(jīng)常會(huì)借用到風(fēng)景油畫(huà)或攝影照片的配色方案，因?yàn)楹每吹娘L(fēng)景油畫(huà)或攝影照片的色彩能讓人心里產(chǎn)生舒服和愉悅的感受，所以手機(jī)主題界面的配色規(guī)律和繪畫(huà)其實(shí)是相通的。

1.單色搭配

單色搭配是很容易被視覺(jué)感受到的。例如（如圖17）中，手機(jī)APP生日管家的圖標(biāo)設(shè)計(jì)用單一的紅色作底色，上面是簡(jiǎn)約的白色蝴蝶結(jié)，不僅突出體現(xiàn)了軟件的功能，單色的色彩搭配使用也使得界面更加簡(jiǎn)約。鏈家APP的圖標(biāo)也是采用單色搭配，設(shè)計(jì)簡(jiǎn)潔大方，主題明確。（如圖8）中這兩張圖分別以藍(lán)色和綠色作為主色。藍(lán)色象征著理性和知性，也象征著誠(chéng)實(shí)、信賴、權(quán)威和堅(jiān)定。藍(lán)色、綠色的視覺(jué)形象也能夠讓人完全放松。所以當(dāng)我們看到藍(lán)、綠這類低明度低純度的冷色系顏色時(shí)，我們的心理活動(dòng)一般會(huì)降到一個(gè)緩速階段，會(huì)使人變得冷靜。我們經(jīng)?？梢栽谝恍┲T如搜索引擎、輔助應(yīng)用軟件的圖標(biāo)設(shè)計(jì)中看到藍(lán)色、綠色的大量運(yùn)用。

2.近似色搭配

近似色是色相環(huán)當(dāng)中不同色相之間緊鄰的顏色。這種配色方案的優(yōu)點(diǎn)是色相調(diào)性相似，相互不沖突，把其中一種顏色作為主色，和它相鄰的顏色作為輔色，這種近似色的組合能使圖標(biāo)的調(diào)性和諧統(tǒng)一。例如在（如圖9）中，淘寶的手機(jī)APP圖標(biāo)和Garageband的圖標(biāo)都選擇了相鄰的黃色和橙色進(jìn)行搭配，相鄰色的組合給受眾以協(xié)調(diào)舒服的視覺(jué)審美感受。

3.互補(bǔ)色搭配

主題圖標(biāo)設(shè)計(jì)的互補(bǔ)色配色方案是指：確定圖標(biāo)主色以后，在色相環(huán)當(dāng)中選擇一百八十度角相對(duì)的顏色作為輔色搭配，點(diǎn)綴色通常用白色或者近似色。（如圖10），相機(jī)360的圖標(biāo)以檸檬黃為主色，然后紫羅蘭作為補(bǔ)色，用白色和橙色作為點(diǎn)綴色。騰訊視頻的應(yīng)用圖標(biāo)，也是運(yùn)用了藍(lán)色和橙色，形成強(qiáng)烈對(duì)比?！吧实膶?duì)比度決定色彩的強(qiáng)弱，而補(bǔ)色搭配對(duì)比是所有色彩搭配中對(duì)比度最強(qiáng)的?！?/p>

“配色與布局作為影響視覺(jué)設(shè)計(jì)效果的兩個(gè)重要因素”，使用互補(bǔ)色的搭配方案時(shí)，不能用純度太高，面積相等的互補(bǔ)色搭配，否則會(huì)引起色彩的顫動(dòng)和不穩(wěn)定性的情況，所以互補(bǔ)色搭配要用面積大小區(qū)分主色和輔色，用降低補(bǔ)色純度和增加近似色或者白色來(lái)點(diǎn)綴。色相環(huán)中補(bǔ)色的組合是視覺(jué)沖擊力最強(qiáng)也是眼睛對(duì)于顏色長(zhǎng)久凝視后自然產(chǎn)生的物理補(bǔ)色需求。所以如果想要自己的作品更引吸引人，那互補(bǔ)色搭配就是一個(gè)很好的選擇方案。

4.雙色漸變搭配

2013年時(shí)開(kāi)始盛行扁平化設(shè)計(jì)。“扁平化設(shè)計(jì)是拋棄多余的設(shè)計(jì)元素，更強(qiáng)調(diào)簡(jiǎn)潔的功能界面?！钡S著扁平化的日趨流行，它的弊端也慢慢顯現(xiàn)出來(lái)。比如，手機(jī)主題圖標(biāo)界面中圖標(biāo)的視覺(jué)信號(hào)過(guò)度弱化；圖標(biāo)信息較難拉開(kāi)層級(jí)關(guān)系；圖標(biāo)缺少獨(dú)特個(gè)性等，對(duì)用戶的視覺(jué)吸引力不夠。

要想使扁平化設(shè)計(jì)變得更加生動(dòng)，加點(diǎn)不一樣的元素，那漸變色就是一個(gè)不錯(cuò)的選擇。比如（如圖11）中的圖標(biāo)，糯米手機(jī)APP的圖標(biāo)用了黃色到玫紅色的漸變，WPS的手機(jī)APP用了橙色到紅色的漸變，使得簡(jiǎn)單的設(shè)計(jì)變得更加生動(dòng)。類似這樣，選擇色譜盤(pán)上鄰近的顏色進(jìn)行糅合，產(chǎn)生雙色漸變，這樣整體界面效果絢麗中又不浮夸，運(yùn)用得當(dāng)又能為頁(yè)面增色不少。簡(jiǎn)單、干凈的雙色漸變，賦予簡(jiǎn)單的設(shè)計(jì)活潑有趣的氣息。

5.輕量漸變搭配

與雙色漸變色相比，輕量漸變色更加柔和、減少視覺(jué)沖突。輕量漸變搭配更適合使用在需要突出產(chǎn)品意識(shí)的同時(shí)，又需要加入一些活潑的屬性。輕量漸變色彩搭配一般是選用同一顏色的三個(gè)色度內(nèi)的不同深淺的漸變過(guò)渡。這種配色方案使視覺(jué)感受更清爽活潑。例如（如圖12）的圖標(biāo)，美拍的圖標(biāo)選用橘色的漸變，F(xiàn)aceU的圖標(biāo)是選用薄荷綠作了漸變?cè)O(shè)計(jì)不僅使簡(jiǎn)單的設(shè)計(jì)看起來(lái)更有設(shè)計(jì)感，也產(chǎn)生了一種朦朧美。

6.彩色投影

彩色投影也是色彩搭配的一個(gè)視覺(jué)技巧。以往的投影多使用是灰色或者重顏色，現(xiàn)在另一種更大膽活潑的形式慢慢開(kāi)始流行，叫作“彩色投影”或者“融入式投影”。這種色彩搭配方式是讓投影的顏色隨投影源的主體色彩改變而改變。使用彩色投影或者融入式投影的好處是能將投影帶來(lái)的層次感控制在較好的弱體驗(yàn)之間，能夠讓投影的主體更好地融入到整體畫(huà)面中。例如（如圖13）中的兩個(gè)圖標(biāo)，分別用橘色和薄荷綠作主色，然后用同樣顏色的不同深淺作投影，（如圖14）中，都選用與主色相同的投影色，這樣避免了作一些亮色系搭配時(shí)，灰色投影顯臟的問(wèn)題。同時(shí)也讓界面及色彩更加突出飽滿。

結(jié)語(yǔ)

總之，在進(jìn)行移動(dòng)端主題圖標(biāo)設(shè)計(jì)的時(shí)候，要通過(guò)差異化色相和同質(zhì)化飽和度、明度的合理組合，產(chǎn)生協(xié)調(diào)舒服的審美感官體驗(yàn)。顏色搭配的好壞與否，會(huì)直接影響界面信息的準(zhǔn)確傳達(dá)，因此在移動(dòng)端界面主題圖標(biāo)設(shè)計(jì)蓬勃化發(fā)展的今天，筆者結(jié)合自己在企業(yè)和高校工作多年的經(jīng)驗(yàn)和相關(guān)理論書(shū)籍文獻(xiàn)的學(xué)習(xí)，梳理出以上個(gè)人觀點(diǎn)和看法，希望能對(duì)移動(dòng)端圖標(biāo)設(shè)計(jì)的理論建設(shè)發(fā)展貢獻(xiàn)出自己的綿薄之力。