插畫在ui界面中的應用研究

王菡麟

摘 要：隨著科技點發展，用戶對于ui設計的要求也越來越高，所以ui設計逐漸商業化，而商業化點的同時對于插畫的要求也是逐漸提升，并不只是僅僅滿足于客戶的信息接收需求，更多的是在情感上的升華。

關鍵詞：插畫;ui設計;平面設計

前言

插畫在辭典中的最初的解釋是“指插附在書刊中的圖畫，對正文內容起補充說明或藝術欣賞作用”。但是這只是對圖書插畫的解釋，還是比較狹隘的。現如今在ui設計中它的主要作用更多的除了增加審美性，還有交互性。那么插畫在ui設計中有一席之地的原因也不僅僅是簡單的“好看”。

一、ui設計發展趨勢

UI設計（或稱界面設計）是指對軟件的人機交互、操作邏輯、界面美觀的整體設計。在科技發展的今天，好的ui設計的基本要求不僅需要滿足用戶的基本需求也要為用戶提供良好的操作體驗，比如簡單性，時尚性，功能性，交互性等，而在審美上面是要提升界面的美觀性。當然，提升ui的界面美觀性和交互性是尤為重要的，比如現在比較流行的全屏背景圖片，多個可交互圖層等，這都是發展的大趨勢。

二、插畫在ui設計中的特點

ui設計逐漸商業化的同時對于插畫的要求也是逐漸提升，并不只是僅僅滿足于客戶的信息接收需求，更多的是在情感上的升華。

2.1風格扁平化

扁平風格是最受歡迎的在ui界面設計中，扁平化是去掉漸變，投影和紋理等的圖畫，用簡單的幾何組成的一種新式的插畫風格，當然由于外形簡單，顏色也會使用非常的絢麗，這也就是構建了一個非常好的視覺層次。扁平化的風格會直接減少用戶的交互時間，因為不僅人讀區方式通俗易懂，對移動設備的硬件需求也是大大減少了待機時間，這樣精簡的方式很符合當下的辦事風格。

2.2故事性提升

插畫更加注重故事性，通過一些細節展示，氣氛的營造并結合貼切的文案，將一個生動形象的故事直接展示在用戶面前，而用戶也從主動的了解變成被動的了解，這就加大了宣傳的效果。用圖片代替大量的文字，直接將產品進行擬人化，將內容更直觀的傳達給用戶，和現實世界聯系起來，再結合當下流行的元素，直接提升用戶體驗，切合大眾心理，增加故事性。

2.3情感性的提升

在科技高速的發展的今天，用戶在快節奏的生活中是很希望情感的關懷的，而插畫現在除了故事性的講訴也在情感上的關懷做了提升。將溫馨的插畫附上有情感的文字去營造氛圍，表達情緒，這樣容易引起用戶情感上的共鳴，這就使用戶在需求上的需要變成了情感上的想要，這也是現在插畫在ui設計中的發展大趨勢。

三、插畫在ui設計中的發展趨勢

插畫設計是視覺傳達中的一個特殊領域，它可以作為單獨的一個分支去擴張，但是它永遠也離不開平面設計里面的一些理論支撐。插畫設計終究是設計，和純碎的藝術也是不一樣的，并不是拿起畫筆把天馬行空畫下來就好，它也還是要站在平面設計的理論下去發展的。

3.1動態插畫的運用

動態插畫對于現階段的UI發展中是一個積極的方向，它大大提升了交互，設計師試圖將動態結合微交互，不管是故事性還是情感性都是一個非常主動性的將“自己”展現給用戶，用戶也會通過互動，很快速的得到用戶反饋。動態插畫承載的信息量更多，趣味性更足，利用更短的時間增強交互性，降低用戶的理解時間，將功能發揮到最大。

3.2海報式插畫

海報的設計總能很快速的抓住用戶眼球，好的排版，顏色，字體都可以作為視覺點去營造視覺氣氛。海報式的插畫也逐漸受到重視，一張單純的插畫現在很難去吸引用戶，只有配合好的視角，好的排版，好的配色，好的字體才能抓住用戶眼球那要怎樣的布局才能凸顯主題物而不錯過關鍵信息。

3.3 絢麗的配色

配色在ui設計中的重要性不言而喻，在ui設計中的配色都一般是鄰近色或者是對比色，無論是深色系還是淺色系的配色都是參照了以下四點。1、整體色調要協調統一。2、配色要有重點色。3、注意色彩平衡。4、對立色的調和

3.3.1整體色調要協調統一

先確定大體色，是偏向冷色調還是暖色調，以主色為參考進行配色，這樣可以基礎的保證整體色調協調

3.3.2配色要有重點色

選取一個重點色，重點色是除主題色以外的顏色，可以說它是非常重要的視覺焦點。因此在配色上主題色形成強烈對比，它可以是主色的對比色、互補色等，使其能跳脫于主色的色彩。重點色所用的面積比較小，只要在焦點領域運用上重點色，其本身就有著聚焦的作用。有時候強調色還扮演著襯托色的角色。

3.3.3注意色彩平衡

色彩平衡指的是顏色的明度，飽和度。高明度的顏色更亮，可以使畫面空間感很強，比如黃色。低明度的顏色則會給人沉穩低調的感覺，比如藍色。飽和度和明度的變化會直接給用戶不同的感受，哪怕色系是一樣，得到的效果也不一樣，但是在設計中，高明度，高飽和度的顏色往往是首選，因為視覺沖擊力會很強。

3.3.4對立色的調和

其實一般來說ui設計都會以黑白灰為主，然后搭配上顏色豐富的插畫，這樣視覺效果本身就很突出了。因為黑白灰屬于中性色，它們不帶任何正面或者負面的感情色彩。但是一旦界面不說黑白灰，設計師往往會結合主題色修改插畫的顏色，比如調整主題物對立色的面積，添加對立色等等。

四、主題插畫

主題插畫的誕生就是人們對情感關懷的需求上升，需要通過不同的插畫，不同的窗口去抒發自己的情感，主題插畫在人文關懷上走的越來越遠，不再是單一的賣產品，畫插畫，現在更注重的是情感交流。簡介的ui設計插畫不代表簡單的插畫，根據不同的用戶需要，專屬定制屬于自己的界面設計。

五、結束語

隨著科技的不斷發展，插畫在ui設計中的形式逐漸多樣化，風格也隨著不同的需求廣闊化，我們所看到的不再是冰冷的界面，更多的是情感的慰藉，設計師要將科技變得人性化。

參考文獻：

[1]鄧朝暉.UI設計中的配色及應用[J].電腦編程技巧與維護，2020（01）：140-141+152.

[2]王佳.插畫在手機UI界面設計中的應用[J].科技創新與應用，2019（07）：105-106.

[3].2018年UI的13個主要設計趨勢[J].計算機與網絡，2018，44（17）：38-41.

[4]鄧麗娟.UI扁平化設計中美學原理的應用探究[J].科技經濟導刊，2020，28（06）：149.

[5]鄧朝暉.用戶界面（UI）圖標設計研究[J].辦公自動化，2020，25（03）：63-64.

[6]鄧朝暉.UI設計中的配色及應用[J].電腦編程技巧與維護，2020（01）：140-141+152.

[7]蔣子杰.UI設計中扁平化風格的發展方向探討[J].大眾文藝，2020（01）：53-54.

[8]陶潔.視覺傳達設計在移動UI界面設計中的應用分析[J].科學技術創新，2019（35）：65-66.

[9]張毅. 視覺傳達設計在移動UI界面設計中的應用與現狀[C]. 中國教育發展戰略學會教育教學創新專業委員會.2019全國教育教學創新與發展高端論壇論文集（卷十一）.中國教育發展戰略學會教育教學創新專業委員會：中國教育發展戰略學會教育教學創新專業委員會，2019：8-10.