摘要：UI色彩設(shè)計(jì)是展現(xiàn)一款UI產(chǎn)品風(fēng)格特點(diǎn)的有效手段之一，與固定的Web端界面設(shè)計(jì)不同，隨著技術(shù)水平的發(fā)展，移動(dòng)端的媒體界面設(shè)計(jì)會(huì)更加方便，有利于大多數(shù)用戶(hù)使用。一款好的移動(dòng)媒體UI設(shè)計(jì)通常會(huì)運(yùn)用合理的配色呈現(xiàn)其產(chǎn)品特色?；诖?，本文研究移動(dòng)媒體UI設(shè)計(jì)中的色彩搭配，以提升移動(dòng)媒體UI設(shè)計(jì)對(duì)于用戶(hù)的吸引力。同時(shí)，分析近年來(lái)的UI色彩設(shè)計(jì)趨勢(shì)，以及不同色彩給人帶來(lái)的不同視覺(jué)感受，旨在打破傳統(tǒng)色彩設(shè)計(jì)方案，引導(dǎo)UI設(shè)計(jì)師進(jìn)行創(chuàng)新，合理運(yùn)用色彩搭配提升移動(dòng)媒體UI設(shè)計(jì)水平，為用戶(hù)帶來(lái)更多的色彩設(shè)計(jì)方式，提升用戶(hù)使用滿意度。

關(guān)鍵詞：移動(dòng)媒體;UI設(shè)計(jì);色彩搭配

中圖分類(lèi)號(hào)：J504 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1004-9436（2021）15-0-02

0 引言

隨著網(wǎng)絡(luò)信息的快速發(fā)展，數(shù)字媒體行業(yè)的影響力逐漸提升，人們的移動(dòng)媒體使用頻率也逐漸上升。在移動(dòng)媒體高速成長(zhǎng)的狀態(tài)下，用戶(hù)對(duì)移動(dòng)媒體UI設(shè)計(jì)的質(zhì)量與要求也逐步提升，設(shè)計(jì)師在對(duì)移動(dòng)媒體UI進(jìn)行色彩設(shè)計(jì)時(shí)會(huì)根據(jù)用戶(hù)的行為習(xí)慣、性別、愛(ài)好、年齡、生活環(huán)境、宗教習(xí)俗等因素不斷進(jìn)行完善。移動(dòng)媒體UI設(shè)計(jì)所呈現(xiàn)的視覺(jué)色彩不同，給用戶(hù)帶來(lái)的體驗(yàn)感也會(huì)有所不同，在移動(dòng)UI交互設(shè)計(jì)中合理地進(jìn)行色彩搭配是提升產(chǎn)品質(zhì)量、吸引用戶(hù)的重要手段之一，因此，越來(lái)越多的設(shè)計(jì)師開(kāi)始重視選用適當(dāng)?shù)纳释晟埔苿?dòng)UI設(shè)計(jì)。

1 移動(dòng)媒體UI設(shè)計(jì)概述

簡(jiǎn)單來(lái)說(shuō)，UI設(shè)計(jì)是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)[1]。移動(dòng)媒體UI界面的設(shè)計(jì)和傳統(tǒng)網(wǎng)頁(yè)界面設(shè)計(jì)相似，主要分為三類(lèi)，分別是界面的圖形設(shè)計(jì)、繪制原型圖的交互設(shè)計(jì)、用戶(hù)體驗(yàn)研究。 好的UI設(shè)計(jì)不僅能夠提升產(chǎn)品的品質(zhì)，使產(chǎn)品看起來(lái)更加高端，還能使操作更加便捷實(shí)用。隨著網(wǎng)絡(luò)時(shí)代的迅速發(fā)展，移動(dòng)媒體UI設(shè)計(jì)在近些年逐漸成為主流UI設(shè)計(jì)之一。

移動(dòng)媒體UI設(shè)計(jì)是指移動(dòng)端媒體的界面設(shè)計(jì)，通常是指手機(jī)、iWatch等可移動(dòng)設(shè)備的界面。相對(duì)于固定的網(wǎng)頁(yè)端UI設(shè)計(jì)，移動(dòng)媒體UI設(shè)計(jì)更加靈活，它的界面展示集中于方寸之間，無(wú)論是上下班出行還是在家都可以隨時(shí)隨地使用，這也給移動(dòng)媒體UI設(shè)計(jì)帶來(lái)了更多的展示平臺(tái)。合適的色彩搭配會(huì)讓UI設(shè)計(jì)界面錦上添花甚至能決定產(chǎn)品的質(zhì)量，因此移動(dòng)媒體UI設(shè)計(jì)中的色彩選擇成為設(shè)計(jì)師不可忽略的重要環(huán)節(jié)。

2 移動(dòng)媒體UI設(shè)計(jì)中的色彩設(shè)計(jì)原則

2.1 協(xié)調(diào)統(tǒng)一原則

同樣的移動(dòng)媒體UI設(shè)計(jì)界面風(fēng)格在不同的配色中會(huì)給予用戶(hù)完全不同的感受。在移動(dòng)媒體UI設(shè)計(jì)在與用戶(hù)進(jìn)行交互的過(guò)程中，色彩能直觀地表達(dá)產(chǎn)品的個(gè)性。因此，在移動(dòng)媒體UI界面的設(shè)計(jì)中，為了使整個(gè)產(chǎn)品畫(huà)面和諧，色彩的搭配需要平衡均勻、協(xié)調(diào)統(tǒng)一。設(shè)計(jì)師在設(shè)計(jì)之前需要定好占頁(yè)面比例最大的主色調(diào)，通過(guò)主色調(diào)確定整個(gè)界面的風(fēng)格，再以主色調(diào)為基準(zhǔn)搭配輔助顏色突出重點(diǎn)部分，以保證UI界面色調(diào)和諧、內(nèi)容劃分清晰，使產(chǎn)品有足夠的特色吸引用戶(hù)。統(tǒng)一的色彩可以簡(jiǎn)化產(chǎn)品信息。在同一個(gè)畫(huà)面中，使用的色彩盡量不要超過(guò)五種，主色調(diào)一到兩種即可，統(tǒng)一的整體色調(diào)可以突出重點(diǎn)并且使界面生動(dòng)豐富。盡量避免因顏色過(guò)多而造成用戶(hù)視覺(jué)上的混亂，UI界面色彩和諧會(huì)使用戶(hù)在瀏覽時(shí)感到輕松愉悅。

2.2 傳遞情感原則

色彩可以傳遞情感，作為一種視覺(jué)元素，它可以通過(guò)不同的色彩給用戶(hù)傳遞不同的情緒感受，潛移默化地影響和改變用戶(hù)的使用情緒。運(yùn)用色彩傳達(dá)情感的特性可快速拉近產(chǎn)品與用戶(hù)之間的距離。橘色、黃色、粉色等暖色調(diào)的顏色適用于母嬰、化妝品、室內(nèi)家具類(lèi)的移動(dòng)媒體UI產(chǎn)品界面，紫色、藍(lán)色等偏冷的色調(diào)適用于高科技技術(shù)、互聯(lián)網(wǎng)類(lèi)的移動(dòng)媒體UI界面，黑、白、灰的色調(diào)適用于想要營(yíng)造高級(jí)質(zhì)感、奢侈品類(lèi)的UI界面。設(shè)計(jì)師在選擇UI界面的配色時(shí)，需要學(xué)會(huì)利用色彩制造不同的溫度感、距離感、質(zhì)量感等，滿足用戶(hù)的心理需求。

2.3 重點(diǎn)突出原則

一個(gè)畫(huà)面中的色彩元素過(guò)多會(huì)導(dǎo)致用戶(hù)在使用過(guò)程中產(chǎn)生視覺(jué)疲勞。一款好的設(shè)計(jì)在進(jìn)行構(gòu)思時(shí)，一般會(huì)敲定一款主色調(diào)，通常會(huì)選取一種恰當(dāng)?shù)念伾鳛檎麄€(gè)移動(dòng)媒體UI界面的主色調(diào)，并將同色調(diào)運(yùn)用于產(chǎn)品的細(xì)節(jié)之中，如按鈕、邊框、圖標(biāo)等，讓整個(gè)畫(huà)面色調(diào)統(tǒng)一。需要注意的是，重點(diǎn)色不等同于主色調(diào)，它應(yīng)該區(qū)別于主畫(huà)面中的大部分顏色，利用其他的顏色突出頁(yè)面中細(xì)小零散的重點(diǎn)按鍵。這也可以讓使用者很好地抓住頁(yè)面中的重點(diǎn)，有助于集中產(chǎn)品的功能，減少用戶(hù)在使用過(guò)程中因畫(huà)面雜亂而產(chǎn)生不適感。

2.4 趣味生動(dòng)原則

通常來(lái)說(shuō)，高飽和度的色彩會(huì)比低飽和度的顏色更能吸引人的注意力，這是因?yàn)榻k麗的色彩能夠更好地讓界面變得活潑生動(dòng)。當(dāng)然，這并不是說(shuō)高飽和度的UI界面色彩就更好，而是色彩變換可以極大地激發(fā)用戶(hù)的使用興趣，這就需要在設(shè)計(jì)過(guò)程中充分利用色彩靈活多變的特性。在進(jìn)行色彩的設(shè)計(jì)時(shí)，盡量避免出現(xiàn)色彩過(guò)于單調(diào)、缺少變化的狀況，單調(diào)的色彩無(wú)法打造合適的產(chǎn)品氛圍。選取恰當(dāng)?shù)纳拭娣e，將色彩的色相、純度、明度、光色和肌理等要素進(jìn)行有序的、規(guī)律性的設(shè)計(jì)，能夠讓用戶(hù)感受到UI界面色彩變換的豐富性，讓界面更加生動(dòng)，吸引用戶(hù)的注意力。

2.5 色彩平衡原則

在移動(dòng)媒體UI界面中，過(guò)于強(qiáng)烈的顏色容易讓人覺(jué)得眼花繚亂，在設(shè)計(jì)中做到色彩平衡可以很好地減輕濃烈色彩帶來(lái)的沖擊感。色彩平衡主要是指調(diào)和顏色的強(qiáng)弱、輕重和濃淡關(guān)系。通常情況下，同一種冷暖的配色方案可以快速高效地實(shí)現(xiàn)界面的平衡與協(xié)調(diào)，而高純度的互補(bǔ)色或?qū)Ρ壬缂t色和綠色、黃色和藍(lán)色、綠色和橙色等，則很容易帶來(lái)過(guò)于強(qiáng)烈的視覺(jué)觀感，使用戶(hù)感到不適。色彩平衡的另一種方式為明度的平衡，高明度的顏色會(huì)給用戶(hù)通透明亮的感覺(jué)，可以增強(qiáng)界面的層次感和活力，而低明度的色彩則更顯高級(jí)質(zhì)感，帶給用戶(hù)低調(diào)沉穩(wěn)的感受[2]。

3 移動(dòng)媒體UI界面的配色方式

當(dāng)不同的色彩搭配組合在一起時(shí)，色彩的明度、飽和度的不同數(shù)值搭配作用使得界面富有層次感，需要注意的是，色彩過(guò)于一致也會(huì)讓界面變得單調(diào)。例如，幾種淺色組合搭配很難產(chǎn)生對(duì)比效果，同樣，多種深色搭配在一起也會(huì)過(guò)于雜亂，難以吸引用戶(hù)。但當(dāng)兩種搭配方式穿插在一起時(shí)，即淺色與深色共同組合在同一界面里，淺色就顯得更淺，深色顯得更深。明度和色相相應(yīng)搭配也會(huì)產(chǎn)生同樣的對(duì)比效果。

在實(shí)際的網(wǎng)頁(yè)界面設(shè)計(jì)過(guò)程中，還是要考慮到頁(yè)面的整體環(huán)境和色調(diào)組合之間的變化。同樣的顏色、明度和飽和度，由于界面背景、裝飾的顏色不同，搭配起來(lái)可能會(huì)讓同一個(gè)界面千變?nèi)f化。因此，UI界面的色彩搭配需要通過(guò)分析產(chǎn)品的個(gè)性和特征制定個(gè)性化的設(shè)計(jì)方案。

3.1 鄰近色配色

在色相環(huán)中選取鄰近的顏色進(jìn)行搭配組合，與同色系的色彩結(jié)合。近鄰色搭配會(huì)讓UI界面更加豐富一些，顏色接近也會(huì)讓界面的過(guò)渡變得更加自然和諧。選取色環(huán)中不同的鄰近色會(huì)讓用戶(hù)擁有不同的感受，如綠色與黃色結(jié)合會(huì)給用戶(hù)清新自然的感覺(jué)，藍(lán)色和紫色相搭配會(huì)增添產(chǎn)品高貴優(yōu)雅的特性。特別是在一些過(guò)高純度的移動(dòng)媒體UI界面中，可以選用鄰近色填充和點(diǎn)綴按鍵和標(biāo)簽，不僅不會(huì)讓色彩突兀，還會(huì)讓畫(huà)面更有層次感。在圖標(biāo)等按鈕配色完成后，再統(tǒng)一降低色彩的飽和度用于界面模塊劃分，能使畫(huà)面顏色和諧統(tǒng)一。

3.2 同色系配色

同色系配色是指移動(dòng)UI界面的主色和輔助色在同一個(gè)色相中。一般來(lái)說(shuō)，這種配色方案所產(chǎn)生的UI界面能給用戶(hù)一種整體性，讓人感受到頁(yè)面的一致。由于同色系界面設(shè)計(jì)的整體性較強(qiáng)，移動(dòng)媒體UI界面較小，色彩的色相差別小，用戶(hù)很難分辨內(nèi)容的劃分，這時(shí)就可以利用顏色的深淺區(qū)分不同類(lèi)型的內(nèi)容信息。例如，在同一個(gè)界面中，主色調(diào)選取紫色，淡紫色和深紫色分別為不同板塊進(jìn)行劃分，穿插白色作為背景，產(chǎn)品的界面就會(huì)非常具有整體性，用戶(hù)在使用的時(shí)候也能感受到產(chǎn)品界面的一致性。

3.3 相似色配色

相似顏色搭配也是一種常見(jiàn)的配色方式，運(yùn)用在移動(dòng)媒體UI界面中會(huì)讓整個(gè)界面色調(diào)平和，不會(huì)有太過(guò)強(qiáng)烈的反差。例如，在同一款產(chǎn)品中，以藍(lán)色和綠色為基調(diào)，加入青色、湖藍(lán)等與主色調(diào)相似的顏色，會(huì)給使用者帶來(lái)平靜、和諧的感受。

3.4 互補(bǔ)色配色

雖然在大多數(shù)情況下，移動(dòng)媒體UI設(shè)計(jì)的界面需要給用戶(hù)營(yíng)造一個(gè)和諧、有助于瀏覽的界面。但是在一些購(gòu)物或者宣傳類(lèi)的UI界面中，還是需要一定的視覺(jué)沖擊吸引用戶(hù)的注意力，一般來(lái)說(shuō)有兩種常見(jiàn)的方式。一種是通過(guò)高飽和度的顏色給用戶(hù)形成強(qiáng)烈的視覺(jué)沖擊力;另一種就是通過(guò)色環(huán)中的互補(bǔ)色，如黃色與藍(lán)色，紅色與綠色等，將兩種對(duì)比色放在同一界面，通過(guò)強(qiáng)烈的視覺(jué)反差突出購(gòu)物、宣傳類(lèi)移動(dòng)媒體界面的重點(diǎn)。

4 移動(dòng)媒體UI設(shè)計(jì)中的色彩運(yùn)用

色彩作為移動(dòng)媒體UI設(shè)計(jì)中的重要環(huán)節(jié)之一，合理地運(yùn)用它有助于提升產(chǎn)品質(zhì)量，具體的方式可總結(jié)歸納為三個(gè)步驟。

4.1 構(gòu)建移動(dòng)媒體UI界面的整體架構(gòu)

通常一個(gè)移動(dòng)媒體UI界面的設(shè)計(jì)會(huì)運(yùn)用一些幾何形狀直接傳遞視覺(jué)效果。目前市面上所見(jiàn)到的絕大多數(shù)移動(dòng)媒體UI界面都是由不同的幾何色塊組裝而成的，都是基礎(chǔ)的底色加上各類(lèi)色塊圖案組合形成圖標(biāo)、按鈕等符號(hào)，形成一整套的圖形符號(hào)系統(tǒng)。設(shè)計(jì)師利用好顏色可以直觀地表現(xiàn)出界面背景、導(dǎo)航欄、狀態(tài)欄、按鈕等不同的構(gòu)成元素之間的區(qū)別，并運(yùn)用顏色展現(xiàn)出設(shè)計(jì)師對(duì)于UI界面的邏輯梳理和整體架構(gòu)。設(shè)計(jì)出一款好的移動(dòng)媒體UI界面，需要設(shè)計(jì)師對(duì)產(chǎn)品定位、用戶(hù)需求進(jìn)行深入分析，確定好色彩搭配方案，形成“標(biāo)準(zhǔn)色彩規(guī)范”，在完成基礎(chǔ)調(diào)研后，再對(duì)產(chǎn)品的細(xì)節(jié)，如圖標(biāo)、按鈕、線框等進(jìn)行設(shè)計(jì)。值得注意的是，“標(biāo)準(zhǔn)色彩規(guī)范”中要確定好頁(yè)面的主色調(diào)、輔助色調(diào)以及各種修飾細(xì)節(jié)的色調(diào)，這樣才能讓設(shè)計(jì)稿和實(shí)際效果的色彩保持一致。

4.2 明確視覺(jué)層級(jí)關(guān)系

在UI界面設(shè)計(jì)中，每一部分的內(nèi)容都是處于不同層級(jí)關(guān)系之中的，如美妝類(lèi)中包含眼妝、唇妝，書(shū)籍類(lèi)包含散文、小說(shuō)等不同的子集。運(yùn)用同色系的色彩或不同明度的同一種顏色可以幫助用戶(hù)快速區(qū)分每一個(gè)板塊不同的層級(jí)，或是在灰色調(diào)的主界面中選擇明度較高的顏色或純色調(diào)與周?chē)念伾纬蓪?duì)比，從而突出關(guān)鍵部分。

4.3 營(yíng)造界面整體風(fēng)格

UI界面雖然是個(gè)復(fù)雜的視覺(jué)圖形系統(tǒng)，但是靈活地運(yùn)用好主色調(diào)、輔助色和裝飾色，利用這幾種色彩做出合理的對(duì)比調(diào)和，可以讓界面呈現(xiàn)出明顯的風(fēng)格傾向。日本知名設(shè)計(jì)師まりっぺ提出70%、25%、5%的配色比例原則也適用于移動(dòng)媒體UI設(shè)計(jì)。

首先，主色調(diào)是確定整個(gè)UI界面視覺(jué)風(fēng)格最重要的顏色，它的面積幾乎占據(jù)整個(gè)界面的70%。主色調(diào)的選擇要根據(jù)產(chǎn)品本身的特性、用戶(hù)的需求以及色彩心理學(xué)規(guī)律來(lái)決定，可在主色的基礎(chǔ)上通過(guò)明度與純度的變化衍生出同色系色調(diào)作為主色調(diào)范圍。由于色彩在視覺(jué)中是有重量的，色彩飽和度越高，色彩給人的感覺(jué)就越強(qiáng)烈，而明度越亮，色彩就越發(fā)搶眼，因此主色調(diào)一般選擇飽和度較高而明度較低的色彩在UI界面中作為背景展現(xiàn)出來(lái)。

其次，輔助色顧名思義是襯托主色調(diào)的色彩，在整個(gè)界面的色彩中約占25%。它與主色調(diào)相輔相成，合理運(yùn)用輔助色可以讓整個(gè)界面達(dá)到和諧統(tǒng)一。選擇和主色調(diào)相同色系的輔助色可以呈現(xiàn)出和諧的視覺(jué)效果，選用主色調(diào)的鄰近色作為輔助色可以增強(qiáng)界面的層次感，選用與主色調(diào)相反的對(duì)比色可以使主色調(diào)更加突出。

最后，作為在整個(gè)界面中起點(diǎn)綴作用的裝飾色，對(duì)其合理運(yùn)用不僅能起到錦上添花、畫(huà)龍點(diǎn)睛的作用，還能讓整個(gè)界面更加靈動(dòng)。好的裝飾色可以增強(qiáng)界面的趣味性和個(gè)性化特征，豐富頁(yè)面的視覺(jué)效果。需要注意的是，裝飾色要和界面的整體色調(diào)有一定的區(qū)別，在色相、明度和飽和度上都有一定的差異性。一般來(lái)說(shuō)，在整個(gè)界面色彩明度較低的情況下，選用飽和度較高的顏色會(huì)突出重點(diǎn)，也可以利用互補(bǔ)色讓界面的重點(diǎn)展現(xiàn)出來(lái)。

對(duì)色彩的明度、飽和度變化進(jìn)行調(diào)整，可以營(yíng)造出完全不同的移動(dòng)媒體UI界面風(fēng)格。例如，男生喜歡的帶有科技感和運(yùn)動(dòng)感的灰色、深藍(lán)等多為暗色系，女生喜歡的甜美夢(mèng)幻的粉色、橘色、橙色等多為亮色系。隨著科學(xué)技術(shù)的不斷發(fā)展，移動(dòng)媒體UI的使用也成為人們的日常，界面風(fēng)格定位與品質(zhì)已經(jīng)成為用戶(hù)體驗(yàn)中最重要的部分[3]。

5 結(jié)語(yǔ)

本文之所以將移動(dòng)媒體UI界面的色彩作為界面風(fēng)格的重點(diǎn)內(nèi)容進(jìn)行詳細(xì)的研究分析，就是想設(shè)計(jì)出更加貼合用戶(hù)需求的界面。時(shí)代的快速發(fā)展使用戶(hù)的移動(dòng)媒體使用率快速上升，傳統(tǒng)單一的配色效果已不能滿足所有用戶(hù)的需求，針對(duì)用戶(hù)類(lèi)型進(jìn)行個(gè)性化定制的產(chǎn)品逐漸成為主流。

色彩的合理搭配能夠快速提升產(chǎn)品質(zhì)量，是拉近移動(dòng)媒體產(chǎn)品與用戶(hù)之間距離的重要途徑之一。本文闡述移動(dòng)媒體UI設(shè)計(jì)中的部分搭配色彩方式，以期讓界面設(shè)計(jì)變得更加靈活，對(duì)于推動(dòng)移動(dòng)媒體UI設(shè)計(jì)的色彩搭配具有一定的指導(dǎo)意義。

參考文獻(xiàn)：

[1] 張軍.關(guān)于UI界面設(shè)計(jì)課程設(shè)置的構(gòu)思與創(chuàng)想[J].藝術(shù)與設(shè)計(jì)，2011（07）：99-101.

[2] 修德旭.論UI設(shè)計(jì)中的心理學(xué)應(yīng)用[J].藝術(shù)評(píng)鑒，2017（8）：177-178.

[3] 林進(jìn)仙.色彩搭配在網(wǎng)頁(yè)媒體上的應(yīng)用[J].藝術(shù)品鑒，2015（08）：121-122.

作者簡(jiǎn)介：張晨昱（1995—），女，湖北武漢人，碩士，講師，研究方向：藝術(shù)媒體藝術(shù)設(shè)計(jì)。