UI設計中的色彩元素運用分析

曾原

摘 要：21世紀是科學信息數字化技術飛速發展的世紀，智能手機已經得到了廣泛的運用和普及，各手機品牌對技術的不斷研發和更新，消費者對于手機的要求也有所提高，特別是對手機的UI界面的設計的要求。對于手機的UI界面來說，色彩元素是最主要的因素。本文通過對手機UI界面設計時的色彩的搭配作用進行了簡要的介紹，然后就在手機的UI界面中如何加強色彩元素的應用提出了具體的意見和建議。

關鍵詞：UI設計；色彩元素；運用；分析

中圖分類號：J524 文獻標識碼：A 文章編號：1005-5312（2017）32-0041-01

隨著各種手機應用軟件的不斷升級和優化，色彩對于UI設計來說是相當重要的，不同色彩的合理搭配會對整個UI 的界面帶來不一樣的視覺效果，在設計UI界面時，色彩的組合不僅要有創新，還要符合產品的理念。

一、手機UI界面設計的色彩搭配分析

1.界面風格化。手機的UI界面要具有自己獨特的風格，這常常要通過色彩對其加以展示，不同的用戶對于手機的UI界面的需求也不同，不同的色彩的搭配會給用戶帶來不一樣的視覺沖擊。比如一些用于購物消費的軟件，為了激發客戶的購買欲望，對產品進行宣傳和促銷，就偏向于選用暖色和高明度的色調，使整個界面顯示出輕松明快的風格；有的音樂類的軟件，為了引起客戶對于往事的懷念，引起情感上的共鳴，因此在界面上通常采用較為懷舊的風格。

2.功能的引導性。在設計UI界面的時候，通常要用不同的色彩來指導用戶對界面進行瀏覽，了解軟件的特點和功能。在界面中，在淺色的背景上，常常用明度比較高的顏色與之相搭配，提示客戶繼續瀏覽或者點擊，此外，客戶在看到不同的色彩的時候，不同的色彩明度對他的注意力也有影響。在UI界面里，也經常會使用到相同的色相但是明度不同的顏色來指導客戶按照規定的順序進行瀏覽，要求客戶點擊的部分用高明度的色彩加以提示，在客戶操作失誤的部分，用類似灰色這樣的低明度的顏色提示客戶不能繼續或者不可以點擊。

3.信息理解力的強化。客戶在接觸一些信息量較大的軟件的時候，比如學習類和新聞類的軟件，信息的大量顯示會使他們分不清楚主次，感到十分混亂。對于這樣的界面，在處理的時候可以運用到色彩的漸變、對比和重復等方式，來達到對信息的區分、標示以及強調作用，幫助客戶快速地理清信息的主次關系，使界面保持清晰、合理的感覺，提高客服的使用感。

4.信息的記憶性加強。色彩的真正內涵并不是完全來自其自身的屬性，這與人們的生活經驗的積累密不可分。據相關的研究結果顯示，大多數人對色彩的感知度要優于對于文字的感知度，對色彩帶來的記憶性也要強一些。比如，在日常生活中，交通信號燈的顏色會用到紅、黃、綠色，用藍色和紅色來區分冷熱水的水龍頭，這些生活中隨處看見的對于色彩的利用，都源自于人們對色彩的敏感程度。我們可以在設計UI界面的時候運用到色彩的這個功能，用不同的顏色或者是用相同顏色的不同的明度來對相應的模塊進行設計，客戶就可以依據色彩的差異性來加深對模塊的功能的記憶，加快客戶對于軟件的使用。

二、手機UI界面設計的色彩應用技巧

1.顏色應用與用戶關系的應用技巧。顏色的應用要和客戶的年齡層次的不同而做出適當的調整，每個不同的年齡層次的客戶對于手機的UI界面的風格的喜好是有區別的。比如年輕女性客戶都比較喜好活潑、輕快的界面風格；男性客戶多偏向于簡潔的色彩搭配；多數老年人的視力不佳，他們偏好于顏色對比分明的UI界面。不同的顏色還會影響客戶的情緒。比如益智類的游戲要營造輕松有趣的感覺，常常使用飽和度高的色彩；理財類的軟件要給客戶一種嚴禁的感覺，通常更適合藍色等冷色調。

2.顏色應用與界面結構的應用技巧。在UI界面的設計中，主頁和引導頁的顏色的搭配極其重要，一般來說，引導頁的顏色采用三種不同的種類進行區分，一是使用單色調，二是使用臨近的顏色，三是使用對比的顏色。主頁和引導頁之間的顏色可以選用同類色系或者互補的色系，同類色系的搭配可以讓主頁和引導頁之間的色彩變現得更為和諧；互補色系可以使視覺產生跳躍感。進行背景色選擇的時，通常選擇黑白灰色系或者彩色系，黑色讓人有種神秘感，灰色和白色可以對頁面起到簡化的作用；彩色背景可以引起客戶的注意力，營造不同的風格，只是在選擇的時候要注意不要選擇飽和度和明度較高的色彩，避免和主題發生沖突。

三、結語

手機的UI界面的色彩的搭配除了要考慮美觀，還要考慮到不同客戶們群體行業和心理，以及不同的界面要通過不同的顏色的搭配來達到理想的效果，不同的顏色搭配還會影響到客戶的心情。因此，UI界面在設計時更要要求設計師加強對于色彩搭配的技巧，設計要更具人性化的特點。

參考文獻：

[1]黃超，譚美玲，柯文燕等.手機UI界面的色彩搭配研究[J].科技創新與應用，2016（19）.

[2]李時穎.UI設計中的色彩運用研究[J].電腦知識與技術，2016（31）.

[3]溫陽，田勝.淺析色彩在UI設計中的應用[J].建筑工程技術與設計，2015（25）.

[4]褚麗美.UI設計中的色彩應用研究[J].美術教育研究，2017（11）.