移動媒體UI設(shè)計中的色彩研究與分析

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

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

中圖分類號：J504 文獻標識碼：A 文章編號：1004-9436（2021）15-0-02

0 引言

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

1 移動媒體UI設(shè)計概述

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

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

2 移動媒體UI設(shè)計中的色彩設(shè)計原則

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

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

2.2 傳遞情感原則

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

2.3 重點突出原則

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

2.4 趣味生動原則

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

2.5 色彩平衡原則

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

3 移動媒體UI界面的配色方式

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

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

3.1 鄰近色配色

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

3.2 同色系配色

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

3.3 相似色配色

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

3.4 互補色配色

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

4 移動媒體UI設(shè)計中的色彩運用

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

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

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

4.2 明確視覺層級關(guān)系

在UI界面設(shè)計中，每一部分的內(nèi)容都是處于不同層級關(guān)系之中的，如美妝類中包含眼妝、唇妝，書籍類包含散文、小說等不同的子集。運用同色系的色彩或不同明度的同一種顏色可以幫助用戶快速區(qū)分每一個板塊不同的層級，或是在灰色調(diào)的主界面中選擇明度較高的顏色或純色調(diào)與周圍的顏色形成對比，從而突出關(guān)鍵部分。

4.3 營造界面整體風格

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

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

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

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

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

5 結(jié)語

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

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

參考文獻：

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

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

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

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