屏幕交互下色彩在UI設計中的新視野
——以黃山旅游APP為例

許素君

（黃山學院，安徽 黃山 245000）

智能手機在人們生活中的地位越來越重要，適應各種需求而開發的APP層出不窮。用戶的屏幕交互體驗效果很大程度上取決于APP設計所使用的色彩。使用具有針對性和識別性色彩的智能手機屏幕可以使人獲得更加全面的體驗，這是人機交互體驗的新視野[1]。本文以黃山旅游APP為例，研究屏幕交互下色彩在UI設計中的新視野。交互新技術的日新月異，研究基于屏幕交互下色彩在UI設計中的新視野顯得尤為重要[2]。筆者之所以選擇屏幕交互下色彩作為切入點，是因為色彩在黃山旅游APP中有著不可忽視的作用，以屏幕交互色彩為基礎設計的黃山旅游APP不僅可以很好地再現黃山之美，進一步推動黃山旅游的發展，而且可以發掘徽州的色彩文化，進一步推動徽州色彩文化的傳承創新。

1 屏幕交互下色彩的多元化呈現

色彩設計一直貫穿于UI設計的始終，在屏幕交互下設計師充分運用色彩的文化屬性，致力于為用戶帶來高級的體驗[3]。按色系分類，色彩可以分為無彩色系與有彩色系。無彩色系是黑、白、灰以及由三者所演化出的顏色；有彩色系是以紅、橙、黃、綠、青、藍、紫七色為基本色，及將這些基本色通過對比、調和、節奏、推移等手法演化出的顏色。

1.1 無彩色系與有彩色系的文化含義

藝術上使用以黑、白、灰構成的無彩色系，往往用以表達某種象征。白色包容性極強，可以與其他色彩實現“百搭”，亦即容萬物而生；黑色則象征萬物的開始和結束，常用于表現某種“神秘”，抑或表示魅力相隨；灰色的靈魂是介于黑白之間的多向性，用在現當代即“中庸”，亦即格調雅致。徽文化的色彩元素總給人潔凈素雅的感覺，流淌出崇尚古樸自然的審美情懷。這是無彩色系現實層面的含義。從理念層面看，老子的“五色令人目盲，五音令人耳聾”，對后世產生極大的審美影響，而黑白灰的色彩簡約平靜中和，不失大氣，符合人們崇尚自然、追求真善美的意境，這便與徽州的色彩文化相吻合[4]。

有彩色系五彩紛呈，更接近大自然的本來面貌。色彩是自然給予人類最為珍貴的饋贈，每一種色彩傾向都具有獨特的氣質與特征，紅色象征激情和理想；橙色象征溫暖，是與能量有關的顏色，還能強化視覺感受；黃色象征著活力；綠色象征清新與生命；藍色象征智力和理性；粉色象征可愛與童真。

1.2 智能時代色彩多元化的意義

我們生活在一個新的電子時代，即無時無刻不存在人機交互的智能時代，人們的生活方式發生了翻天覆地的變化。麥克盧漢認為：“我們塑造了工具，此后工具又塑造了我們。”[5]未來幾十年，隨著機器學習、生物傳感器、腦機交互等技術的發展，這一融合過程將不斷加速[6]。

在數字媒體交互時代，屏幕交互呈現出前所未有的豐富多元的狀態。在電子計算機飛速發展的智能時代，僅僅運用傳統的色彩設計語言是遠遠不夠的，還需要融入現代色彩元素。徽文化黑白灰的經典色搭配家喻戶曉，融入現代色彩元素后就能使之更具國際化風格。因此，筆者在設計黃山旅游APP時就在體現徽州色彩靈魂的同時加入西方色彩大師的藝術情趣，使用戶體驗更加友好。大眾色彩心理會隨時代的變化而變化，屏幕交互下的色彩在UI設計中也在發生著悄無聲息的變化，用戶的多元化色彩審美觀越來越鞏固。

1.3 屏幕交互下色彩的當代意義

信息技術的發展將我們帶入了讀圖、讀屏時代，這就要求UI設計必須更具人性化，更多考慮人們交互過程中的感受和體驗。屏幕交互下色彩UI設計需要使用新的設計語言，以滿足人們的需要。屏幕上的色彩要適應人們長時間閱讀和長時間交互的視覺舒適度需求，因此，在UI設計中色彩的呈現需要注意對視覺舒適度與心理感受產生的影響[4]，避免因為色彩應用不當使用戶產生疲勞與不適感。

色彩會對人類的情感產生影響，所以在色彩UI設計中就要考慮這種影響，利用這種影響。如簡單好看的配色更容易被兒童接受，他們會覺得更加可口，更易親近。紅色可以引起人們的購買欲望，青年是具有強烈消費沖動且有一定購買力的群體，在以引導消費為主要目的、針對青年群體的形象設計中，紅色元素便不可或缺。黑色給人一種“高檔”感，形象設計中的黑色元素可以滿足青年人快餐主義的心理。中老年人則更需要化繁為簡，交互模式需更加穩重與簡化，運用穩重、具有高識別度的純色可以給中老年人用戶帶來直觀感。

2 黃山旅游APP中的視覺化設計

視覺化設計就是運用點、線、面等設計概念，配以字體、顏色、圖形、版式等設計語言，作品以主要訴諸視覺方式呈現的設計方法[7]。遵循這樣的設計程式，就能將作者的設計理念貫徹于UI設計中。

2.1 logo的黑、白、灰色彩運用

黃山旅游APP的logo圖標（圖1）選用代表黃山文化意象的黑、白、灰色彩搭配來設計，以使用戶從中感受黃山文化特有的色彩氣場。該logo以黑、白、灰為主體顏色，色調與徽州色彩文化相一致，使用經典仿生圖形設計，山坡上冉冉升起的一輪紅日為點睛之筆，這樣一幅山間美景活靈活現地呈現在用戶面前，讓用戶在屏幕交互中初步體驗黃山旅游所帶來的文化享受[8]。色彩可以影響人的心理，使人產生潛意識行為，這樣一款簡約的APP圖標就會讓用戶體驗到黃山旅游之大美。

圖1 黃山旅游APP的圖標設計

2.2 界面色彩的延伸設計

色彩是APP界面打開時的第一呈現，獨特的色彩運用能夠牢牢吸引用戶的注意力[9]。色彩對用戶的視覺刺激具有耐久性、直接性，所以在UI設計中色彩的運用要注意對視覺舒適度與心理感受產生的影響，避免發生因色彩應用不當而使用戶產生視覺疲勞與不適感的情況。圖2是黃山旅游APP界面局部，該設計背景為黑色打底，以紅、白、灰三種顏色作為裝飾，這種灰度較高、明度較低的色彩搭配顯得較為柔和，整體觀感舒適，這就減輕了用戶長時間觀看時的勞累感。

圖2 黃山旅游APP的界面局部

圖3為黃山旅游APP主要功能區界面局部，該設計采用了明度對比與調和對比以實現豐富而不失統一的協調感與識別性。該設計以黑色與灰色為襯托背景，底邊菜單欄與關鍵功能按鈕使用白色和色相明確的紅色（門票預訂）、綠色（特色美食）、紫色（交通出行）、藍色（旅行團隊），讓用戶在明度對立的色彩中便捷地使用這些關鍵功能。這一設計的顏色明度適中，有一定的灰度，并利用功能按鈕方塊形狀單色漸變的灰色調來與背景無彩色的灰色組進行搭配，形成中差色對比（色相環上呈90度角的色彩組合），在提升顏色力度感的同時，也不會使某一種顏色顯得突兀，緩解用戶的視覺疲勞，增加黃山旅游APP整體古樸、厚重、含蓄的感覺。

圖3 黃山旅游APP主要功能區界面局部

在黃山旅游APP背景色彩的可視化設計上，采用了由淺至深的色彩推移，畫面變化有序，滿足用戶生理與心理上的整齊有序需要。黃山旅游APP界面的背景設計中運用形式美法則，按照黑→深灰→灰白的排列順序設計，紅色、灰色色條對稱均衡，增添了色彩的秩序感和層次感。灰色與黑色之間采用灰紅色隔離，用灰紅色包圍灰色形成顏色對比，減少了UI設計的單調感。黑、白、灰的色調表達出黃山樸實的文化環境，增加了黃山旅游APP的表意性。使用面積分配手法與純度統籌手法，使畫面更加耐看。使用偏灰的紅色與黑、白、灰色作點綴式搭配，賦予了黑、白、灰偏紅色的色彩傾向。紅色具有溫暖、熱情、積極的色性，能使人產生正向心理暗示與消費沖動，該設計利用用戶對紅色的具象聯想，強化了用戶的消費購物心理。黃山旅游APP主要功能區界面運用了點、線、面的設計概念，和顏色分割、顏色走向的設計原理，同時揉入字體、顏色、圖形、畫面等設計語言，較好地將設計理念與UI風格以視覺化方式呈現給用戶。

3 當代流行色彩與黃山旅游APP新視野

當代流行色彩與黃山旅游APP新視野主要體現在應用色彩的針對性和識別性進行設計方面。版面構圖學的文字、插圖、裝飾圖樣等元素在APP中的呈現效果與色彩的使用緊密相關。

3.1 康定斯基色彩的應用

俄裔法國藝術家康定斯基認為，色彩是一個能夠表達生理和心理情感經驗的角色。筆者設計的黃山旅游APP下方的總菜單欄（圖4），是一個小螃蟹的抽象造型，使用了紅色、綠色、黃色、藍色塊面填充，整體色調采用馬卡龍色，色彩風格吸了取康定斯基五顏六色、豐富多色彩的審美情調[10]。深灰→淺灰→灰紅→黑的對比凸顯方向感與注目性，排版位置的方向感可以引導用戶的觀看順序，形成適合受眾傳統閱讀順序的導向型視覺流程，同時，柔和的背景圖案不會過于喧賓奪主，從而能夠更好地突出界面的主體信息。

圖4 黃山旅游APP總菜單欄

在黃山旅游APP功能圖標的排版設計與色彩選擇中，筆者將最基本的形式美法則融入其中。功能圖標顏色上的對比強化了其辨識性，和對比與調和的形式美感。一直存在于界面下方的總菜單欄的版式與多數APP的長方形菜單形狀相比更具新穎感，強化了自身的風格，是屏幕交互下色彩在UI設計中新視野的一個亮點。

3.2 蒙德里安色彩的應用

不同年齡的人對色彩的感受是不同的，兒童喜歡鮮艷活潑的色調，老年人喜歡簡潔沉穩的色調，因此要根據不同年齡段的不同需求設計色彩。黃山旅游APP設計出了兩種針對性強的顏色模式，一種是兒童模式（圖5），一種是中老年模式（圖6）。

圖5 兒童模式UI設計局部

圖6 中老年模式UI設計局部

兒童模式UI色彩搭配是適應兒童喜歡大自然的年齡特征設計的，較多考慮紅、黃、藍等鮮艷色彩對兒童視覺的吸引力，功能圖標的設計靈感來自于小朋友熱歡的鯨魚、水母、蝸牛、蝴蝶和小鳥等動物，并對動物原本的色彩作了降調處理，這樣既考慮了色彩的識別性、整體性和平衡性，又做到了冷暖色、低飽和純色的和諧。

老人模式UI色彩設計更加重視信息的辨識度與易懂性。與康定斯基的“圓”不同，荷蘭著名抽象派畫家蒙德里安最常使用直線和方塊，他刪除繁雜留下精簡的色彩藝術風格正適合中老年人審美需求。筆者將蒙德里安式的單純色彩風格應用在UI色彩搭配設計中，以白色打底，以彩色為內容框，用少量的紅、黃、藍色搭配提升美感，利用較小面積的黑色壓制整體的艷麗，能在提升辨識性的同時兼顧審美情趣[11]。

4 結束語

在手機智能化水平越來越高背景下，屏幕交互下色彩在UI設計中的新視野有著跨時代的發展前景。UI設計從簡單的交互體驗單向操作轉變為推薦挑選的雙向關系，為屏幕交互下的色彩設計提供了新的思路。我們嘗試按照這一設計思路，利用色彩本身存在的特性，賦予色彩語言更能豐富用戶體驗的表現力，將傳統的色彩文化與流行色彩文化相結合，設計了這款黃山旅游APP。這一案例塑造了色彩個性化的UI界面，運用色彩的重復、對比和強調等手法，突出了界面主題，讓用戶獲得更加友好的體驗效果。