插畫在UI設(shè)計中的重要性探析

譚坤 張蕓 康海英

摘要：在UI設(shè)計中，使用插畫來輔助傳達信息，無疑更加直接到位。使得界面設(shè)計更清晰，更時尚，也可以更加精準，更有表現(xiàn)力，往往廣泛應(yīng)用于頁面主題圖、網(wǎng)頁首圖和Banner、吉祥物和形象插畫、游戲化設(shè)計的頁面、講故事的輔助配圖、信息圖表、營銷和廣告圖、圖標和裝飾性內(nèi)容和社交媒體頁面中。在界面設(shè)計中應(yīng)用插畫連接了設(shè)計，作為內(nèi)容呈現(xiàn)，還帶著明顯的藝術(shù)化的屬性。在uI設(shè)計中起到越來越重要的作用。

關(guān)鍵詞：插畫;界面設(shè)計;品牌識別

中圖分類號：TB47 文獻標識碼：A 文章編號：1005-5312（2019）11-0031-02

插畫，illustration，源自于拉丁文，指照亮之意，插畫可以使文字變得更明確清晰。用以提升文字所給予瀏覽者的趣味性，使文字能更生動、更具象地活躍在讀者的印象中。在界面設(shè)計中插畫的重要性，早已遠遠地超過這個“照亮文字”的陪襯地位。它不但能突出主題，而且還會增強界面藝術(shù)設(shè)計的感染力。隨著移動終端應(yīng)用日益成為人們?nèi)粘Ｉ畹南M品，網(wǎng)頁、uI和動效設(shè)計中都紛紛應(yīng)用插畫。作為設(shè)計中最具有表現(xiàn)力的元素，一張插畫所傳遞的信息比文字更豐富。

一、插畫是表達界面設(shè)計原創(chuàng)性和獨特性的基礎(chǔ)

無論是印刷品、品牌設(shè)計還是uI界面，更加風(fēng)格化的插畫能夠?qū)⒉煌娘L(fēng)格和創(chuàng)意加入其中，在激烈的設(shè)計競爭中更容易因此脫穎而出。產(chǎn)品通過uI設(shè)計留住用戶才有市場轉(zhuǎn)化。在博客、新聞和Banner等網(wǎng)頁中使用插畫，也是明確了插畫可以根據(jù)內(nèi)容進行深度定制的優(yōu)勢，這種定制能讓內(nèi)容更加統(tǒng)一一致，更加符合產(chǎn)品目標，借助色彩、角色、環(huán)境甚至暗藏的隱喻，來吸引特定的用戶，達到品牌營銷的目的。

二、插畫通過直觀的視覺傳達精準的信息

人的視覺感知能力很強，看到圖片的一瞬間，也許還沒有來得及進行邏輯思考，但是大腦已經(jīng)接收到大量的信息和內(nèi)容。心理學(xué)研究表明，人類只需要大概0.1秒就可以感知到場景中絕大多數(shù)的視覺元素。視覺信息可以更快傳遞到大腦，而重要的信息，人類也通常會被固化為視覺圖像，而非文本化的記憶。文本需要依托可讀性設(shè)計，而圖片和插畫則會被直接識別。圖片和插畫更容易打破文化和語言隔閡，傳遞內(nèi)容含義。對于視障用戶、閱讀障礙用戶和兒童，圖片插畫更容易被理解。

三、插畫是標題和文本的重要“解釋”

雖然圖片一瞬問傳遞的信息很多，但是圖片在很多時候是無法提供精準而詳細的內(nèi)容。用戶依然需要文本來呈現(xiàn)清晰而可以被閱讀和記錄的內(nèi)容，界面中的文本是不可缺失的，尤其是界面設(shè)計的導(dǎo)航標題。在文本和標題已經(jīng)具備的情況下，經(jīng)過精心設(shè)計的插畫能夠幫助用戶理解，更清晰的記憶。在很多特定的領(lǐng)域，舉個例子比如說京東時尚類店面界面設(shè)計，插畫能夠借助色彩、圖形和形象來講述故事，強對比度的色彩、時尚造型人物插圖讓用戶更清晰強化服裝品牌概念，甚至強化信任感，而這是文本所不具備的。插畫能帶來強烈的情感連接和心理感應(yīng)。

四、插畫講述故事、傳遞情感、增加界面的溫度

故事是最令人難忘的內(nèi)容，劇情的走向和起承轉(zhuǎn)合會給人留下深刻的印象。而插畫則以清晰的形象將文字和意象勾連起來，無論是在網(wǎng)頁、uI設(shè)計還是內(nèi)容和體驗上，都有著足夠突出的體現(xiàn)。營造氛圍，渲染情緒，描摹環(huán)境，呈現(xiàn)角色，插畫讓故事更加鮮活、易于理解。在內(nèi)容制造上，有著難以替代的作用。[小時候我這樣看他]的H5刷爆了朋友圈，該款H5鎖定情感營銷，向受眾發(fā)起情感攻勢，才能最大程度留住目標用戶的關(guān)注，與他們進行深度溝通。界面設(shè)計中爸爸的插圖形象設(shè)計深入人心，這款手機H5應(yīng)用的引爆點在“情感交互”，喚起年輕群體心底對父親的愛，引發(fā)強烈共鳴，從而達到了非常好的引流效果。

五、插畫以情感吸引力代入用戶的情緒

人是情感動物，看似理性的外表之下，幾乎每個決定都是在情感和情緒的驅(qū)動下完成的。如果某個設(shè)計除了能夠幫你達成某個目標，能準確的傳遞產(chǎn)品信息，還能讓你感到身心愉悅，并且有急于分享的沖動，那么通常下一步就是將它收藏起來并且分享給朋友。而在諸多設(shè)計因素當中，插畫在撬動用戶情緒這一點上，有著無與倫比的效用——從線條、色彩到面部表情和曲線和動效，都在竭盡全力地為你闡述故事，營造氛圍，將你拉到故事和場景當中去。在產(chǎn)品和用戶之間建立了很強的代入感，品牌才能充分借助媒體資源的核心能量，并以豐富、有趣的內(nèi)容創(chuàng)意，全面調(diào)動用戶興趣和行動力，讓用戶在參與品牌營銷時，既有存在感，也有價值感。

六、插畫賦予設(shè)計以美學(xué)價值，更容易被接受

即使所有人都在分析和爭論產(chǎn)品的可用性和易用性，大家在對美的追求上，始終保持著一致的態(tài)度。優(yōu)秀的界面設(shè)計作品一定是集可用性和美觀性于一體的。一個設(shè)計是否具備可取性，是否能夠通過甲方、客戶和實際用戶，是每個設(shè)計者都需要面對，都力求做到最好的事情。精心設(shè)計的插畫在美學(xué)和風(fēng)格上更加扎實，風(fēng)格化的設(shè)計不弱于現(xiàn)成設(shè)計素材所提供的價值。

七、插畫能提升品牌的識別度

和文本相比，插畫的視覺化屬性是更強的。圖片插畫所提供的定制化內(nèi)容能夠從各個方面來貼合品牌的需求，更加到位地表達品牌所需呈現(xiàn)的信息。這也使得插畫不僅僅在品牌宣傳的時候，運用在動態(tài)廣告、動態(tài)海報等界面中吸引用戶眼球的地方，而且也成了品牌APP中新用戶引導(dǎo)和教程中必不可少的元素。首次打開的引導(dǎo)教程還有一個可用性上的問題：它會要求用戶在還未開始使用APP的時候，就必須仔細閱讀這些指引，并且將教程中所提供的信息記住。

可問題是在于，人的短期記憶是相當有限的，教程越長，記住內(nèi)容的比例通常越低。借助插畫來呈現(xiàn)新用戶引導(dǎo)頁面可以起到事半功倍的效果。進入特定的環(huán)節(jié)、進度的時候才會被觸發(fā)的一種提示，所以不同的用戶碰到這些提示的時間、場景不盡相同。借助游戲化的設(shè)計，集成了大量有趣的表情和貼紙，有效降低了用戶的認知困難，幫助企業(yè)攔住洶涌的用戶流失潮。

八、數(shù)字插畫能起到強化交互作用

數(shù)字化的插畫通過不同的數(shù)字軟件，合理的處理之后，不僅能夠變成動態(tài)的，運用于視頻當中，還能夠作為微交互，強化產(chǎn)品的整體體驗。數(shù)字插畫，發(fā)揮數(shù)字技術(shù)的優(yōu)勢，創(chuàng)造出更多與眾不同的、新穎的圖像圖像，乃至于各種人性化的動態(tài)視頻，使得插畫具有獨特的視覺表現(xiàn)力，從而產(chǎn)生了巨大的藝術(shù)價值。不僅能夠更加準確、生動得傳達某種信息，使插畫畫面的表現(xiàn)更加豐富，充分表達插畫設(shè)計者的主觀理念和情感態(tài)度，而且以其強有力的視覺沖擊效果，滿足了大眾的審美需求。采用了多種多樣的表現(xiàn)形式，創(chuàng)造出更多新穎的畫面，豐富了插畫的內(nèi)容和視覺效果，更能夠吸引大眾的眼球，發(fā)揮其傳播功能和美化功能，產(chǎn)生更多的社會效益。

九、插畫應(yīng)用于界面可以提高產(chǎn)品的可用性

無論是圖標還是大幅的插畫，都能幫助用戶理解，更加直觀地知道要看哪里，要做什么。面對如今的數(shù)字界面，用戶的注意力持續(xù)的時間越來越短，而插畫則讓用戶更快、更直接地獲取信息，并且決策下一步要做什么。如果插畫或者圖標內(nèi)容不能被用戶一眼看出來，那么用戶就只能借助文本標簽來了解功能是什么。設(shè)計師可以通過測試來測試圖標和插畫的可用性和識別度。

插畫的設(shè)計是有門檻的，在uI設(shè)計中應(yīng)用插畫的時候，需要考慮界面所面向的目標受眾（身體能力，年齡，文化背景，教育水平等）、產(chǎn)品的使用環(huán)境、產(chǎn)品和內(nèi)容的在全球范圍內(nèi)和當?shù)氐膫鞑ニ?、所選圖形的隱喻以及是否容易被識別等問題，才能將插畫在uI設(shè)計中的作用發(fā)揮到極致。插畫增強用戶體驗是客觀存在的，它是提高uI吸引力的強大工具。雖然插畫的運用并沒有太多硬性的規(guī)定，確保插畫的可用性。插畫最終是要應(yīng)用到產(chǎn)品當中，成為產(chǎn)品和品牌的一部分。