手機UI的色彩運用技巧

李天賜（沈陽師范大學美術與設計學院 110034）

一、研究背景

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

二、手機UI設計中通用的色彩常識

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

（一）色彩的定義

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

（二）色彩的基本屬性

1.色彩的明度

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

2.色彩的純度

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

3.色相

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

三、手機UI設計中色彩的運用技巧

（一）注重顏色與行業之間的關系

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

（二）只用一種顏色

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

（三）合理運用互補色

在手機UI設計中，使用色相環上不同色相的顏色對界面進行優化也是設計師常用的手段之一。

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

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

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

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

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

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

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

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

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

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

四、結語

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

[1]程亞鵬.設計藝術色彩學[M].北京大學出版社，2009.9.

[2]吳翔.設計形態學[M].重慶大學出版社，2008.

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

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

[5]陳根.話說手機產品設計 [M].北京，電子工業出版社2013.5.