淺析移動應用UI設計中色彩的使用

(北京印刷學院新媒體學院 北京 102600)

淺析移動應用UI設計中色彩的使用

趙鵬程

(北京印刷學院新媒體學院北京102600)

在任何一UI(即User Interface用戶界面)中，界面美觀設計中的色彩設計，也是諸多設計元素之一。好的色彩設計會使UI的人機交互、操作邏輯、界面美觀的整體設計更加出彩，同時也有利于得到更多用戶的青睞。通過研究色彩的基本原理與知識、色彩心理學，配色的基本方法與原則，以及設計中的色彩管理問題，分析得出了，如何搭配色彩才會使得UI設計更加貼切主題，光彩奪目，使用戶樂于接受并使用。

UI設計；色彩基礎；色彩設計；配色

一、引言

隨著科技的進步，計算機與各移動終端軟件的發展，各軟件產品在市場中激烈競爭。UI設計越來越受到人們的重視。好的UI設計不僅是讓軟件變得有個性有品位，還要讓軟件的操作變得舒適簡單、自由，充分體現軟件的定位和特點。如何才能使UI設計給用戶舒適簡單、自由的感覺，并快速讓用戶了解產品的定位和特點？UI的色彩設計就是諸多設計元素中不可缺少的。本文將以色彩的基礎知識為核心，探討如何為UI進行色彩設計。

二、淺談UI與UI設計

UI即User Interface(用戶界面)的簡稱。UI設計則是指對軟件的人機交互、操作邏輯、界面美觀的整體設計。好的UI設計不僅是讓軟件變得有個性有品味，還要讓軟件的操作變得舒適、簡單、自由、充分體現軟件的定位和特點。在人和機器的互動過程中，有一個層面，即我們所說的界面。從心理學意義來分，界面可分為感覺(視覺、觸覺、聽覺等)和情感兩個層次。用戶界面設計是屏幕產品的重要組成部分。用戶界面設計的三大原則是：置界面于用戶的控制之下；減少用戶的記憶負擔；保持界面的一致性。

三、色彩的基礎知識

色彩是通過眼睛內的感光細胞、大腦和我們的生活經驗所產生的一種對光的視覺效應。有時人們也將物質產生不同顏色的物理特性直接稱為顏色。因此，色彩應是可見光的作用所導致的視覺現象，可見光刺激眼睛后可引起視覺反應，使人感覺到色彩和知覺空間環境。人對色彩的感覺不僅僅由光的物理性質所決定，往往受到周圍其他因素的影響。在設計里我們通常用到HSB，即色相H、飽和度/純度S、明度B。那么到底什么是HSB呢？

色相H，指色彩的相貌和特征。紅、橙、黃、綠、青、藍、紫等等顏色的種類變化就叫色相。事實上任何黑白灰以外的顏色都有色相的屬性，黑、白、灰稱為無彩色，常用作背景色。而色相也就是由原色、間色和復色來構成的。三原色：紅黃藍；三間色：橙綠紫；復合色：紅橙、黃橙、黃綠、藍綠、藍紫、紫紅。色相是傳遞情感很重要的部分，譬如紅色，它可能會給人熱、停止、侵略、錯誤、警告、火、勇氣、太陽、火焰、熱血、花卉、溫暖、興奮、活潑、熱情、積極、希望、忠誠、健康、充實、飽滿、幸福、原始、暴力、危險、卑俗、爽快、名譽、攻擊等這些感覺，當然在UI設計中，紅色往往表達出一種專業、自信和權威感，所以也常用于金融理財、股票等嚴肅正式的設計上。

四、配色

配色分為兩色、三色和多色配色。

兩色搭配是用色的基礎，在兩色搭配中，黑、白、灰常被忽略。其中包括相鄰兩色搭配，即在紅、橙、黃、綠、藍、紫、品紅中，每相鄰兩色的搭配，相鄰兩色的搭配讓界面和諧而統一，更有整體感。但通常，一種顏色純度較高時，另一種顏色選擇純度低或明度低的，調整色彩之間的主次關系，使搭配效果和諧。選定同一色相，調整明度和純度值，兩色進行搭配。還有間隔兩色搭配，即在紅、橙、黃、綠、藍、紫、品紅中，每間隔一個顏色的搭配。這樣的搭配有節奏，沒有很融合，也沒有對比很強烈。最后一種兩色搭配是對比兩色搭配，即紅與綠，橙與藍，黃與紫，對比兩色搭配會使界面激烈而穩定。

在色彩設計中，一般顏色搭配不要超過三色，所以三色搭配是較常見的色彩搭配。譬如，相鄰色系三色搭配。即在12色相環上，相鄰同色系的三色組合搭配。這樣的搭配效果感覺柔和、和諧、雅致、文靜，但也感覺單調、模糊、乏味、無力，可以通過調節明度差來加強效果。還有等距三色組合，即在12色相環上，角度為120°的三色組合。效果強烈、醒目、有力、活潑、豐富，但也不易統一而感雜亂、刺激、造成視覺疲勞，可以通過對明度、飽和度的調節來緩和鮮明的色彩。還有互補取色組合，即從色相環選取一個顏色，再找到對比色，再選擇對比色的左右相鄰兩色。互補取色組合的特點是可以柔化太強烈的對比效果。

最后是多色搭配。顧名思義，即超過三種以上的顏色搭配。這樣的搭配積極向上、活潑、跳躍，比較適合兒童。在這里經常用到三種推移形式：色相推移，即將色彩按色相環的順序，由冷到暖或由暖到冷進行排列、組合的一種漸變形式。明度推移，即將色彩按明度等差級系列的順序，由淺到深或由深到淺進行排列、組合的一種漸變形式。純度推移，即將色彩按等差級數系列的順序由鮮到灰或由灰到鮮進行排列組合的一種漸變形式。來使畫面眾多色彩和諧統一。

如果說上邊說的是如何選取色彩，那說完這些，不得不說一下主色、輔助色和點綴色，這個概念。這是調節界面氣氛，增加界面韻律與節奏的重要因素。

主色，界面色彩中的主角，要比其他顏色醒目、清晰、強烈，使觀光者的視線固定下來。主色決定了網頁的整體風格，其他的色彩如輔助色和點綴色，都將圍繞主色進行選擇。點綴色通常是面積較小的部分，為了方便閱讀提醒注意而出現的。起著著重強調的作用，面積越小與主色的對比越強，效果越強。可以使畫面產生輕快的動感。輔助色，起對主色襯托的作用，對界面的整體性有關鍵作用。輔助色又稱為背景色。背景色決定了網頁界面的整體印象。背景色一般采用素淡清雅的色彩，避免采用花紋復雜的圖片和純度很高的色彩作為背景色，同時背景色要與文字的色彩對比強烈一些。只有輔助色和點綴色能夠與主色協調時，配色才會舒服漂亮。

五、UI配色實戰

當大家掌握了上述的知識，就可以來進行實戰演練啦，“一個高手的養成需要10000個小時”。大家可以根據以下方法：一是明確作品想要表達的情感，以及受眾范圍，確定主色；二是選取一些與你的情感表達相似的優秀的圖片、Logo、UI作品、插畫或流行服裝，從中提取顏色，得到主色、輔助色和點綴色；三是接下來就可以應用到界面上，這時應注意，好的配色要突出界面所表達信息，顏色不宜超過三種，當顏色超過時，可以采用豐富單色的五種方法，以及調整飽和度和明度的方法來處理。

六、結論

用戶對UI的色彩感知受到品牌需求、界面需求、運行環境、硬件設施，以及用戶自身年齡、性別、性格、文化、教養、職業、民族、宗教、生活環境、時代背景、生活經歷等各方面因素的影響。設計者，需要綜合考慮其潛在用戶的各種特征。美好的事物總會讓人有種愉悅之感，好的色彩設計，不僅使交互設計更加完美，并且還能為獲得良好的用戶體驗增光增彩。

[1]寫給大家看的色彩書2——色彩怎么選，設計怎么做.人民郵電出版社，2012

[2]梁景紅談 色彩設計法則.人民郵電出版社，2015

[3]百度百科.UI詞條

趙鵬程(1994-)，女，漢，河北省保定市，碩士研究生在讀，北京印刷學院，多媒體方向。