插畫在ui界面中的應(yīng)用研究

王菡麟

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

關(guān)鍵詞：插畫;ui設(shè)計;平面設(shè)計

前言

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

一、ui設(shè)計發(fā)展趨勢

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

二、插畫在ui設(shè)計中的特點

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

2.1風(fēng)格扁平化

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

2.2故事性提升

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

2.3情感性的提升

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

三、插畫在ui設(shè)計中的發(fā)展趨勢

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

3.1動態(tài)插畫的運用

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

3.2海報式插畫

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

3.3 絢麗的配色

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

3.3.1整體色調(diào)要協(xié)調(diào)統(tǒng)一

先確定大體色，是偏向冷色調(diào)還是暖色調(diào)，以主色為參考進行配色，這樣可以基礎(chǔ)的保證整體色調(diào)協(xié)調(diào)

3.3.2配色要有重點色

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

3.3.3注意色彩平衡

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

3.3.4對立色的調(diào)和

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

四、主題插畫

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

五、結(jié)束語

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

參考文獻：

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

[2]王佳.插畫在手機UI界面設(shè)計中的應(yīng)用[J].科技創(chuàng)新與應(yīng)用，2019（07）：105-106.

[3].2018年UI的13個主要設(shè)計趨勢[J].計算機與網(wǎng)絡(luò)，2018，44（17）：38-41.

[4]鄧麗娟.UI扁平化設(shè)計中美學(xué)原理的應(yīng)用探究[J].科技經(jīng)濟導(dǎo)刊，2020，28（06）：149.

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

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

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

[8]陶潔.視覺傳達設(shè)計在移動UI界面設(shè)計中的應(yīng)用分析[J].科學(xué)技術(shù)創(chuàng)新，2019（35）：65-66.

[9]張毅. 視覺傳達設(shè)計在移動UI界面設(shè)計中的應(yīng)用與現(xiàn)狀[C]. 中國教育發(fā)展戰(zhàn)略學(xué)會教育教學(xué)創(chuàng)新專業(yè)委員會.2019全國教育教學(xué)創(chuàng)新與發(fā)展高端論壇論文集（卷十一）.中國教育發(fā)展戰(zhàn)略學(xué)會教育教學(xué)創(chuàng)新專業(yè)委員會：中國教育發(fā)展戰(zhàn)略學(xué)會教育教學(xué)創(chuàng)新專業(yè)委員會，2019：8-10.