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

范美英

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

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

范美英

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

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

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

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

1 光與色彩的基本原理

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

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

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

2 人對色彩的感知途徑

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

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

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

人區(qū)別顏色的能力取決于顏色的呈現(xiàn)方式。基于人類視覺系統(tǒng)運作的方式,影響人對色彩的感知能力的因素主要有以下幾方面。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5 結(jié)語

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

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

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

[3]互動百科.彩色視覺[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ī)中國.屏幕不光只看尺寸 各材質(zhì)屏幕實戰(zhàn)解析[OL/DB].http://www.cnmo.com/guide/158299.html,2012.6.9

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

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