趙　雁

（吉林動(dòng)畫學(xué)院　吉林 長春 130000）

淺談手機(jī)游戲UI的顏色搭配

趙雁

（吉林動(dòng)畫學(xué)院吉林 長春 130000）

手機(jī)游戲UI顏色搭配的效果直接影響著游戲的效果，利用一些顏色搭配的原則，及注意一些關(guān)于制作手機(jī)游戲顏色的事項(xiàng)會(huì)制作出優(yōu)秀的手機(jī)游戲。

手機(jī)游戲UI；色相；明度；飽和度

游戲中背景顏色和文字、圖標(biāo)顏色搭配的不合適，容易導(dǎo)致顯示效果差、玩家普遍看不清的情況。那么UI中的各種元素顏色怎么搭配才是最好的呢？顏色有幾種最好呢？

事實(shí)上，色系的選擇會(huì)體現(xiàn)很多個(gè)人因素，畢竟每個(gè)人的色彩偏好都是不同的，這也是美術(shù)的魅力之一，但它作為商業(yè)作品，受市場(chǎng)、作品載體等多方面的因素制約，所以對(duì)其色彩，也有著特定的要求。色彩不要用明度太過黑暗的，飽和度太低的，顏色過臟的，也不要太亮的。因?yàn)槭謾C(jī)游戲玩家大部分時(shí)間都是在和界面打交道的，所有必須使屏幕顏色滿足易于辨別且不刺眼的基本功能，在這個(gè)基礎(chǔ)上還要發(fā)揮強(qiáng)大的美的功能。

上文提到了顏色的屬性，它可分為色相、明度、飽和度三種要素。色相，是顏色的基本特征，純粹表示色彩相貌的差異，色相有冷暖、純度、明度的區(qū)分。不同的色相給人的感覺也不一樣。明度，指顏色明暗的程度。對(duì)物體色來說就是強(qiáng)光照射下顯得明亮，弱光照射下顯得較灰暗模糊。飽和度，指色彩的鮮艷程度。原色最純，顏色混合得越多，飽和度越低。通常我們所說的強(qiáng)的色彩，與明暗無關(guān)，彩度高的色彩會(huì)讓人感覺色彩強(qiáng)，飽和度較低的色彩會(huì)比較弱，給人感覺就相對(duì)低沉穩(wěn)重。在PS中我們可以通過在色相/飽和度（CtrlU）面板中調(diào)整參數(shù)來調(diào)配這些屬性，這樣相對(duì)于畫布上調(diào)配顏色，計(jì)算機(jī)上可以通過數(shù)值進(jìn)行呈現(xiàn)，更加理性。

界面設(shè)計(jì)中一般分為主色、輔助色和點(diǎn)綴色。它們的配比大約是6：3：1。顏色的搭配需要體現(xiàn)對(duì)比。

一般來說，一個(gè)合格的設(shè)計(jì)需要有60%的主色，它可能被用來渲染畫面氣氛。主色是在界面中顏色面積最大的顏色。主色大多數(shù)都包括底色，底色永遠(yuǎn)是界面中的配角！可以采用飽和度較低或明度較低的原色，使底色看上去是遠(yuǎn)離的、被忽略的，圖標(biāo)和文字的顏色是拉近的，它們之間要有一定的對(duì)比。如果使用多種底色，請(qǐng)考慮使用近似色，這樣可以柔和過渡并不會(huì)影響前景文字的可讀性。然而，淺色調(diào)背景對(duì)來自室外陽光或日光燈的光線反射率較大，長時(shí)間盯著看并不利于眼睛，在淺色調(diào)背景的情況下為深色文字添加采用過渡色的發(fā)光效果以抵消光線的散射。

輔助色占到30%，是為了畫面的平衡，是為了襯托主色調(diào)而生的，一般采用主色的同類色和臨近色。同類色的對(duì)比，由于是同一色相里的不同明度與純度色彩的對(duì)比，所以感覺更加單純、柔和、諧調(diào)，無論總的色相傾向是否鮮明，調(diào)子都很容易統(tǒng)一調(diào)和。界面設(shè)計(jì)中常用同類色來制作一個(gè)面板中不同板塊的劃分，這樣每個(gè)板塊劃分即清楚又不會(huì)過于突出，影響其他圖標(biāo)、文字等更加重要的功能。鄰近色相對(duì)比的色相感，要比同類色相明顯、豐富、活潑，可稍稍彌補(bǔ)同類色相對(duì)比的不足。僅僅改變一下色相，就會(huì)使總色調(diào)改觀。輔助色的加入讓界面多了些層次感、空間感。

最后加上10%的點(diǎn)綴色，由同類色和鄰近色組成的主色與輔助色比較平穩(wěn)，但容易單調(diào)，為彌補(bǔ)這一點(diǎn)，可以將對(duì)比色或互補(bǔ)色作為點(diǎn)綴色。恰到好處地體現(xiàn)出了“點(diǎn)睛”這一妙筆，整個(gè)頁面頓時(shí)生動(dòng)起來，增強(qiáng)了頁面主題的表達(dá)力。這個(gè)特性發(fā)揮到最好的狀態(tài)并增強(qiáng)了視覺節(jié)奏感。對(duì)比色要比鄰近色鮮明、強(qiáng)烈、飽滿、豐富，容易使人興奮激動(dòng)和造成視覺以及精神的疲勞。所以占總面積小，是跳躍的。一般用于按鈕，顏色起到突出的作用?；パa(bǔ)色的對(duì)比，要更加完整、豐富、強(qiáng)烈，能適應(yīng)視覺的全色相刺激的習(xí)慣要求，它的過分跳躍，會(huì)使人感覺不安定、不協(xié)調(diào)，有一種幼稚、原始的和粗俗的感覺。所以這樣的顏色對(duì)比會(huì)常常出現(xiàn)在Q版游戲中，由于手機(jī)游戲Q版游戲居多，這種大膽的設(shè)計(jì)也便屢見不鮮了。

在顏色的搭配上，不論是主色還是輔色，都不能僵硬的只使用這三種顏色，要通過界面中具體信息靈活運(yùn)用它們的衍生色。在適當(dāng)運(yùn)用不同純度的，不是嚴(yán)格意義上的對(duì)比色系組合時(shí)，通常能起到的主要作用是分清主次關(guān)系。這樣的對(duì)比色系的對(duì)比特性雖然減弱了，但界面色彩看起來容易協(xié)調(diào)、柔和，同時(shí)也能突出主題。當(dāng)然這不是意味著顏色越多越好，要從游戲的整體風(fēng)格上來考慮。在配色方案上可以選擇流行色，這是國際流行色界的前輩們憑借經(jīng)驗(yàn)與創(chuàng)造力設(shè)計(jì)出代表國際潮流的色彩構(gòu)圖，他們的知覺與靈感已被大眾熟識(shí)，容易得到大眾認(rèn)同。

整套界面的設(shè)計(jì)規(guī)范應(yīng)該是一致的，包括顏色、字體、圖標(biāo)、按鈕等。字體的顏色選擇是和背景顏色息息相關(guān)，形成強(qiáng)烈反差，才能使字跡清晰顯示，一般文字應(yīng)選用暖色調(diào)或亮度高的顏色，背景選用冷色調(diào)或亮度較低的顏色。文字要醒目、易讀，避免由于手機(jī)屏幕過小、光線不合適造成的視覺疲勞。其次，背景顏色和文本顏色最忌諱同一色相。如無特殊情況，不會(huì)出現(xiàn)白紙黑字的情況，其一因?yàn)榘咨尘胺垂庾饔脧?qiáng)，對(duì)玩家眼睛刺激大；其二這樣的設(shè)定被默認(rèn)為書籍，會(huì)給人以呆板的印象。所以背景色中適當(dāng)加入一點(diǎn)明度較高飽和度較低的顏色效果會(huì)更好。標(biāo)題字體的顏色可以和文本字體區(qū)別，同一級(jí)別的標(biāo)題要用相同顏色和大小的字體。

如果想制作出一個(gè)優(yōu)秀的手機(jī)游戲作品，就應(yīng)該在顏色搭配上多下些功夫。注意各個(gè)面板和其中元素之間的顏色搭配，善于利用文字設(shè)計(jì)和顏色搭配的原則，就一定會(huì)制作出優(yōu)秀的手機(jī)游戲作品。

G898

A

1007-0125(2015)04-0164-01