手機UI設計中色彩的重要性及應用研究

韓晶晶+李潔

摘要：隨著智能手機用戶的不斷增長，各種手機應用應運而生、魚龍混雜，用戶對手機應用界面的要求也越來越高，產(chǎn)品競爭日益激烈。優(yōu)秀的應用往往在色彩的選擇上更加深思熟慮，為了提升用戶體驗，提高手機應用的市場競爭力，指出了手機UI設計的特點，著重分析色彩在手機UI設計中的三大作用，以及應從三個方面對色彩加以合理應用。最后提出UI設計師應提升駕馭色彩的能力，通過色彩語言向用戶表達情感，提高用戶忠誠度。

關鍵詞： 手機UI； 移動界面； 色彩； 設計； 應用

中圖分類號：TP37 文獻標識碼：A 文章編號：1009-3044（2017）27-0281-02

Abstract：With the continuous growth of smart phone users， a variety of mobile phone applications came into being and quite a mixed bag， the user requirements for mobile phone application interface is also getting higher and higher， so that product competition is increasingly fierce. In order to improve the user experience and the market competitiveness of mobile phone applications， pointed out the characteristics of mobile phone UI design， focusing on three major roles of color in the mobile phone UI design， and should be from the three Aspects of the color to be a reasonable application. Finally， the UI designer should enhance the ability to control the color， through the color language to express feelings to users for improving customer loyalty.

Key words： mobile phone UI； mobile interface； color； design； application

1 概述

據(jù)工信部統(tǒng)計，截止到2017年2月末，我國移動互聯(lián)網(wǎng)用戶總數(shù)達到11.2億戶，使用手機上網(wǎng)的用戶數(shù)接近10.6億戶，越來越多的智能手機用戶，借助移動互聯(lián)網(wǎng)完成工作和生活中的各項活動。隨著人們工作、生活、社交的需要，各種功能的手機軟件如雨后春筍般的出現(xiàn)，不可避免同類的軟件產(chǎn)品也大量誕生，如購物類APP——淘寶、蘑菇街、唯品會、聚美優(yōu)品、1號店等等，如此多的同類產(chǎn)品其競爭可想而知。那么，在內容相差不多的情況下，怎樣吸引用戶，提高用戶的忠誠度便成為手機UI設計中亟待解決的問題。

在2015年豌豆莢設計獎的評選和內容制作過程中發(fā)現(xiàn)：往往設計優(yōu)秀的應用，在顏色的選擇上也更深思熟慮。色彩是人類感知世界最重要的手段之一，在我們的判斷過程中是十分重要的信息，也最容易打動人心。好的色彩選擇能夠提升設計的存在感和魅力，因此在手機UI設計中如何駕馭色彩，使其成為一把利劍，是提升產(chǎn)品競爭力的關鍵。

2 手機UI設計

UI設計可以分為手機界面設計、網(wǎng)站設計和游戲界面設計等。手機UI設計是手機軟件的界面美觀、人機交互、操作邏輯的整體設計，其中界面必須基于手機的物理特性和軟件的應用特性進行合理設計，手機UI設計中的美觀的界面一直被業(yè)界稱為產(chǎn)品的“臉面”，是用戶最先注意到的部分。

手機UI設計具有其自身的特點，在設計工作中不容忽視，這是由手機的物理特性所決定的。第一，手機作為移動工具，其界面屬于移動界面，很多情況下人們是在動態(tài)中完成操作的，要求設計一目了然；第二，手機界面尺寸小，無法顯示非常全面的內容，要求首先把重要信息傳遞給用戶。從手機用戶角度出發(fā)，關心的問題是，產(chǎn)品畫面是否制作精美，能夠吸引我的眼球；界面上的所有信息，是否直觀讓我理解、清晰易懂；我能否快速地找到我所需要的信息。對于手機物理特性的局限性和用戶所關心的問題，在UI設計中可以通過合理的運用色彩來克服和實現(xiàn)。

3 色彩在手機UI設計中的重要性

研究表明在被接收的視覺元素中，色彩最能引起用戶的注意，對于好的手機 UI 界面設計，色彩選擇顯得尤為重要。色彩的重要性表現(xiàn)在：塑造風格、引導用戶、強化記憶三個方面。

3.1 塑造風格

色彩是形成一個產(chǎn)品風格的必備要素之一，在設計風格表現(xiàn)上，顏色占據(jù)了80%以上的視覺體驗，不同的顏色能引起用戶心理上不同的感受。在UI設計中，色彩、文字、圖形都是構成設計的基本元素，而對于手機這種具有特殊物理特性的工具，把握好色彩的運用是整個設計工作的重要環(huán)節(jié)。如淘寶、唯品會、京東這樣的購物平臺APP，要起到引起用戶注意力、激發(fā)用戶購買欲望的效果，則選擇了如紅色、橙色等溫暖感強烈的暖色系。其中唯品會的目標用戶定義為女性，選擇了女性色彩極強的枚紅色作為主打色調，顏色鮮艷、青春活潑，其塑造的風格是美麗、青春、時尚，這是每一位女性對自己期望的狀態(tài)。色彩所塑造出來的產(chǎn)品風格是任何文字、圖片都不足以展現(xiàn)的。色彩在UI設計中不僅可以突出產(chǎn)品的風格和主題，同時也能夠美化版面，增強整個設計的美感，給用戶留下深刻的印象。

3.2 引導用戶

手機由于其攜帶便捷性，因而界面受到限制，相對較小。不能在大界面上大展拳腳，如何提升用戶體驗，使用戶快速獲取需要的信息是手機UI設計中必須考慮到的問題，而色彩的合理搭配應用能夠克服這一局限性。首先，同一色調、不同明度的顏色能夠由深到淺的引導用戶瀏覽、操作界面，這是由于一般情況下，隨著色彩明度的降低，用戶的注意力會逐漸減弱。其次，局部與背景對比色的運用，也能夠對用戶起到提示作用，如深色選項與淺色背景的搭配，提示用戶此選項的重要性和可操作性。最后，對多個并列功能選項使用不同色相、同一明度的顏色，能夠突出這些功能的并列與同一重要性。endprint

3.3 強化記憶

人們對色彩的感知度要比對文字的感知度強，對色彩的記憶性也更強，這與人類長期的生活環(huán)境密切相關。如看到紅、黃、綠三色，會聯(lián)想到交通指示燈；看到紅、藍兩種顏色會聯(lián)想到熱水、冷水或者男女洗手間等。不識字的小孩子相對于記憶熱、冷兩個字要比記憶紅、藍兩種顏色難得多。在UI設計中，充分運用色彩強化記憶的作用，可以使品牌營銷達到事半功倍的效果。唯品會的枚紅色便是依據(jù)人們對顏色認識的一般規(guī)律，強化女性目標用戶，強化其時尚、美麗、青春的風格特色。

4 色彩在手機UI設計中的應用

4.1 迎合目標用戶

顏色是有情感的，不同的人群對顏色偏好是不一樣的。在為APP設計進行配色時，需要考慮不同用戶的喜好，并體會配色給用戶帶來的視覺感受。面向企業(yè)分析服務公司KissMeTrics的調查報告中有關于男性和女性對色彩的喜惡統(tǒng)計，如圖1所示。從圖表上看男女都喜歡綠色、藍色，男女都討厭橙色、褐色。不同的是男喜好黑色，女喜好紫色；男討厭紫色，女討厭灰色，在用色時可結合現(xiàn)實情況借鑒該調查結果，防止出現(xiàn)方向性的錯誤。從平時的產(chǎn)品體驗看，在女性的顏色偏好中有著不可撼動的地位的色彩是紅色，專門針對女性的APP設計，多選用了紅、粉紅等類似色調的顏色，如唯品會、聚美優(yōu)品、閨蜜圈、美柚等眾多的界面設計。

微信和QQ是兩款使用量最多的產(chǎn)品，其目標用戶非常廣泛，分散在各個年齡段，不可選擇某一類用戶鐘愛的色彩，而普遍喜愛程度較高的色彩應重點考慮。微信選擇綠、黑、白三種主要顏色搭配，QQ選擇淺藍、淺灰、白三種主要顏色為默認皮膚搭配，正符合了KissMeTrics調查報告中男女都喜好綠色、藍色的結果，大眾接受度較高。另外，QQ的自由換膚功能更是進一步體現(xiàn)了迎合目標用戶的理念，更為人性化。

4.2 符合產(chǎn)品賣點

不同的色彩能給用戶不同的印象和感受，用戶在接收不同顏色時情緒也會受到相應的影響。因此，產(chǎn)品在向用戶傳遞信息、表明賣點時，色彩的選擇非常關鍵。如針對高端產(chǎn)品的女性APP，此時色彩的選擇便不應只滿足目標用戶為女性這個條件，而應結合考慮產(chǎn)品高端、時尚的賣點，一般選擇明度低、飽和度高的冷色調為主色，深紫色、黑色、金色、咖色等都是很好的選擇。而小游戲類APP希望傳遞給用戶輕松、愉快的體驗，因此會選擇明度高、飽和度高的暖色調，象征輕松、活潑。

4.3 合理搭配色彩

在移動端的小尺寸手機上，雜亂無章的配色勢必對用戶的認知造成困難，用戶會由于產(chǎn)生的視覺疲勞而對產(chǎn)品產(chǎn)生排斥心理，因此手機屏幕的小尺寸對界面的色彩搭配必然提出了更高的要求。在前文提到的色彩選擇多為主體色，即界面的主色調，在實際的UI設計中還應確定出背景色、重點色和對比色。

背景色不可掩蓋主題色，可分為無彩色和有彩色兩類。無彩色是黑白灰系列，給人以干凈、簡潔的感覺，多適用于內容較豐富、信息量較大的界面；有彩色背景往往是為了進一步營造產(chǎn)品的風格，吸引用戶注意，但應注意不可與主體色沖突，一般用明度和飽和度較低的顏色。重點色應選擇與主體色反差較大的顏色，主要起到提示用戶的作用，只占有界面的很少面積，但也有點綴、美化界面的功效。色彩的點綴在界面中形成一種緊張感，成為整體的一個著力點，加強吸引力。對比色能夠使界面更具有層次感，引導用戶瀏覽和操作?？梢杂袃煞N選擇，一種是與主色色相相同的顏色，通過明度和飽和度的調整，形成具有漸變對比的統(tǒng)一性視覺效果；另一種是與主色明度和飽和度相同的顏色，通過色相的調整，形成具有活潑感的、強調不同模塊的視覺效果。

5 結束語

隨著手機應用開發(fā)技術的日益成熟，UI設計中對界面色彩的駕馭能力顯得更為重要，色彩運用的好壞直接關系到產(chǎn)品的競爭力和存亡。UI設計師應掌握色彩的應用技巧，對目標用戶和產(chǎn)品賣點有清晰的認識，并能夠轉換為通過色彩語言向用戶表達，設計出具有更強感染力、更好視角體驗的個性化產(chǎn)品。

參考文獻：

[1] liuyaping.APP配色[EB/OL]. https：//www.zhihu.com/question/32100418/answer/82339345.

[2] 林道貴，饒衛(wèi)民. 智能手機教務學工系統(tǒng)APP UI設計的色彩研究[J].民營科技， 2016（9）：87-88.

[3] 黃超，譚美玲.手機 UI 界面的色彩搭配研究[J].科技創(chuàng)新與應用， 2016（19）：74-75.

[4] 鷹眼Eeyes. App界面設計風格[EB/OL]. http：//www.yixieshi.com/22381.html.

[5] 李時穎. UI設計中的色彩運用研究[J].電腦知識與技術， 2016， 12（31）：193-194.endprint