手機UI的色彩運用技巧

李天賜（沈陽師范大學(xué)美術(shù)與設(shè)計學(xué)院 110034）

一、研究背景

隨著各類手機應(yīng)用的不斷優(yōu)化和升級，UI設(shè)計的美觀性得到越來越高的重視，人們對UI設(shè)計色彩運用技巧研究也在不斷深入，如何能在手機UI設(shè)計中靈活的使用色彩運用技巧，對界面進行合理的色彩搭配進而提高UI設(shè)計的實用性和美觀性是一個非常有意義的課題。

二、手機UI設(shè)計中通用的色彩常識

想要設(shè)計出配色方案優(yōu)秀的手機UI設(shè)計作品，首先要求UI設(shè)計者要有敏銳的色彩感覺，扎實的色彩運基礎(chǔ)知識，因為手機UI設(shè)計同其他設(shè)計類行業(yè)一樣都屬于藝術(shù)設(shè)計領(lǐng)域，所以藝術(shù)設(shè)計領(lǐng)域內(nèi)的色彩常識、配色原理同樣適用于手機UI設(shè)計領(lǐng)域。但是因為“手機”這個載體的特殊性，我們在進行UI設(shè)計配色選擇時又要具體問題，具體分析。

（一）色彩的定義

色彩按字面含義上理解可分為色和彩，所謂色是指人對進入眼睛的光并傳至大腦時所產(chǎn)生的感覺；彩則指多色的意思，是人對光變化的理解。

（二）色彩的基本屬性

1.色彩的明度

明度也叫亮度指的是色彩的明暗程度的大小，明度越大，色彩越發(fā)亮。明度越低，顏色越暗，一些大型的手機游戲，為了加游戲內(nèi)容的神秘性和冒險性，界面配色主色調(diào)通常都選擇黑色、褐色等明度很低的顏色。有明度差的色彩更容易調(diào)和。

2.色彩的純度

純度指色彩的鮮艷程度，純度高的色彩純，鮮亮，給人以活潑、明朗、大方特點。純度底的色彩暗淡，純度低的顏色通常給人以深遠(yuǎn)、穩(wěn)重之感。

3.色相

色相指的是色彩的名稱。這是色彩最基本的特征，是一種色彩區(qū)別于另一種色彩的最主要的因素。在UI設(shè)計中，同一色相的色彩，調(diào)整一下亮度或者純度就會很容易搭配。

三、手機UI設(shè)計中色彩的運用技巧

（一）注重顏色與行業(yè)之間的關(guān)系

手機應(yīng)用商店上數(shù)以百萬計手機應(yīng)用五花八門，種類繁多，分類不同的手機應(yīng)用的界面設(shè)計也明顯地體現(xiàn)了其所屬行業(yè)特征。而顏色做為區(qū)分其行業(yè)特征的一個最直接因素，合理配色選擇顯得尤為重要。不同的顏色給人不同的感覺，營銷和宣傳效果也不同，在手機UI設(shè)計中，顏色的運用上，暖色調(diào)更適合營銷。暖色一般應(yīng)用于購物類手機應(yīng)用，電子商務(wù)類手機應(yīng)用，兒童類應(yīng)用等，用以體現(xiàn)商品的琳瑯滿目，兒童的活潑。紅色、橙色等鮮艷的顏色使用率通常很高。暖色調(diào)更能引起用戶的情緒波動，激發(fā)人的購買欲望。

（二）只用一種顏色

手機UI設(shè)計有一個準(zhǔn)則——簡單。我們在進行UI設(shè)計時會遇到這樣一種情況，就是覺得某個應(yīng)用的界面只適合一種顏色，同一色相、不同明度和純度的色相調(diào)和，會形成有條理的漸進，明度與純度發(fā)生變化，彌補了相同色調(diào)的單一感；通過明度的黑白灰或者純度不同來稍微加以區(qū)別，會形成一種微妙的韻律感。靈活運用色彩的明暗度對比，只選擇一種顏色進行UI的配色是一個很實用的技巧，越簡單的色彩有時越會達到意想不到的效果。

（三）合理運用互補色

在手機UI設(shè)計中，使用色相環(huán)上不同色相的顏色對界面進行優(yōu)化也是設(shè)計師常用的手段之一。

互補色：在色相環(huán)的組成中，相隔180度的色彩我們稱之為互補色。紅與綠互補，黃與紫互補而藍色與橙色互補。由于互補色有強烈的分離性，所以使用互補色的配色設(shè)計，可以有效加強整體配色的對比度、拉開距離感，而且能表現(xiàn)出特殊的視覺對比與平衡效果，使用得好能讓作品令人感覺活潑、充滿生命力的感受。

（四）按鈕顏色的選擇技巧

一套完整的手機UI設(shè)計，里面會包括幾個，十

幾個，甚至是幾十個二級頁面。而每一個頁面都會有一個或者多個按鈕，所以按鈕顏色的選擇在手機UI設(shè)計中顯得至關(guān)重要。我們最常見的按鈕顏色主要為紅色，橙色，綠色等明度很高的顏色。

紅色屬于暖色，紅色又代表熱情、活力，紅色屬于暖色，我們在上文設(shè)計技巧一中提到過暖色更能激發(fā)人的購買欲望，所以很多購物類的應(yīng)用的購買按鈕都為紅色比如天貓、京東商城的手機客戶端的按鈕設(shè)計。同時紅色又為誘目性最高的顏色，從這一角度來講也適合做為搶購按鈕的使用顏色。

綠色有通行、安全的象征意義，所以在UI設(shè)計中，用綠色做為按鈕顏色也是常見的做法。比如某些應(yīng)用的下載成功按鈕、程序安裝按鈕通常都為綠色。而橙色則會給人明快、時尚的感覺所以很UI設(shè)計中也采用橙色作為按鈕的配色。

灰色一般情況下都代表“不允許、無效、禁用”的狀態(tài)，所以購物類應(yīng)用“已售罄”“已領(lǐng)完”等點擊無效的按鈕顏色通常為灰色。能夠正常點擊的按鈕盡量不要使用灰色，以免對用戶造成誤導(dǎo)和困惑。

（五）背景顏色的選擇技巧

UI設(shè)計中，背景顏色的選擇是十分重要的，背景色做為界面中占用面積比例最多的顏色，決定著UI界面的整體色調(diào)。背景色的選擇首先要遵循兩個原則。一是，背景顏色的選擇應(yīng)該與手機應(yīng)用的風(fēng)格定位一致。二是背景色的選擇一定不要阻礙用戶對界面文字、圖片等信息的瀏覽。

白色是永不過時背景色。購物類、新聞類、瀏覽器類的手機應(yīng)用，信息量大、文字、圖片內(nèi)容繁雜，通常選擇白色作為界面背景色。白色有簡化，清潔頁面的視覺效果，白色是中性色也是萬能色，能與任何顏色進行搭配。除了白色是常用的背景色之外，鐵灰色，深灰色，藏藍色等明度很低的冷色也常被選為背景顏色使用，比如一些娛樂影音類應(yīng)用常選用這類顏色作為背景色，因為灰色，藏藍色通常給人一種神秘、高檔的感受，選用這類顏色作為背景色能夠使界面效果顯得更加高端、大氣、上檔次。

四、結(jié)語

色彩是UI設(shè)計中重要的視覺語言，不同顏色的搭配，所展現(xiàn)的效果是不一樣的。在手機UI設(shè)計中色彩的運用要達到創(chuàng)意獨特又符合產(chǎn)品觀念的目的， 單純地靠色彩的機械組合很難達到。這要求設(shè)計師，必須扎實的掌握色彩方面的基礎(chǔ)知識，注意不同顏色的相互作用關(guān)系，靈活的運用各種色彩搭配技巧，對色彩組合進行合理的配置，同時又要考慮用戶心理、行業(yè)區(qū)別、品牌理念等其他因素對色彩選擇的影響，綜合所有因素，進行配色設(shè)計，進而達到最佳的視覺效果。色彩的靈活運用展現(xiàn)的不僅是界面美觀的視覺效果，而是針對不用分類的應(yīng)用界面能夠通過色彩的搭配，表達不同的色彩意向，充分發(fā)揮不用色彩搭配的優(yōu)勢，使手機UI設(shè)計方案主題內(nèi)容更加突出，給用戶留下良好的印象。通過對色彩運用技巧的靈活運用，創(chuàng)作出具有更強感染力、更高的視覺體驗度的個性化作品才是最終目的。

[1]程亞鵬.設(shè)計藝術(shù)色彩學(xué)[M].北京大學(xué)出版社，2009.9.

[2]吳翔.設(shè)計形態(tài)學(xué)[M].重慶大學(xué)出版社，2008.

[3]金容淑.設(shè)計中的色彩心理學(xué)[M].人民郵電出版社，2011.1.

[4]Sun I 視覺設(shè)計.配色設(shè)計法則[M].電子工業(yè)出版社，2012.11.

[5]陳根.話說手機產(chǎn)品設(shè)計 [M].北京，電子工業(yè)出版社2013.5.