淺析移動應用UI設計中色彩的使用

范美英

(北京信息職業技術學院軟件工程系,北京 100018)

淺析移動應用UI設計中色彩的使用

范美英

(北京信息職業技術學院軟件工程系,北京 100018)

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

APP UI 設計 色彩 顏色對抗通道

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

1 光與色彩的基本原理

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

色彩是通過眼睛內的感光細胞、大腦和我們的生活經驗所產生的一種對光的視覺效應。有時人們也將物質產生不同顏色的物理特性直接稱為顏色。

因此,色彩應是可見光的作用所導致的視覺現象,可見光刺激眼睛后可引起視覺反應,使人感覺到色彩和知覺空間環境。人對色彩的感覺不僅僅由光的物理性質所決定,往往受到周圍其他因素的影響。

2 人對色彩的感知途徑

人眼內的視網膜中包含兩種感光細胞：視桿細胞和視錐細胞。視桿細胞的外段與內段呈細桿狀,稱視桿;視錐細胞為圓錐狀,稱視錐。它們是感光的特殊結構,而且各司其職。

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

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

綜上,人類對顏色的感知是從位于視網膜的細胞差異化的輸出開始,然后經由大腦的視覺皮層和其它相關區域中完成復雜的過程來實現的。

3 色彩呈現方式對感知的影響

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

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

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

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

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

4 在APP的UI設計中如何使用色彩

4.1 屏幕呈現著色彩,結合硬件選用色彩

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

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

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

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

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

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

在任何一款APP產生之前,都需要系統分析師對用戶的需求進行深刻了解,生成需求分析報告。所謂需求分析就是指理解用戶的需求,就軟件的各項功能與客戶達成一致,估計軟件風險和評估項目代價,最終形成開發計劃的一個復雜過程。在這個過程中,用戶處在主導地位,需求分析工程師和項目經理要負責整理用戶需求,為之后的軟件設計打下基礎。由此可看出,任何設計都要基于用戶的需求,需求決定了一切,需要按照需求使用色彩。

4.3 色彩的使用準則,根據準則確定色彩

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

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

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

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

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

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

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

5 結語

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

[1]Jeff Johnson.認知與設計-理解UI設計準則[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]百度百科.視細胞[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]手機中國.屏幕不光只看尺寸 各材質屏幕實戰解析[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),女,碩士,中級講師,從事軟件開發的研究。