王佳

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

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

中圖分類(lèi)號(hào)：TN929.53? ? ? ?文獻(xiàn)標(biāo)志碼：A? ? ? ? ?文章編號(hào)：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（用戶(hù)界面）的簡(jiǎn)稱(chēng)。界面是介于用戶(hù)與硬件之間用于互動(dòng)的媒介。是人機(jī)溝通交流的橋梁，用來(lái)進(jìn)行信息的傳達(dá)，直接影響用戶(hù)的體驗(yàn)感受。在科學(xué)技術(shù)迅速發(fā)展的今天，人們對(duì)時(shí)尚、審美、趣味的不斷追求促進(jìn)了手機(jī)UI領(lǐng)域的發(fā)展，為了更好的滿(mǎn)足用戶(hù)需求，在實(shí)用性原則的基礎(chǔ)上，高效智能、簡(jiǎn)潔、易用已成為智能手機(jī)UI界面設(shè)計(jì)的基本原則。為了更好地滿(mǎn)足用戶(hù)需求，為用戶(hù)提供良好順暢的操作體驗(yàn)，提高UI界面的美觀性與交互性顯得尤為重要，更是UI設(shè)計(jì)師需要不懈努力和探索的主要方向，進(jìn)而才能促進(jìn)UI設(shè)計(jì)領(lǐng)域的長(zhǎng)遠(yuǎn)發(fā)展。

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

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

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

2.2 承載充足的信息量

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

2.3 滿(mǎn)足用戶(hù)的情感需求

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

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

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

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

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

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

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

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

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

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

4.1 契合主題的故事插圖

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

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

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

5 結(jié)束語(yǔ)

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

參考文獻(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]王凡.從“少即是多”中探究移動(dòng)端扁平化UI界面設(shè)計(jì)[D].廣東工業(yè)大學(xué)，2015，05.