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

淺析移動(dòng)應(yīng)用UI設(shè)計(jì)中色彩的使用

趙鵬程

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

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

UI設(shè)計(jì)；色彩基礎(chǔ)；色彩設(shè)計(jì)；配色

一、引言

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

二、淺談UI與UI設(shè)計(jì)

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

三、色彩的基礎(chǔ)知識(shí)

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

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

四、配色

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

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

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

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

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

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

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

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

六、結(jié)論

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

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

[2]梁景紅談 色彩設(shè)計(jì)法則.人民郵電出版社，2015

[3]百度百科.UI詞條

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