摘要: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è)計。