插畫在手機(jī)UI界面設(shè)計(jì)中的應(yīng)用

王佳

摘? 要：隨著手機(jī)的普及和智能化，用戶對手機(jī)UI界面設(shè)計(jì)的美觀度要求也越來越高。文章通過分析插畫在手機(jī)UI界面設(shè)計(jì)中的優(yōu)勢，結(jié)合具體案例探究UI界面設(shè)計(jì)的創(chuàng)新思路和方法，而技術(shù)與插畫藝術(shù)相結(jié)合的UI設(shè)計(jì)，能夠給用戶帶來良好的交互體驗(yàn)。

關(guān)鍵詞：插畫;UI界面設(shè)計(jì);交互

中圖分類號：TN929.53? ? ? ?文獻(xiàn)標(biāo)志碼：A? ? ? ? ?文章編號：2095-2945（2019）07-0105-02

Abstract： With the popularity and intelligence of mobile phones， users have higher and higher requirements for the beauty of mobile UI interface design. This paper analyzes the advantages of illustration in mobile phone UI interface design， combined with specific cases to explore the innovative ideas and methods of UI interface design， and the combination of technology and illustration art of UI design， can bring a good interactive experience to users.

Keywords： illustration; UI interface design; interaction

1 UI的定義及發(fā)展

UI即User Interface（用戶界面）的簡稱。界面是介于用戶與硬件之間用于互動的媒介。是人機(jī)溝通交流的橋梁，用來進(jìn)行信息的傳達(dá)，直接影響用戶的體驗(yàn)感受。在科學(xué)技術(shù)迅速發(fā)展的今天，人們對時(shí)尚、審美、趣味的不斷追求促進(jìn)了手機(jī)UI領(lǐng)域的發(fā)展，為了更好的滿足用戶需求，在實(shí)用性原則的基礎(chǔ)上，高效智能、簡潔、易用已成為智能手機(jī)UI界面設(shè)計(jì)的基本原則。為了更好地滿足用戶需求，為用戶提供良好順暢的操作體驗(yàn)，提高UI界面的美觀性與交互性顯得尤為重要，更是UI設(shè)計(jì)師需要不懈努力和探索的主要方向，進(jìn)而才能促進(jìn)UI設(shè)計(jì)領(lǐng)域的長遠(yuǎn)發(fā)展。

2 插畫在UI界面設(shè)計(jì)中的優(yōu)勢

2.1 強(qiáng)調(diào)故事性和趣味性

優(yōu)秀的UI界面設(shè)計(jì)能夠充分吸收和借鑒插畫藝術(shù)的表現(xiàn)技法和形式，進(jìn)而起到營造氛圍、渲染情緒、描摹環(huán)境的作用，有一定的故事性或者趣味性，進(jìn)而以情動人，以此來增加用戶的視覺愉悅感。具體表現(xiàn)為以下幾方面，首先，插畫可以準(zhǔn)確的再現(xiàn)故事情節(jié)，要知道觀眾總會被自己熟悉的事物所吸引，插畫風(fēng)格的UI界面設(shè)計(jì)則充分抓住這點(diǎn)，用圖片代替文字以給人最直觀的感受。其次，插畫風(fēng)格可通過聯(lián)想想象、夸張幽默、象征隱喻等形式來表現(xiàn)多種藝術(shù)形式，進(jìn)而提升用戶的視覺體驗(yàn)與審美素養(yǎng)。此外，受波普藝術(shù)的影響，插畫風(fēng)格的UI界面設(shè)計(jì)有時(shí)也融入一些流行的社會熱點(diǎn)或者網(wǎng)絡(luò)流行標(biāo)語，契合大眾心理并帶有一定趣味性。如在圣誕節(jié)、春節(jié)等節(jié)慶時(shí)推出的界面設(shè)計(jì)，或以大眾熟知的動漫形象、流行用語為主題推出的界面設(shè)計(jì)，都在一定程度上引發(fā)了觀眾的情感共鳴。

2.2 承載充足的信息量

插畫介入手機(jī)UI界面的設(shè)計(jì)能夠承載更多的信息量，要知道手機(jī)APP的作用是將主要信息直觀形象的傳遞給受眾，但人作為信息的接收者，有可能因?yàn)檎J(rèn)知習(xí)慣、自身能力、教育水平、文化背景等差異在理解上產(chǎn)生偏差，符號式的表達(dá)方式雖然簡潔、實(shí)用，但不能保證用戶對全新的界面，特別是其中的圖標(biāo)準(zhǔn)確無誤的讀取和理解。而心理學(xué)實(shí)驗(yàn)發(fā)現(xiàn)，接近實(shí)物的具象圖標(biāo)更符合用戶的經(jīng)驗(yàn)認(rèn)知，而且更容易識別，所以插畫風(fēng)格的UI界面設(shè)計(jì)顯然更適合進(jìn)入商業(yè)市場的手機(jī)APP應(yīng)用。它注重將信息充分展現(xiàn)，進(jìn)而使用戶的理解更為順暢，認(rèn)識并熟悉該產(chǎn)品。例如百度糯米七夕節(jié)的分類圖標(biāo)，采用了寫實(shí)的風(fēng)格，將傳統(tǒng)元素融入圖標(biāo)設(shè)計(jì)，既突出中國特色，又有效傳達(dá)七夕節(jié)主題活動訊息。

2.3 滿足用戶的情感需求

一個成熟的APP產(chǎn)品，除了在使用功能上滿足用戶的需求外，還要在更高層次上體現(xiàn)對用戶“社會需求欲望上的態(tài)度體驗(yàn)”的關(guān)懷，即通過豐富、細(xì)致的圖像語言，引起用戶情感上的共鳴，使用戶對該APP產(chǎn)品由使用上的“需要”變成情感上的“想要”。此外插畫本身就具有裝飾美化的作用，插畫元素為原本平淡的APP界面增添了美麗的色彩，強(qiáng)化了界面的視覺吸引力，同時(shí)也給用戶帶來了美的藝術(shù)享受。UI界面設(shè)計(jì)作為一種商業(yè)競爭手段，更注重信息的有效傳達(dá)。用戶不可能僅僅滿足于接受信息，而插畫所傳達(dá)出的藝術(shù)情感使得用戶的精神需求得以滿足。例如淘寶在無網(wǎng)狀態(tài)下，顯示一幅可愛的插畫要比單純的顯示文字給人的感覺好得多，也可以盡可能的減輕用戶的焦慮感。

3 插畫在手機(jī)UI界面設(shè)計(jì)中的廣泛應(yīng)用

插畫在手機(jī)APP界面的大量使用并非個例，大部分移動APP都開始重視其在UI界面設(shè)計(jì)中的作用，在準(zhǔn)確傳達(dá)信息的同時(shí)有效提高產(chǎn)品的用戶體驗(yàn)。作為UI設(shè)計(jì)師要學(xué)會用UI的思維做插畫，用插畫的技法做UI，將二者進(jìn)行跨界連接，創(chuàng)造與眾不同的UI界面。目前應(yīng)用于手機(jī)UI界面設(shè)計(jì)的插畫風(fēng)格種類繁多，下面我們以最典型的幾種風(fēng)格為例來做具體分析。

3.1 扁平插畫風(fēng)格UI界面

扁平風(fēng)格的插畫是目前UI界面設(shè)計(jì)比較流行的設(shè)計(jì)風(fēng)格，通常以簡潔大方的表現(xiàn)形式，去掉漸變、投影和紋理，僅用漂亮的排版、簡單的圖標(biāo)和形狀、充滿活力的顏色來幫助構(gòu)建視覺層次，更重要的是能夠深入地關(guān)注于易用性上，符合年青一代的審美趣味。這里最具代表性的是蘋果公司研發(fā)的IOS系統(tǒng)的UI界面設(shè)計(jì)[1]（P42），將其中的圖標(biāo)、界面等元素設(shè)計(jì)成簡潔、明亮的效果，其中的天氣、短信、撥號等功能圖標(biāo)，都是在原有基礎(chǔ)上簡化提煉設(shè)計(jì)而成，在保證圖標(biāo)直觀富有趣味的基礎(chǔ)上提高了操作的流暢性、輕快感，為用戶帶了最佳的體驗(yàn)感受，此外蘋果系統(tǒng)的配色也十分考究，扁平插畫風(fēng)格的圖標(biāo)設(shè)計(jì)能使用戶最大限度的產(chǎn)生好感和共鳴，進(jìn)而引發(fā)用戶自發(fā)的去理解圖標(biāo)信息。例如Apple Safari圖標(biāo)就是一個指南針的形象，整體配色以藍(lán)色為主，能夠凸顯一種神秘感，在使用Safari瀏覽信息時(shí)就好比是在知識的海洋里探尋無限奧秘，無論在意向還是色彩上都達(dá)到了一種高度融合，這才使扁平插畫風(fēng)格發(fā)揮到最優(yōu)的效果。

3.2 傳統(tǒng)手繪插畫風(fēng)格UI界面

傳統(tǒng)手繪插畫具有豐富的表現(xiàn)力，可根據(jù)材料、畫筆的不同來表現(xiàn)不同機(jī)理質(zhì)感的畫面;其次，插畫設(shè)計(jì)有一定的隨機(jī)性，在其勾線、上色、成稿的過程中都會產(chǎn)生一些意想不到的藝術(shù)效果;此外，手繪插畫往往更加注重傳統(tǒng)元素和文化的融合，能夠讓用戶更多的產(chǎn)生情感上的共鳴，尤其是在一些傳統(tǒng)節(jié)日或者地方特色類APP設(shè)計(jì)中，傳統(tǒng)手繪插畫更易表現(xiàn)這些特征。以2016年主題桌面獲獎作品《東方印象》為例分析[2]（P36），主要運(yùn)用的是傳統(tǒng)水墨插畫來表現(xiàn)UI界面，鎖屏界面主要運(yùn)用的是文房四寶;而主屏的圖標(biāo)設(shè)計(jì)也是取自傳統(tǒng)元素的隱含寓意，天氣的圖標(biāo)設(shè)計(jì)是油紙傘，以墨色打底暈開紙傘，寓意天氣狀況陰晴不定。計(jì)算器的圖標(biāo)是古代的算盤，十分具有中國傳統(tǒng)特色，整體的界面設(shè)計(jì)十分契合主題，還可利用水墨的動態(tài)效果來做進(jìn)一步的交互動畫、全息投影，讓用戶全方位的感受傳統(tǒng)插畫下的UI界面的獨(dú)特魅力。

3.3 半立體插畫風(fēng)格的UI界面

半立體插畫也叫2.5維插畫，主要以二維的手法來表現(xiàn)三維效果，在目前手機(jī)UI界面設(shè)計(jì)中，立體插畫風(fēng)格的出鏡率越來越高，可以說在視覺上給用戶帶來了一種全新的視覺體驗(yàn)，通常以簡潔概括的色塊來表現(xiàn)三維圖標(biāo)的插畫效果，讓用戶更為直觀的理解主題APP，以“淘點(diǎn)點(diǎn)”點(diǎn)餐系統(tǒng)里的紅包搖一搖界面為例，整體背景畫面是一塊紅藍(lán)相間的桌布，一圈縫紉線的加入令原本抽象的桌布有了質(zhì)感，桌布上方是一個放入手機(jī)模型磁盤，桌布下方刀、叉、勺、筷子一次排開，全部采用半立體效果表現(xiàn)，讓餐具的質(zhì)感更加突出但和真實(shí)的餐具又有一定差距，這種設(shè)計(jì)既可以簡化制作過程令A(yù)PP操作流暢，同時(shí)又能給用戶帶來獨(dú)特的視覺感受，可謂是在扁平化與傳統(tǒng)手繪插畫之間找尋的一種折中的表現(xiàn)形式，但不管何種表現(xiàn)手法，都要根據(jù)具體情況具體應(yīng)用。

4 插畫和手機(jī)UI界面結(jié)合的創(chuàng)新點(diǎn)

4.1 契合主題的故事插圖

在這個科技至上的時(shí)代，人與人之間的交流越來越少，人們的情感交流和體驗(yàn)更多地依賴于手機(jī)、電腦等智能設(shè)備。有故事性的UI界面設(shè)計(jì)，能夠系統(tǒng)地串聯(lián)起產(chǎn)品的精神內(nèi)涵。插畫風(fēng)格的界面設(shè)計(jì)可根據(jù)APP主題變化風(fēng)格，可以是浪漫唯美、靚麗時(shí)尚，也可以懷舊溫馨、水墨古風(fēng)……這些風(fēng)格可以滿足不同認(rèn)知角度和層次的用戶需求。而且正是由于插畫風(fēng)格的細(xì)化，使其能夠滿足“人性內(nèi)在固有尺度在不同時(shí)期與階段”的情感需求。比起簡約的符號化的界面設(shè)計(jì)，富有感染力和表現(xiàn)力的插畫主題的UI界面設(shè)計(jì)，可以把用戶的心靈訴求和體驗(yàn)完整而準(zhǔn)確的表現(xiàn)出來，而且極具故事性和趣味性的畫面能夠給用戶帶來無限遐想的空間，進(jìn)而凸顯不同APP的主題特色。

4.2 以人為本的交互體驗(yàn)

隨著科學(xué)技術(shù)的不斷發(fā)展，手機(jī)APP的界面設(shè)計(jì)已不滿足于靜態(tài)展示，帶有一定交互性質(zhì)的動態(tài)插畫更能強(qiáng)化這種趣味性，從而吸引人的注意力。這種動態(tài)的刺激，不僅能夠激發(fā)用戶的興趣，而且利用互動性還可加強(qiáng)用戶體驗(yàn)[3]（P17）。隨著技術(shù)的不斷進(jìn)步，這種猶如動畫短片一樣的插畫界面設(shè)計(jì)逐漸被大眾所接受。動態(tài)插畫承載的信息量更為豐富多樣，甚至可以和音樂、視頻短片相結(jié)合，通過多媒體更為全面地展現(xiàn)不同APP的主要特征，它更強(qiáng)調(diào)人的參與性與互動性，讓用戶能夠快速掌握APP的使用，利用最短的時(shí)間獲取更多有趣豐富的信息，降低用戶理解上的歧義，將手機(jī)APP的功能特性發(fā)揮到最大。

5 結(jié)束語

隨著科技的不斷發(fā)展，智能手機(jī)功能的不斷完善，使得插畫在UI界面設(shè)計(jì)中的應(yīng)用更為多樣化豐富化。當(dāng)今社會人們對電子產(chǎn)品的偏愛已然成了一種趨勢，插畫風(fēng)格的UI界面設(shè)計(jì)讓原本冰冷的圖標(biāo)變得易懂且富有趣味，它就好比是視覺觸發(fā)器，超越任何文化和語言的隔閡，瞬間傳遞大量信息。作為UI設(shè)計(jì)師，我們要善于利用科技的手段為設(shè)計(jì)服務(wù)，進(jìn)而更好的滿足用戶需求。

參考文獻(xiàn)：

[1]仇慧琴.田世彬.智能手機(jī)UI界面設(shè)計(jì)分析[J].赤峰學(xué)院學(xué)報(bào)，2016，08.

[2]周玉成.韓思凡.黃蓉.傳統(tǒng)元素在UI界面設(shè)計(jì)中的應(yīng)用[J].科技視界，2018，01.

[3]王凡.從“少即是多”中探究移動端扁平化UI界面設(shè)計(jì)[D].廣東工業(yè)大學(xué)，2015，05.