基于色彩和質感的UI界面視覺風格的研究

朱雁

上海大學上海美術學院 上海 200444

引言：隨著互聯網產業的發展，互聯網帶動了智能手機的快速發展，手機不再僅僅是通信工具。社交、娛樂、拍照、支付等等功能，讓智能手機成為人們生活中不可或缺的東西，移動端也逐漸成為主流，所以UI設計在現在的智能化時代顯得尤為重要。

UI設計是由視覺設計、交互設計、用戶體驗這三個方面組成的。所以UI設計是伴隨著生活環境、科技發展、產品創新的轉變在不斷發展和革新的，而其視覺表現也在跟隨著環境、用戶心理、使用習慣等的變化而轉變[1]。

一、UI界面設計的發展趨勢

最初UI設計真正被大眾所熟知是由于2007年蘋果ios1系統的推出。從這個時候開始，UI設計的視覺表現上呈現出擬物化的趨勢，從過去優秀的擬物圖標案例中看出，這個時候的擬物化主要應用在關鍵的圖標、背景和按鈕上，此時的擬物風格追求的是極致的真實和復雜。所以此時界面的配色也為了追求真實感，都使用厚重、沉穩的色系。為的是消除用戶與產品和機器之間的障礙，縮小與熟悉事物之間的距離，降低用戶在使用中的認知成本和記憶負荷。

擬物化風格一直持續到2012年，以蘋果ios6系統為例，設計師已經把擬物設計到了一種極致，視覺上每一處的紋理、陰影、質感，每一個細節都非常的精致完美。因此，在這個時候，很難在擬物的設計風格上取得突破。而且，人們生活中的東西非常有限，熟悉的日常用品也在不斷地被替換，應用的功能也在不斷創新，很難找到現實生活中的物來模仿。其次界面由于紋理、陰影、質感的極致以及配色上的沉重，會讓用戶視覺上找不到重點，從而審美疲勞，擬物的風格也會限制住創新應用的發展。

所以從2013年開始，UI設計轉變為扁平化的視覺風格，以蘋果ios7系統為例，此時的UI設計拋棄了過度的裝飾、立體效果，使設計上趨于簡化，所以在配色上也相對單一，降低了質感，視覺上更加簡潔清晰明了，減少用戶的視覺負擔，使用戶更加注重在內容本身上。也就是從這個時候開始，UI界面趨向于“形式追隨功能”，對于UI界面中的圖標、圖形盡量做到簡約化，使用線性或者面性的圖標，界面色彩不再豐富。

純扁平化風格的UI界面一直持續到2019年。此時的互聯網和過去已經不一樣了，用戶的增長留存不再和過去一樣通過裂變和口碑完成，一個產品只要認真打磨體驗、功能就能獲得用戶的青睞和駐留。用戶的精力時間是固定的，而互聯網產品又層出不窮，佛系地等待用戶臨幸是沒有出路，所以在這種掠奪用戶注意力的思路指引下，此時界面層次感的削弱、色彩的單調和大面積的白色只會讓用戶覺得乏味，所以UI界面的視覺風格再做所謂的性冷淡、大留白、極簡風就不會合適。當對扁平的視覺效果已經開發到極限以后，那么進一步在一些細節處應用擬物就成為必然的選擇。此時烏克蘭設計師Alexander Plyuto在2019年5月起陸續在設計網站Dribbble發表了一系列系統界面的設計稿，出現了這種名為新擬態風格的視覺風格。

新擬態風格（圖1）大多數使用淺色，會在純白中加入一點其他顏色：比如灰色、米色、漸變。這種風格嘗試在純色界面中凸顯元素的凸起和凹陷感，所以會使用到投影、內投影和內高光等表現方式。這種方式會讓元素呈現立體感的同時也更加純粹。

圖1 Alexander Plyuto設計的界面（圖片來源：Dribbble）

這種風格是在扁平化風格的基礎上，通過陰影和高光將界面窗口的層次感提升，并在大面積純白色基礎上，通過飽和度高的顏色對重要層級進行強調，以此達到界面色彩對比強烈，用戶也能快速找到重要的內容。但是也由于顏色上這樣的運用規則，我們可以發現，這種僅僅靠陰影和高光支撐起來的風格，一般層級的區塊之間的對比度并不是很高。這會增加用戶初次上手的難度，必須為此去思考、嘗試理解新上手的App的操作方法，或者更糟糕的是，替設計師思考，屏幕上到底會發生什么，這完全與現代交互設計理念的易用性易上手性相沖突。

所以新擬態風格作為一種實驗性的風格，并不適合實際的應用場景。在新擬態風格和macOS Big Sur系統圖標更新的啟發下，大家開始對固定的圖案元素進行新的視覺風格的嘗試，從而出現了輕擬物的視覺風格。

從UI界面設計的開始到現在的變化趨勢可以看出，智能化的生活產品越來越豐富，這不僅是因為科技發展帶來了技術上的可能性，也是人們對現代生活更效率化、人性化需求的體現。所以用戶在使用產品的過程中，對時間的利用上，空間選擇上不必像以往那么受到局限，用戶也開始逐漸注重自身的參與感和產品體驗的滿足感，色彩單一、無質感的風格已經不能滿足用戶的體驗需求，所以UI設計也將在色彩、質感上進行進一步突破。這也就體現了UI設計從最初的“形式追隨功能”向“形式追隨體驗”轉變。

二、輕擬物風格特征分析

輕擬物風格不是單純地復刻以前的擬物風格，而是集合了時下審美趨勢的新風格，在扁平化圖形的基礎上適當地增加一些漸變、高光、透視、陰影等，使扁平看起來又不完全扁平，既豐富了界面又不會像擬物化一樣過于繁瑣，從而形成一種特色，這種設計更具有適用性和靈活性。輕擬物風格則不同于擬物風格，擬物風格更注重超寫實，顏色上會更加厚重，而輕擬物風格雖然也要寫實，但只是輕質感，介于擬物與扁平之間。由于輕擬物風格視覺上的豐富性，所以大多數運用在UI界面的重要圖標上，輕擬物風格的特征主要由輪廓、光影和顏色這三要素組成。

1.輪廓分析

輪廓就是圖形外輪廓的形狀的呈現。在面性圖標的設計中，可以包含更多的細節和零部件元素，而不是僅僅只有外輪廓。輕擬物的輪廓設計就要把這個圖形的內容包括細節都畫出來，而不是用不相干的圖形組合在一起而已。以美團外賣的主要圖標為例，雖然看起來很復雜，但是那是配色上的復雜，顏色層次上的復雜，而不是輪廓上的復雜。

2.光影分析

除了輪廓外，光影就是整個擬物的靈魂了。當一個完整的圖形完成填充色時，它是扁平圖案，如果完成光影呈現的時候，它就是三維空間的立體圖形，用球體舉個例子（圖2）。

圖2 球的光影（圖片來源：百度）

這是一個球體從扁平到立體以及賦予它一個質感材質的過程，通過添加明暗和高光、環境光以及高光的形狀讓球體更加立體和光滑。

在擬物風格的設計中，光線的概念是非常關鍵的，因此，我們必須要根據這個圖案來決定光線的走向，確定好是上方、前方、左上還是右上射入的光源，這會給之后的設計帶來很大的變化。若不能合理地詮釋光線與陰影，則會導致設計過程中的漸變角度、投影角度的偏差，從而導致陰影與高光的交錯。當一個光源被創造出來之后，被光所影響的對象就會出現明、暗、光四個方面，這四個方面可以分為：高光、亮部、暗部、投影。

這和寫生有很大的不同，在藝術中，光和暗的交界、反光，都是很難讓人模仿的，我們必須把這些東西都給刪除了。而高光則是由對象對光線的反射，例如在人像照相時，眼睛里的亮光就是對其反射。高亮能很好地增強圖像的層次感和對比度，使對象更具視覺沖擊力和視覺效果。至于暗部，只是用來顯示出物體的形狀，以及曲線的變化，并不是在被光照的地方，而是在黑暗中。在實際操作過程中，我們可以采用漸變的方式來表達面的亮部和暗部，但盡量不要直接設置一個漸變色，因為很有可能在過渡的交界處顏色的純度不夠，所以要在顏色的基礎上增加黑白透明度的漸變，從而亮部和暗部的效果。

3.顏色分析

大多數情況下，人們將色彩區分為冷色調系列、暖色調系列，不同色系的顏色給人帶來的視覺感受也是不同的，比如紅色、橙色這類暖色調會讓人感受到溫暖、活潑的感覺，而藍色、紫色這類冷色調會讓人感受到寒冷、理性的感覺。同時色彩還有高明度和低明度的區分，大部分高明度的顏色會讓人體會到輕感，而低明度則會帶給人重感。而對比度比較大、純度比較高的漸變色會給人的視覺帶來比較強烈的沖擊感，也能更加吸引眼球。[2]比如界面中想要創造一個充滿活力的氛圍，就可以使用紅色到橙色的漸變，這樣明亮、大膽的色彩也能激起積極的感覺。再比如界面中想要創造一個放松的氛圍，就可以使用藍色到藍綠色的漸變，這樣冷色調、深沉的色彩能夠帶來平靜、輕松的感覺。

隨著現代網絡信息技術的不斷發展，數字媒體在生活中的需求比重也越來越大，特別是在年輕群體中，所以針對年輕用戶為主的UI界面設計未來更多地會使用漸變色，這種漸變色的搭配并非與擬物化時期一樣為了凸顯質感，而是為了視覺美感、產品本身空間所做的大撞色漸變，這樣飽和度高、對比度大的色彩搭配運用為產品營造活潑、年輕、時尚的印象起到重要的作用，也會給人的視覺帶來比較強烈的感覺。在UI界面的圖標設計中使用漸變色，也能更好地實現圖標3D的擬態外觀。除了圖標之外，漸變色也會運用在UI界面的按鈕、彈窗的裝飾以及組件窗口中，這樣從整體的視覺效果來看，能讓整個產品的UI界面更加統一性和協調性[3]。

三、輕擬物風格在UI界面設計中的應用分析

輕擬物的應用并不可能鋪設到整個應用中去，因為完全擬物化的設計是會降低信息瀏覽效率的，所以它只適合做局部的視覺強化，用來加強用戶對特定區域的感知。

1.結合組件化的應用

在產品的UI界面中，視覺效果的優化最主要是在系統圖標以及組件窗口中的改變。而大眾的需求和審美也是多種多樣的，輕擬物風格肯定不能滿足所有用戶的想法，所以輕擬物風格的視覺效果是以產品的主題皮膚的形式供大眾選擇。以菜心工作室為小米折疊屏手機和小米PAD設計的專屬主題皮膚為例，此皮膚包括了主題紙花、主要圖標和控件的設計，主題顏色為油畫青到路牌藍的漸變色和白色，而這種飽和度高、明亮鮮艷的冷色調為主的漸變色營造出輕松、愉快和時尚的氛圍，視覺上給人一種整潔、干凈的感覺。而在圖標的設計上結合主題顏色的漸變，制作出輕擬物風格的輕質感，視覺上給人通透、精致的感覺。所以在UI界面的圖標和組件窗口中運用輕擬物風格的設計，能夠賦予產品更年輕化、時尚化的印象，提升用戶的視覺體驗。

2.結合品牌IP設計的應用

在視覺效果上，除了可以優化UI界面的圖標之外，還可以在界面上結合品牌IP形象，例如，引導頁、彈窗、活動banner以及積分頁面等。近幾年各大品牌的IP形象都由扁平風格轉向了輕擬物風格，讓IP形象立體化，能讓形象本身更有生命力。以美團APP的界面設計為例，在界面中的引導頁、彈窗、活動banner上都使用了“團團”這個IP形象，這樣能更好地傳遞品牌理念以及品牌特色，用這種討喜的方式去展示和宣傳。還能讓品牌和用戶有最直接的感受鏈接，同時傳遞了品牌價值理念，體現品牌的差異性[4]。

所以UI界面中的動效設計尤為重要，不僅能告知用戶操作有效，而且更富有情趣，建立良性的溝通，是一種積極的、人性化的體驗，在現在以及未來一定會廣泛運用。

3.結合動態設計的應用

在產品的UI界面中，我們除了需要注重用戶的視覺體驗之外，還要注重用戶的交互體驗，關注如何促使用戶與UI界面的交互就像與人交流一般自然、流暢，以及是否能在交互體驗中獲得情感和心理上的共鳴[5]。

為了提高用戶的使用體驗，也有將輕擬物圖標與現實的物理感官和科技視覺相聯系的UI動效設計，這和過去幾年的動態圖形有所區別，不再是簡單地對于界面中的圖形進行動效處理，而是更注重與用戶情感、用戶心理的連接。

以訊飛AIOT智能家居UI軟件界面設計的比賽作品為例，作品中所設計的圖標都是輕擬物的質感，當點擊空調的制冷模式后，空調的圖標出現藍色的光線，同時現實中的空調也會打開制冷模式。這樣的交互動效模擬了空調開啟的過程，用用戶熟知的效果做動效可以減少用戶的認知負擔，其次這種加載動畫不僅告知用戶這個等待過程的進度，而且通過愉悅用戶，增強了整個用戶體驗。這就是通過動畫效果，直觀表現設備響應的進度，這樣極大地提升了用戶的使用感受[6]。

由此可以看出，一個受用戶喜愛的UI設計除了具有功能性和良好的視覺美感，還要從用戶習慣、心理感受等各個方面去研究，真正做到“形式追隨體驗”，設計才能易用、符合人的需求。

結論

UI設計作為藝術與技術結合的新興行業，在未來，伴隨著生活環境的智能化，會滲透到生活的方方面面，起到和用戶溝通的重要作用。從UI設計出現以來其風格變化，也就是從色彩厚重、強質感的擬物化設計到色彩單一、無質感的扁平化設計，再到后來多種形式結合的色彩豐富、輕質感的新擬物設計風格，不難看出設計風格的重點不在于追趕潮流時尚和純粹的設計美感，而是跟隨用戶需求在不同時代、不同生活環境下的變化而改變的。

“形式追隨體驗”將是UI設計視覺表現追求的方向；這樣才能讓用戶不僅是使用而且享受使用的過程，使UI設計視覺表現形式更好的服務于功能。