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

摘要：UI色彩設計是展現一款UI產品風格特點的有效手段之一，與固定的Web端界面設計不同，隨著技術水平的發展，移動端的媒體界面設計會更加方便，有利于大多數用戶使用。一款好的移動媒體UI設計通常會運用合理的配色呈現其產品特色。基于此，本文研究移動媒體UI設計中的色彩搭配，以提升移動媒體UI設計對于用戶的吸引力。同時，分析近年來的UI色彩設計趨勢，以及不同色彩給人帶來的不同視覺感受，旨在打破傳統色彩設計方案，引導UI設計師進行創新，合理運用色彩搭配提升移動媒體UI設計水平，為用戶帶來更多的色彩設計方式，提升用戶使用滿意度。

關鍵詞：移動媒體;UI設計;色彩搭配

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

0 引言

隨著網絡信息的快速發展，數字媒體行業的影響力逐漸提升，人們的移動媒體使用頻率也逐漸上升。在移動媒體高速成長的狀態下，用戶對移動媒體UI設計的質量與要求也逐步提升，設計師在對移動媒體UI進行色彩設計時會根據用戶的行為習慣、性別、愛好、年齡、生活環境、宗教習俗等因素不斷進行完善。移動媒體UI設計所呈現的視覺色彩不同，給用戶帶來的體驗感也會有所不同，在移動UI交互設計中合理地進行色彩搭配是提升產品質量、吸引用戶的重要手段之一，因此，越來越多的設計師開始重視選用適當的色彩完善移動UI設計。

1 移動媒體UI設計概述

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

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

2 移動媒體UI設計中的色彩設計原則

2.1 協調統一原則

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

2.2 傳遞情感原則

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

2.3 重點突出原則

一個畫面中的色彩元素過多會導致用戶在使用過程中產生視覺疲勞。一款好的設計在進行構思時，一般會敲定一款主色調，通常會選取一種恰當的顏色作為整個移動媒體UI界面的主色調，并將同色調運用于產品的細節之中，如按鈕、邊框、圖標等，讓整個畫面色調統一。需要注意的是，重點色不等同于主色調，它應該區別于主畫面中的大部分顏色，利用其他的顏色突出頁面中細小零散的重點按鍵。這也可以讓使用者很好地抓住頁面中的重點，有助于集中產品的功能，減少用戶在使用過程中因畫面雜亂而產生不適感。

2.4 趣味生動原則

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

2.5 色彩平衡原則

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

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

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

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

3.1 鄰近色配色

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

3.2 同色系配色

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

3.3 相似色配色

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

3.4 互補色配色

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

4 移動媒體UI設計中的色彩運用

色彩作為移動媒體UI設計中的重要環節之一，合理地運用它有助于提升產品質量，具體的方式可總結歸納為三個步驟。

4.1 構建移動媒體UI界面的整體架構

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

4.2 明確視覺層級關系

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

4.3 營造界面整體風格

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

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

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

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

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

5 結語

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

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

參考文獻：

[1] 張軍.關于UI界面設計課程設置的構思與創想[J].藝術與設計，2011（07）：99-101.

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

[3] 林進仙.色彩搭配在網頁媒體上的應用[J].藝術品鑒，2015（08）：121-122.

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