范美英

(北京信息職業(yè)技術(shù)學(xué)院軟件工程系,北京 100018)

淺析移動(dòng)應(yīng)用UI設(shè)計(jì)中色彩的使用

范美英

(北京信息職業(yè)技術(shù)學(xué)院軟件工程系,北京 100018)

對(duì)于任何一款移動(dòng)應(yīng)用(簡(jiǎn)稱APP),如果它具有良好的UI,就可以得到更多用戶的青睞。在UI設(shè)計(jì)中有諸多元素需要考慮,色彩便是其中之一。通過研究光色基本原理、人類對(duì)色彩的感知方式、色彩的呈現(xiàn)方法,以及在APP中影響色彩使用的因素,分析得出了在APP中如何才能調(diào)出可感知的顏色從而使得用戶樂于接受并使用APP;如何搭配色彩才會(huì)使得APP的UI更加光彩奪目。

APP UI 設(shè)計(jì) 色彩 顏色對(duì)抗通道

在人類物質(zhì)生活和精神生活不斷發(fā)展、進(jìn)化的過程中,色彩也不斷地展示著其神奇的魅力。人們不僅發(fā)現(xiàn)、觀察、創(chuàng)造、欣賞著絢麗繽紛的色彩世界,還通過日久天長(zhǎng)的時(shí)代變遷不斷深化著對(duì)色彩的認(rèn)識(shí)和運(yùn)用。當(dāng)前是以移動(dòng)互聯(lián)為主題的時(shí)代,人們對(duì)APP耳熟能詳。從市場(chǎng)角度來看,用戶對(duì)APP的選擇幾乎達(dá)到萬里挑一,如何才能使得用戶對(duì)APP一見傾心？這是時(shí)代對(duì)APP的設(shè)計(jì)者們提出的嚴(yán)峻考驗(yàn)。設(shè)計(jì)涉及的領(lǐng)域有很多,本文將以顏色的使用為核心,探討在APP的UI設(shè)計(jì)中色彩的使用規(guī)則。

1 光與色彩的基本原理

所謂光,就其物理屬性而言是一種電磁波。電磁波的波長(zhǎng)和強(qiáng)度可以有很大的區(qū)別,在人可以感受的波長(zhǎng)范圍內(nèi)(約312．30納米至745．40納米),它被稱為可見光,可以為人的視覺器官——眼所接受,并作出反應(yīng),有時(shí)也被簡(jiǎn)稱為光。

色彩是通過眼睛內(nèi)的感光細(xì)胞、大腦和我們的生活經(jīng)驗(yàn)所產(chǎn)生的一種對(duì)光的視覺效應(yīng)。有時(shí)人們也將物質(zhì)產(chǎn)生不同顏色的物理特性直接稱為顏色。

因此,色彩應(yīng)是可見光的作用所導(dǎo)致的視覺現(xiàn)象,可見光刺激眼睛后可引起視覺反應(yīng),使人感覺到色彩和知覺空間環(huán)境。人對(duì)色彩的感覺不僅僅由光的物理性質(zhì)所決定,往往受到周圍其他因素的影響。

2 人對(duì)色彩的感知途徑

人眼內(nèi)的視網(wǎng)膜中包含兩種感光細(xì)胞：視桿細(xì)胞和視錐細(xì)胞。視桿細(xì)胞的外段與內(nèi)段呈細(xì)桿狀,稱視桿;視錐細(xì)胞為圓錐狀,稱視錐。它們是感光的特殊結(jié)構(gòu),而且各司其職。

視桿細(xì)胞負(fù)責(zé)察覺光線強(qiáng)度,只在低亮度下工作,這意味著在光線很暗的環(huán)境中,它們才起作用。在明亮的白天和人工照明環(huán)境中,視桿細(xì)胞完全不能提供任何有用的信息。

當(dāng)視神經(jīng)向大腦傳遞一系列頻率的信號(hào)后,大腦后部視皮層上的神經(jīng)元將中頻和低頻視錐細(xì)胞的信號(hào)去掉,得到“紅-綠”的信號(hào)通道;一部分神經(jīng)元將來自高頻和低頻視錐細(xì)胞的信號(hào)去掉,得到“黃-藍(lán)”的信號(hào)通道;還有一部分神經(jīng)元將來自低頻和中頻視錐細(xì)胞的信號(hào)處理產(chǎn)生“黑-白”的信號(hào)通道。這三個(gè)通道被稱為顏色對(duì)抗通道(如果一個(gè)或者多個(gè)對(duì)抗通道無法正常工作,就不能區(qū)分某些顏色對(duì),此時(shí)會(huì)產(chǎn)生顏色視覺障礙),緊接著大腦對(duì)所有顏色對(duì)抗通道做更多的減法處理,從而使得來自視網(wǎng)膜某個(gè)區(qū)域的信號(hào)被其附近區(qū)域的類似信號(hào)減掉。所有這些處理使得人的視覺系統(tǒng)對(duì)顏色和亮度產(chǎn)生差別。

綜上,人類對(duì)顏色的感知是從位于視網(wǎng)膜的細(xì)胞差異化的輸出開始,然后經(jīng)由大腦的視覺皮層和其它相關(guān)區(qū)域中完成復(fù)雜的過程來實(shí)現(xiàn)的。

3 色彩呈現(xiàn)方式對(duì)感知的影響

人區(qū)別顏色的能力取決于顏色的呈現(xiàn)方式?；谌祟愐曈X系統(tǒng)運(yùn)作的方式,影響人對(duì)色彩的感知能力的因素主要有以下幾方面。

第一,色彩的飽和度。當(dāng)色彩的飽和度較低時(shí),很難將相似的顏色區(qū)分開,所以純度亦是色彩感覺強(qiáng)弱的標(biāo)志。對(duì)于液晶顯示屏而言,由于液晶每個(gè)象素由紅、綠、藍(lán)(RGB)子象素組成,背光通過液晶分子后依靠RGB象素組合成任意顏色光。如果RGB三原色純度較高,那么顯示器可以表示的顏色范圍就越廣。如果顯示器三原色不夠鮮艷,那這臺(tái)顯示器所能顯示的顏色范圍就比較窄,因?yàn)槠錈o法顯示比三原色更鮮艷的顏色。

第二,色彩區(qū)域的大小。色彩區(qū)域也可以稱之為色塊,色塊對(duì)象越小或者越細(xì),人們就越難辨別其顏色。在一些用于統(tǒng)計(jì)的數(shù)據(jù)圖表中,經(jīng)常會(huì)出現(xiàn)較小的色塊,雖然許多統(tǒng)計(jì)軟件都可以為圖表生成相應(yīng)的圖例,但生成的圖例中的色塊也非常小,這就會(huì)影響用戶對(duì)信息的捕獲。根源在于色彩區(qū)域的大小影響了用戶的視覺感知。

第三,色彩區(qū)域之間的距離。兩個(gè)色塊之間的距離越遠(yuǎn),人們就越難區(qū)分其顏色,尤其是當(dāng)其距離大到需要人們運(yùn)動(dòng)眼球才可看到時(shí),區(qū)分度會(huì)大幅下降。反之,如果兩個(gè)色塊之間的距離較近,且其色彩對(duì)比度較強(qiáng),則越容易被人識(shí)別。

第四,其他外部因素。除與色彩密切相關(guān)的因素之外,影響人們對(duì)色彩感知的因素還有很多,如環(huán)境光線、顯示器的使用技術(shù)、顯示角度、使用者本身對(duì)色彩的敏感度等。在設(shè)計(jì)UI的色彩時(shí),對(duì)這些因素的考慮越周到細(xì)致,那么UI效果將越容易被用戶所接受。

4 在APP的UI設(shè)計(jì)中如何使用色彩

4.1 屏幕呈現(xiàn)著色彩,結(jié)合硬件選用色彩

APP的運(yùn)行載體可以是智能手機(jī)或平板電腦。在智能手機(jī)中,無論是何種APP,其屏幕色彩均起到不可忽視的作用,這是因?yàn)橐豢钌识蕊枬M的智能手機(jī)能夠給用戶帶來完美的視覺體驗(yàn)。對(duì)于手機(jī)屏幕來說,屏幕材質(zhì)在很大程度決定了這款手機(jī)的顯示效果。

目前,主流手機(jī)屏幕材質(zhì)分為L(zhǎng)CD(Liquid Crystal Display的簡(jiǎn)稱,即液晶顯示器)和OLED(Organic Light-Emitting Diode的簡(jiǎn)稱, 即有機(jī)發(fā)光二極管)兩大類。市面上比較常見的TFT(Thin Film Transistor的簡(jiǎn)稱,即薄膜場(chǎng)效應(yīng)晶體管)以及SLCD(Splice Liquid Crystal Display的簡(jiǎn)稱,即拼接專用液晶屏)都屬于LCD的范疇,而三星引以為傲的AMOLED(Active-Matrix Organic Light-Emitting Diode)系列屏幕則隸屬于OLED的范疇。

三者的各自特點(diǎn)在于：TFT可以精確控制顯示灰度,所以TFT液晶的色彩更真;SLCD中規(guī)中矩,顯示效果接近自然,能讓人產(chǎn)生舒服的感覺;AMOLED所顯示出的色彩風(fēng)格更加艷麗,三原色得到了很大程度的加強(qiáng),但其色彩過渡不是很協(xié)調(diào),色彩也顯得不那么真實(shí)。

在設(shè)計(jì)UI色彩時(shí),需要考慮APP最終將主要運(yùn)行在哪些設(shè)備中,其屏幕色彩使用的是哪種技術(shù)。

4.2 需求決定了色彩,按照需求使用色彩

UI設(shè)計(jì)師除了需要考慮硬件對(duì)色彩的影響之外,其次需要考慮的因素就是APP的需求。

在任何一款A(yù)PP產(chǎn)生之前,都需要系統(tǒng)分析師對(duì)用戶的需求進(jìn)行深刻了解,生成需求分析報(bào)告。所謂需求分析就是指理解用戶的需求,就軟件的各項(xiàng)功能與客戶達(dá)成一致,估計(jì)軟件風(fēng)險(xiǎn)和評(píng)估項(xiàng)目代價(jià),最終形成開發(fā)計(jì)劃的一個(gè)復(fù)雜過程。在這個(gè)過程中,用戶處在主導(dǎo)地位,需求分析工程師和項(xiàng)目經(jīng)理要負(fù)責(zé)整理用戶需求,為之后的軟件設(shè)計(jì)打下基礎(chǔ)。由此可看出,任何設(shè)計(jì)都要基于用戶的需求,需求決定了一切,需要按照需求使用色彩。

4.3 色彩的使用準(zhǔn)則,根據(jù)準(zhǔn)則確定色彩

在符合用戶需求的前提下,設(shè)計(jì)APP的UI色彩時(shí),需要遵守色彩的使用準(zhǔn)則。對(duì)于那些需要依賴色彩來傳遞信息的交互式APP而言,這些準(zhǔn)則顯得尤為重要。

第一,用色相、明度和飽和度來區(qū)分顏色。具體地,UI中所使用的色彩盡可能使色彩之間有較高的反差,但要避免將對(duì)抗色(如紅與綠、藍(lán)與黃)放在一起。

第二,使用顏色對(duì)抗通道的顏色。如前文所述,正常人的視覺系統(tǒng)綜合了從視錐細(xì)胞傳過來的信號(hào)而生成了三個(gè)顏色對(duì)抗通道。人們最容易區(qū)分的恰好就是能夠在這三個(gè)通道中的一個(gè)上觸發(fā)強(qiáng)信號(hào),而在另外兩個(gè)通道上觸發(fā)空信號(hào)的顏色(如黑、白、紅、綠、黃、藍(lán))。所有其他顏色都會(huì)在超過一個(gè)通道上產(chǎn)生信號(hào),所以,為了提高用戶的視覺感知,我們可以使用這6種顏色。

第三,避免使用顏色視覺障礙的人無法辨別的顏色對(duì)。在使用APP的用戶中,也許會(huì)有顏色視覺障礙的用戶存在,所以在使用顏色時(shí),要避免使用不易區(qū)分的顏色對(duì),如紅與綠、藍(lán)與黃、深紅與黑、藍(lán)與紫、淺綠與白等,最好不要在任何深色背景上使用深紅、藍(lán)或紫色。但在淺黃或淺綠背景上可以使用深紅、藍(lán)和紫色。

第四,用顏色以外的方法完成UI中的提示。如果在APP中用某種顏色代表了某個(gè)事物,那么最好再使用另外一種方法來標(biāo)記這個(gè)事物,從而使得UI中的元素更加容易辨別和區(qū)分。

第五,使用符合用戶心理期待的色彩。用戶期待從APP的UI上獲得何種心理體驗(yàn)或感受,在色彩使用時(shí)就要將用戶的期待加以滿足。一般來講,紅色容易引起人的注意,也容易使人興奮、激動(dòng)、緊張、沖動(dòng)、還容易造成人的視覺疲勞,在表達(dá)驚喜情緒的UI中,可以適當(dāng)使用紅色;藍(lán)色比較樸實(shí),常為那些性格活躍、具有較強(qiáng)擴(kuò)張力的色彩提供一個(gè)深遠(yuǎn)平靜的空間,在表達(dá)浪漫和愿景的UI中,可以適當(dāng)使用藍(lán)色;綠色顯得柔順、恬靜、潢足、優(yōu)美,在需要表現(xiàn)希望、和平、青春的UI中,推薦使用綠色。

以上是在APP的UI設(shè)計(jì)中使用顏色的基本要領(lǐng)。除此之外,不同文化的用戶對(duì)顏色也有不同的詮釋。UI中到底如何使用顏色才能營(yíng)造出更加引人注目的效果,需要設(shè)計(jì)師對(duì)潛在用戶也有所研究。

5 結(jié)語(yǔ)

用戶對(duì)UI的色彩感知受到APP需求、運(yùn)行環(huán)境、硬件設(shè)施,以及用戶自身年齡、性別、性格、文化、教養(yǎng)、職業(yè)、民族、宗教、生活環(huán)境、時(shí)代背景、生活經(jīng)歷等各方面因素的影響。在設(shè)計(jì)者們完成其UI設(shè)計(jì)時(shí),需要綜合考慮其潛在用戶的各種特征,只有這樣才能恰如其分地將內(nèi)容呈現(xiàn)在UI中。

[1]Jeff Johnson.認(rèn)知與設(shè)計(jì)-理解UI設(shè)計(jì)準(zhǔn)則[M].北京:人民郵電出版社,2011.9.

[2]百度百科.色彩[OL/DB].http://baike.baidu.com/subview/37967/5062576.htm#1,2014.4.2

[3]互動(dòng)百科.彩色視覺[OL/DB].http://www.baike.com/wiki/%E5%BD%A9%E8%89%B2%E8%A7%86%E8%A7%89,2013.3.2

[4]百度百科.視細(xì)胞[OL/DB].http://baike.baidu.com/view/4428920.htm,2013.12.16

[5]百度百科.色彩飽和度[OL/DB].http://baike.baidu.com/view/631125.htm,2014.4.9

[6]Susan Welnschenk.100 Things Every Designer Needs to Know About People[M].北京:人民郵電出版社,2013.5.

[7]手機(jī)中國(guó).屏幕不光只看尺寸 各材質(zhì)屏幕實(shí)戰(zhàn)解析[OL/DB].http://www.cnmo.com/guide/158299.html,2012.6.9

[8]互動(dòng)百科.色彩[OL/DB].http://www.baike.com/wiki/%E8%89%B2%E5%BD%A9,2013.7.11

范美英(1982.5),女,碩士,中級(jí)講師,從事軟件開發(fā)的研究。