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

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

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

趙鵬程

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

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

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

一、引言

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

二、淺談UI與UI設計

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

三、色彩的基礎知識

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

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

四、配色

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

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

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

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

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

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

五、UI配色實戰(zhàn)

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

六、結論

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

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

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

[3]百度百科.UI詞條

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