插畫在APP用戶圖形界面中的運(yùn)用

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

引言

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

結(jié)語

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

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