移動端手機(jī)主題圖標(biāo)的配色設(shè)計

南京

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1.單色搭配

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

2.近似色搭配

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

3.互補(bǔ)色搭配

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

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

4.雙色漸變搭配

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

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

5.輕量漸變搭配

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

6.彩色投影

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

結(jié)語

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