南京

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

關鍵詞：圖標 配色 設計

一、手機主題圖標的配色設計與研究現(xiàn)狀和意義

（一）手機APP界面圖標的重要性

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

（二）手機主題圖標的配色設計概述

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

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

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

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

二、不同品牌手機主題國標界面的整體配色方案分析

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

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

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

三、手機主題圖標的配色

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

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

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

（二）圖標配色基本原理和圖標調性與功能的關系

1.手機主題圖標配色的基本原理

“光的物理性質不僅僅是由人類對顏色的感覺所決定的，周圍的顏色也會影響到人類對顏色的感覺，一些時候人們也會將由物質產生出的不同顏色的物理特性直接稱為顏色。”所以，顏色要在對比和搭配中觀察，不同調性的顏色通過不同的組合搭配方式會產生千變萬化的視覺效果。

2.圖標的顏色調性和應用功能的聯(lián)系

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

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

（三）手機主題圖標具體的配色方案種類

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

1.單色搭配

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

2.近似色搭配

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

3.互補色搭配

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

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

4.雙色漸變搭配

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

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

5.輕量漸變搭配

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

6.彩色投影

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

結語

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