目的：對(duì)插畫(huà)在APP（應(yīng)用程序） GUI（用戶(hù)圖形界面）中的運(yùn)用進(jìn)行分析。方法：從市場(chǎng)競(jìng)爭(zhēng)、用戶(hù)需求及插畫(huà)本身的作用分析插畫(huà)在APP GUI中運(yùn)用的原因，以及插畫(huà)在APP GUI中運(yùn)用所帶來(lái)的效果，并且總結(jié)在APP GUI中運(yùn)用的插畫(huà)的特點(diǎn)。結(jié)論：插畫(huà)在APP GUI中的運(yùn)用可以有效地提高產(chǎn)品的用戶(hù)體驗(yàn)，是界面設(shè)計(jì)師有意識(shí)地提高界面質(zhì)量的工作內(nèi)容之一。界面設(shè)計(jì)師在合適的情況下，運(yùn)用插畫(huà)達(dá)到預(yù)期的界面體驗(yàn)效果。而插畫(huà)在APP界面中進(jìn)行運(yùn)用，也必須符合界面設(shè)計(jì)的功能性和有效性的要求。

引言

在目前的手機(jī)App界面中，插畫(huà)元素的出鏡率越來(lái)越高。打開(kāi)“淘點(diǎn)點(diǎn)”進(jìn)行點(diǎn)餐的時(shí)候，首先會(huì)有帶有插畫(huà)元素的閃屏來(lái)傳達(dá)近期的促銷(xiāo)活動(dòng)或是某個(gè)節(jié)日的信息；“數(shù)據(jù)加載中”的界面往往配有小動(dòng)畫(huà)或者插畫(huà)畫(huà)面；數(shù)據(jù)加載失敗時(shí)，會(huì)出現(xiàn)應(yīng)景的插畫(huà)畫(huà)面，等等。插畫(huà)元素在APP界面的大量使用，并非個(gè)例，大部分移動(dòng)APP都開(kāi)始重視插畫(huà)在GUI中的作用，并進(jìn)行恰當(dāng)?shù)倪\(yùn)用。

1.插畫(huà)應(yīng)用于APP GUI的背景

伴隨IT行業(yè)的發(fā)展，APP市場(chǎng)的競(jìng)爭(zhēng)也愈演愈烈，尤其是移動(dòng)互聯(lián)網(wǎng)產(chǎn)業(yè)中，各具特色的APP層出不窮。對(duì)于APP開(kāi)發(fā)者來(lái)說(shuō)，想做到獨(dú)具特色的APP卻變得越來(lái)越困難。在各種APP應(yīng)用領(lǐng)域（如照娛樂(lè)、互動(dòng)、購(gòu)物、新聞、飲食等），不論開(kāi)發(fā)者涉足哪一領(lǐng)域，在該領(lǐng)域中都已有一些高質(zhì)量APP競(jìng)爭(zhēng)對(duì)手。面對(duì)著如此激烈的的競(jìng)爭(zhēng)局面，APP的開(kāi)發(fā)者也越來(lái)越重視用戶(hù)體驗(yàn)變，并在產(chǎn)品（APP）開(kāi)發(fā)的整個(gè)過(guò)程中強(qiáng)調(diào)對(duì)用戶(hù)體驗(yàn)的重視。對(duì)用

戶(hù)而言，產(chǎn)品的多樣化使他們有了更大的選擇空間。在同類(lèi)、功能相近的幾款產(chǎn)品中，更好的用戶(hù)體驗(yàn)將更容易被用戶(hù)接受，因此具有更高質(zhì)量GUI的App產(chǎn)品也必然更能受到用戶(hù)的青睞。對(duì)于開(kāi)發(fā)APP的企業(yè)而言，為了使產(chǎn)品獲得更多的用戶(hù)，企業(yè)必然更加重視用戶(hù)需求，所以提高APP產(chǎn)品的界面設(shè)計(jì)的質(zhì)量也將成為企業(yè)APP設(shè)計(jì)部門(mén)的一大任務(wù)。

插畫(huà)作為視覺(jué)設(shè)計(jì)中的圖形語(yǔ)言，是最直接也是最能引起用戶(hù)的共鳴的關(guān)鍵元素。UI（User Interface，用戶(hù)界面）設(shè)計(jì)師越來(lái)越傾向于利用插畫(huà)這一直觀的圖形語(yǔ)言的元素，進(jìn)行界面中視覺(jué)表現(xiàn)力和視覺(jué)表達(dá)效果的深層的探索與發(fā)掘。第一，插畫(huà)最早期、最主要的功能是信息傳達(dá)，所以設(shè)計(jì)師多采取以圖輔文，或者將信息進(jìn)行提取后，再用插畫(huà)進(jìn)行傳達(dá)，這樣的信息傳達(dá)方式不僅使得所傳達(dá)的信息更加準(zhǔn)確，同時(shí)也更加生動(dòng)，有助于用戶(hù)的接受和理解，從而引起用戶(hù)的共鳴和認(rèn)同；另一方面，插畫(huà)能夠激發(fā)用戶(hù)進(jìn)行想象、聯(lián)想，使得文字所傳達(dá)的內(nèi)容更加生動(dòng)，并符合用戶(hù)的實(shí)際生活感受。此外，用戶(hù)若長(zhǎng)時(shí)間的進(jìn)行文字閱讀，容易產(chǎn)生疲倦感，一些用戶(hù)甚至在閱讀文字之前更傾向于通過(guò)配圖來(lái)了解文字內(nèi)容的主題和中心思想。輔助文字的插畫(huà)不僅可以緩解閱讀的疲倦感，加深用戶(hù)對(duì)所傳達(dá)的信息的印象，而且可以勾起用戶(hù)文字內(nèi)容的興趣，引導(dǎo)他們對(duì)信息進(jìn)行更深層次的閱讀和理解。第二，插畫(huà)相較于其他的抽象幾何圖形和創(chuàng)意圖案，能夠更加快速吸引用戶(hù)的注意力。設(shè)計(jì)師通過(guò)對(duì)插畫(huà)畫(huà)面的色彩、造型等因素的合理控制，可以快速地吸引用戶(hù)的目光，使用戶(hù)的目光在畫(huà)面上停留，并且與畫(huà)面進(jìn)行“交流”。第三，插畫(huà)本身就具有裝飾美化的作用。插畫(huà)元素讓平淡無(wú)味的界面增添美麗的色彩，增添了界面的視覺(jué)吸引力，用戶(hù)從中獲得了別具一格的視覺(jué)美感。第四，插畫(huà)為強(qiáng)調(diào)目的結(jié)果的界面增添了藝術(shù)情感。插畫(huà)的藝術(shù)價(jià)值還體現(xiàn)在藝術(shù)欣賞這方面，能傳達(dá)一定的藝術(shù)情感，創(chuàng)作過(guò)程更加被重視。界面設(shè)計(jì)作為一種商業(yè)設(shè)計(jì)，更強(qiáng)調(diào)利益、目的性，更重視信息的有效傳達(dá)。用戶(hù)作為具有復(fù)雜思想情感的對(duì)象，不可能僅僅滿(mǎn)足于信息的傳達(dá)，而插畫(huà)所傳達(dá)出的藝術(shù)情感使得用戶(hù)的這一情感需求得以滿(mǎn)足。

所以，將插畫(huà)合理地應(yīng)用于APP界面中，可以有效地提高APP產(chǎn)品的質(zhì)量，迎合用戶(hù)對(duì)APP的需求，使企業(yè)的產(chǎn)品擁有更多的用戶(hù)。這也是插畫(huà)在APP界面的出鏡率也越來(lái)越高的原因。

2.插畫(huà)在APP圖形界面中的運(yùn)用的目的

界面設(shè)計(jì)師在APP界面中運(yùn)用插畫(huà)元素，主要有以下幾種情況：

第一，以信息的有效傳達(dá)為目的。例如，“淘寶”手機(jī)客戶(hù)端在促銷(xiāo)期間使用的“6.6大匯聚”閃屏中使用了讓用戶(hù)容易聯(lián)想到“促銷(xiāo)”的紅色系和黃色系的色彩搭配，并運(yùn)用俯視畫(huà)面人物的角度所產(chǎn)生的透視效果來(lái)突出“免單”這一較強(qiáng)吸引力的文字內(nèi)容。這種插畫(huà)的運(yùn)用，能在短短的幾秒鐘內(nèi)，向用戶(hù)傳達(dá)具有足夠吸引力的促銷(xiāo)的信息，為促銷(xiāo)活動(dòng)引來(lái)更多的流量。又如“百度糯米”手機(jī)客戶(hù)端在應(yīng)用首次開(kāi)啟時(shí)的“新手導(dǎo)航”，其利用年輕人所熟知的“蜘蛛俠”、“閃電俠”的形象，使文案“標(biāo)簽更簡(jiǎn)潔”“外賣(mài)登場(chǎng) 吃貨速遞”等更加生動(dòng)形象，更加貼近用戶(hù)的生活情景。

第二，以安撫用戶(hù)情緒為目的。諾曼在《情感化設(shè)計(jì)》一書(shū)中，分析了視覺(jué)美感、情感、用戶(hù)體驗(yàn)三者之間的潛在的系，并提出了“美觀的物品更好用”、“針對(duì)情感的多樣性進(jìn)行設(shè)計(jì)”等觀點(diǎn)。界面設(shè)計(jì)師對(duì)這種潛在關(guān)系的重視可以從他們所設(shè)計(jì)的界面中得到體現(xiàn)。例如，“淘點(diǎn)點(diǎn)”手機(jī)客戶(hù)端在數(shù)據(jù)加載的界面中，采用“淘點(diǎn)點(diǎn)”卡通人物形象騎著電瓶車(chē)努力前行的動(dòng)態(tài)GIF插圖，安撫用戶(hù)因?yàn)榈却龝r(shí)間過(guò)長(zhǎng)產(chǎn)生的不耐煩和焦躁情緒，而騎電瓶車(chē)努力前行十分符合用戶(hù)對(duì)生活中送外賣(mài)人員的總體印象，從而引起用戶(hù)的情感共鳴；另外，APP在數(shù)據(jù)加載失敗、無(wú)法定位用戶(hù)位置等情況發(fā)生時(shí)，容易引起用戶(hù)操作的挫敗感，而界面設(shè)計(jì)師在這些界面中采用系列插畫(huà)，可以降低用戶(hù)負(fù)面情緒的影響程度，并用文字信息告訴用戶(hù)當(dāng)前情況和可用的解決方案，給予用戶(hù)及時(shí)的反饋，博取用戶(hù)對(duì)APP產(chǎn)品的好感和信任感。

第三，以增加界面的趣味性為目的。在“百度糯米”手機(jī)客戶(hù)端的首頁(yè)的系列icons中，界面設(shè)計(jì)師以插畫(huà)為表現(xiàn)形式設(shè)計(jì)了系列icon圖標(biāo)，相對(duì)于常規(guī)的icon圖標(biāo)，這一系列圖標(biāo)使得整體界面一下子活潑有趣起來(lái)，更加吸引用戶(hù)的眼球。

3.APP界面設(shè)計(jì)中的插畫(huà)的特點(diǎn)

近年來(lái)，無(wú)論是網(wǎng)站設(shè)計(jì)還是應(yīng)用程序設(shè)計(jì)，扁平化和極簡(jiǎn)的設(shè)計(jì)正在成為新的趨勢(shì)。由于網(wǎng)頁(yè)、APP等需要適應(yīng)多種平臺(tái)的不同的屏幕尺寸，扁平化的設(shè)計(jì)可以很好的駕馭不同尺寸的屏幕。因此，應(yīng)用于APP界面的插畫(huà)不得不服從界面設(shè)計(jì)的總體趨勢(shì)和硬性的設(shè)計(jì)規(guī)范。APP界面設(shè)計(jì)中的插畫(huà)有如下特點(diǎn)：

設(shè)計(jì)簡(jiǎn)單。這來(lái)自于扁平化設(shè)計(jì)的“簡(jiǎn)單設(shè)計(jì)元素”原則。在扁平化設(shè)計(jì)之前，處于主導(dǎo)的是擬物化設(shè)計(jì)。擬物化設(shè)計(jì)在于模仿現(xiàn)實(shí)世界的物品，其一般采用紋理、透視、陰影等來(lái)裝飾。然而，問(wèn)題在于數(shù)字設(shè)備更是為了可用性而設(shè)計(jì)的。而扁平化正設(shè)計(jì)是對(duì)數(shù)字設(shè)備的UI設(shè)計(jì)領(lǐng)域，對(duì)可用性的實(shí)施。扁平化設(shè)計(jì)的核心在于去裝飾化，元素被設(shè)計(jì)成最為原始的、最為簡(jiǎn)潔的形式。扁平化的元素使得在小尺寸的數(shù)字設(shè)備中，如智能手機(jī)，得以廣泛應(yīng)用，其使得界面干凈利索，便于用戶(hù)操作，為用戶(hù)提供了良好的操作體驗(yàn)。

注重色彩。相對(duì)于其他設(shè)計(jì)風(fēng)格，扁平化設(shè)計(jì)通常會(huì)使用更加明亮、更炫麗的顏色，從而體現(xiàn)一種充滿(mǎn)活力、時(shí)尚和新穎。扁平化設(shè)計(jì)往往還會(huì)配備更多的色調(diào)，并且很少會(huì)使用到三原色（正紅、正藍(lán)、正黃）。顏色雖多，但并不意味著顏色的濫用。扁平化設(shè)計(jì)中采用的顏色往往使用色調(diào)和飽和度相近的顏色。

迎合大眾的審美，必須是“好看的、可愛(ài)的”。盡管每個(gè)APP產(chǎn)品有自己的目標(biāo)用戶(hù)群，但是整體設(shè)計(jì)風(fēng)格必須迎合多數(shù)用戶(hù)的審美需求。區(qū)別于“藝術(shù)美”更強(qiáng)調(diào)個(gè)人主觀的審美趣味和其隱含時(shí)代的思想內(nèi)涵，這里的“好看的、可愛(ài)的”更傾向于符合大眾的、更通俗、不會(huì)因?yàn)闀r(shí)代潮流思想和審美趣味的變遷而改變的一種對(duì)外觀美的定義。比如，梵高的藝術(shù)在其所在那個(gè)年代并不被列入美的范疇，而隨著時(shí)代審美和時(shí)代思想的變遷，他的作品稱(chēng)為一種別具一格的藝術(shù)美，相比較而言，玫瑰花圖案的藝術(shù)造詣遠(yuǎn)不及梵高的《向日葵》，但是它幾乎在每個(gè)時(shí)代，對(duì)于各個(gè)階層的人而言，都是“好看的、可愛(ài)的”。

結(jié)語(yǔ)

隨著APP界面設(shè)計(jì)的進(jìn)一步發(fā)展，插畫(huà)在界面設(shè)計(jì)中的運(yùn)用將越來(lái)越成熟。在界面設(shè)計(jì)的可行的范圍內(nèi)，設(shè)計(jì)師也將探索插畫(huà)在界面設(shè)計(jì)中運(yùn)用的新的可能性和更適宜有效的插畫(huà)形式。

（作者單位：浙江理工大學(xué)藝術(shù)與設(shè)計(jì)學(xué)院）