插畫在APP用戶圖形界面中的運用

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

引言

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

1.插畫應用于APP GUI的背景

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

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

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

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

2.插畫在APP圖形界面中的運用的目的

界面設計師在APP界面中運用插畫元素，主要有以下幾種情況：

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

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

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

3.APP界面設計中的插畫的特點

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

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

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

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

結(jié)語

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

（作者單位：浙江理工大學藝術與設計學院）