在過去幾(ji)年當中(zhong)，插畫(hua)開(kai)始(shi)以一種堅挺的(de)(de)姿勢(shi)，站(zhan)在設(she)計(ji)趨勢(shi)的(de)(de)最前(qian)列。不止是(shi)原本(ben)身處各個領域的(de)(de)畫(hua)手和插畫(hua)師開(kai)始(shi)越(yue)來(lai)越(yue)受(shou)追捧(peng)，而(er)且連(lian)網頁、UI和動(dong)效設(she)計(ji)師都紛(fen)紛(fen)學習(xi)插畫(hua)設(she)計(ji)。當然，更顯著的(de)(de)變化，是(shi)插畫(hua)在網頁和UI中(zhong)的(de)(de)使用(yong)越(yue)來(lai)越(yue)多，越(yue)來(lai)越(yue)頻繁，甚(shen)至越(yue)來(lai)越(yue)多樣。
多年來，插畫(hua)被廣(guang)泛地(di)運用在雜志、圖書、報(bao)紙、海報(bao)、傳(chuan)單等不同的傳(chuan)統載體之上，新(xin)的工具和(he)技術使得它(ta)更(geng)加輕松(song)地(di)植根于數字化(hua)媒體當中(zhong)。
作為設計中，最具有(you)表(biao)現(xian)力的(de)元素(su)，一張插畫(hua)所傳遞的(de)信息(xi)(xi)比(bi)文(wen)字更多更豐富(fu)。在UI和網頁中，使用(yong)插畫(hua)來輔助傳達信息(xi)(xi)，無疑更加直接(jie)到位。而(er)插畫(hua)的(de)可定(ding)制性之強，猶在圖片之上。
插畫在(zai)UI界(jie)面中(zhong)的(de)運用(yong)，可以(yi)說相當廣(guang)泛了(le)，它更(geng)清晰(xi)，更(geng)時尚，也可以(yi)更(geng)加精(jing)準，甚(shen)至更(geng)有(you)表現力，為什(shen)么不用(yong)呢？就(jiu)適(shi)用(yong)范疇而言，我們可以(yi)觀(guan)察到，它可以(yi)運用(yong)到這些地方：
頁面主題圖
網頁(ye)首圖和Banner
吉祥物和形象插畫
博客文章配圖
新用戶引導教程
工具提示
獎勵頁面和成就頁面
游戲化設計的頁面
通知和系統消息
聊天表情
講故事的輔助配圖
信息圖
營銷和廣告圖
圖標和裝飾性內容
社交媒體頁面
支持性內容的頁面
插(cha)畫的(de)(de)適用(yong)范圍之廣，這些總(zong)結出來的(de)(de)使(shi)用(yong)場景，并不是全(quan)部(bu)。插(cha)畫本身的(de)(de)屬性很有意思，它連接了設計，作為內容(rong)呈現，還帶著明顯的(de)(de)藝術化的(de)(de)屬性。今天(tian)的(de)(de)文章，我們總(zong)結一(yi)下(xia)在設計中使(shi)用(yong)插(cha)畫的(de)(de)10個理由和注意事項。
1. 插畫是(shi)設計(ji)的(de)原創性和藝術性的(de)基(ji)礎
無論是印(yin)刷(shua)品、品牌設計還是UI界面，更(geng)加(jia)風格化(hua)(hua)的(de)插(cha)畫能夠將不同的(de)風格和創意加(jia)入其中，在激(ji)烈(lie)的(de)競(jing)爭中更(geng)容易因此脫(tuo)穎而(er)出。留(liu)下(xia)用(yong)戶才有轉化(hua)(hua)。
同樣的(de)，在博客、新聞和Banner 中使用插畫，也是(shi)看準了插畫可以根據內容進(jin)行(xing)深度定(ding)制的(de)優(you)勢(shi)，這種微調能(neng)讓內容更(geng)加(jia)統一一致，更(geng)加(jia)符合產品目標，借(jie)助色彩(cai)、角(jiao)色、環境甚(shen)至暗藏的(de)隱喻(yu)，來吸(xi)引特(te)定(ding)的(de)用戶。
2. 插畫是視覺(jue)觸發器，瞬間傳達大量(liang)信息
我(wo)們常(chang)說「一(yi)圖勝千(qian)言」不是沒有道理(li)的(de)。人的(de)視(shi)覺感知能力很強，看到(dao)圖片的(de)一(yi)瞬間，也許(xu)還(huan)沒有來得及進行(xing)邏輯思考，但(dan)是大腦已經接收到(dao)大量(liang)的(de)信息和內(nei)容(rong)。
心理學研(yan)究表(biao)明，人類只需要(yao)大概1/10秒就可以(yi)感知到場(chang)景(jing)中絕大多(duo)數的元(yuan)素和基本視覺信息。
視(shi)覺信息可以更快傳遞(di)到大腦，而(er)重要的(de)信息，人類也通常會被固化(hua)為視(shi)覺圖像，而(er)非文本化(hua)的(de)記憶。
文本需要依(yi)托可讀(du)性設計，而圖片和插(cha)畫則會(hui)被直接識別。
圖片和插(cha)畫更容易打破(po)文化(hua)和語言隔閡，傳遞內容含義(yi)。
對于視障(zhang)(zhang)用(yong)(yong)戶、閱讀障(zhang)(zhang)礙用(yong)(yong)戶和兒童(tong)，圖片插畫更容(rong)易被(bei)理解(jie)。
3. 插畫是(shi)標(biao)題和文(wen)本的重要支撐
雖然(ran)(ran)(ran)圖片一(yi)瞬間傳遞的(de)(de)(de)信息(xi)很多(duo)，但(dan)是圖片在很多(duo)時候是無法提供精準而(er)(er)詳細的(de)(de)(de)內容。用戶依(yi)然(ran)(ran)(ran)需要文本來(lai)呈現清晰而(er)(er)可(ke)(ke)以被閱讀和記錄的(de)(de)(de)內容，所(suo)以文本依(yi)然(ran)(ran)(ran)是不可(ke)(ke)或缺的(de)(de)(de)。在另外一(yi)方面(mian)，文本和標題已經(jing)具備的(de)(de)(de)情況下，經(jing)過定制(zhi)的(de)(de)(de)插(cha)畫能夠輔(fu)助用戶理解，更清晰的(de)(de)(de)記憶。
在很多特定(ding)的(de)領域，舉個例子比如(ru)說金融(rong)，插(cha)畫能夠借(jie)助色彩、圖(tu)形和形象來講述(shu)故(gu)事，讓用戶(hu)更清晰的(de)理解復雜的(de)金融(rong)功(gong)能，甚至強化信任感，而這是文(wen)本(ben)所不具備的(de)。插(cha)畫能帶來強烈的(de)情感連接。
4. 插(cha)畫更適宜呈現故事
故事是最令人難(nan)忘的(de)內容，劇情(qing)的(de)走向和(he)起(qi)承轉合(he)會給人留下深刻的(de)印象(xiang)(xiang)。而(er)插(cha)畫則以清晰的(de)形象(xiang)(xiang)將(jiang)文字和(he)意象(xiang)(xiang)勾連起(qi)來，無論是在網頁、UI設計還是內容和(he)體驗上，都有(you)著足夠(gou)突出的(de)體現。
營造氛圍，渲(xuan)染情緒，描摹環(huan)境，呈現角色，插畫讓故(gu)事更(geng)加鮮活、易于理解。在內容制造上，有著難以替代的作用(yong)。
5. 插畫(hua)獨(du)有的情感(gan)吸引力
人(ren)是(shi)情(qing)(qing)(qing)感(gan)動(dong)物，看似理性的(de)皮囊之下(xia)(xia)，幾(ji)乎(hu)每個(ge)(ge)(ge)決定都是(shi)在情(qing)(qing)(qing)感(gan)和情(qing)(qing)(qing)緒(xu)的(de)驅動(dong)下(xia)(xia)完成的(de)。如果某(mou)個(ge)(ge)(ge)設計除了能(neng)夠幫你(ni)達成某(mou)個(ge)(ge)(ge)目標，還能(neng)讓你(ni)感(gan)到愉悅，會心一(yi)(yi)笑(xiao)，那么通常(chang)下(xia)(xia)一(yi)(yi)步就是(shi)將它(ta)收藏起來并(bing)且分享給朋友(you)。而在諸(zhu)多設計因素當中，插畫在撬(qiao)動(dong)用戶(hu)情(qing)(qing)(qing)緒(xu)這一(yi)(yi)點上，有著(zhu)無與倫比的(de)效(xiao)用——從線條、色彩到面部(bu)表情(qing)(qing)(qing)和曲線和動(dong)效(xiao)，都在竭盡全力(li)地為你(ni)闡述(shu)故事，營造(zao)氛圍(wei)，將你(ni)拉到故事和場景當中去(qu)。
6. 插畫(hua)賦予(yu)設計(ji)以美(mei)學價(jia)值，更容易被接受(shou)
即使所有人都(dou)在(zai)分(fen)析和(he)爭論(lun)產品的可用性(xing)和(he)易(yi)用性(xing)，大家在(zai)對美的追求(qiu)上(shang)，始終保持著一致(zhi)的態度。一個設(she)計是否(fou)具備可取(qu)性(xing)，是否(fou)能夠通過甲方、客戶和(he)實際用戶，是每個設(she)計人都(dou)需要面對，都(dou)力求(qiu)做到(dao)最好的事情。精心設(she)計的插(cha)畫在(zai)美學和(he)風(feng)格上(shang)更加扎實，風(feng)格化的設(she)計不弱于現成設(she)計素材所提供的價值(zhi)。
7. 插畫能讓(rang)品牌識別度更高
和文本(ben)相比(bi)，插畫(hua)的(de)(de)視覺(jue)化屬性無(wu)疑是更(geng)強的(de)(de)。圖片插畫(hua)所(suo)提供的(de)(de)定(ding)制化內容能夠(gou)從各個方面來貼合品牌的(de)(de)需(xu)(xu)求，更(geng)加到位(wei)地表達品牌所(suo)需(xu)(xu)呈現(xian)的(de)(de)信息(xi)。這也使(shi)得插畫(hua)不僅僅在品牌宣傳的(de)(de)時(shi)候，運用在廣(guang)告、海報等顯而(er)易見的(de)(de)地方，而(er)且也成(cheng)了(le)品牌 APP 中新用戶(hu)引導和教程(cheng)中必不可少(shao)的(de)(de)元素。
就像 Perfect Recipes 這個應用(yong)的(de)新用(yong)戶引(yin)導屏中，就借(jie)助(zhu)插畫來(lai)(lai)呈現(xian)。而 Toonie 這個可愛的(de)鬧鐘應用(yong)當中，甚至借(jie)助(zhu)游戲化的(de)設(she)計，集成了大(da)量有趣的(de)表(biao)情和貼紙(zhi)，當然，它們(men)都是使用(yong)定制化的(de)插畫來(lai)(lai)呈現(xian)的(de)。
8. 數字插畫(hua)還能強(qiang)化(hua)交互，應用在短視(shi)頻中
數字(zi)化(hua)(hua)的好(hao)處(chu)就在(zai)這(zhe)里，通過不同的數字(zi)軟件，合理(li)的處(chu)理(li)之后，不僅能(neng)夠變成(cheng)動態的，運用(yong)于(yu)視頻當中(zhong)，還能(neng)夠作為微交互，強化(hua)(hua)產(chan)品的整體(ti)體(ti)驗。
一旦涉及(ji)到的動效(xiao)和短視頻，整個數(shu)字插畫就開始(shi)具備(bei)更(geng)多(duo)的可能性了，不同(tong)的動效(xiao)能帶來截然不同(tong)的感覺和體驗，更(geng)不用說(shuo)這種玩法正貼合時下的流(liu)行趨勢。
Whizzly 這個動(dong)態圖標就(jiu)是基于插畫，給(gei)一個創意分享社區(qu)所準備的(de)。
9. 插(cha)畫的(de)獨特性(xing)來自于(yu)其中的(de)隱喻和引(yin)人(ren)入(ru)勝的(de)視覺
和藝術一樣，設(she)計中同樣需(xu)要借助(zhu)隱喻來傳(chuan)達一些相對更(geng)有(you)趣、更(geng)深刻(ke)、更(geng)有(you)意(yi)思的信息(xi)。插(cha)畫的獨特性也是(shi)借此來構成，包(bao)含的隱喻使(shi)得其中的價值更(geng)加復(fu)合，值得反復(fu)咂摸，而不是(shi)一眼就可(ke)以完全(quan)看穿。
在(zai)這(zhe)個(ge)約會應(ying)用的網頁當中，插畫(hua)無疑傳遞出了(le)多重(zhong)的信息(xi)，暗含的隱喻告知了(le)用戶產品(pin)的功能和屬性。而下(xia)面這(zhe)幅插畫(hua)則(ze)是為一篇如何找到原創風(feng)格的文章(zhang)所準備的，圖(tu)中的金魚指代的則(ze)是難以被抓住(zhu)的靈感和風(feng)格。
10. 插畫讓用戶可以更快理解和操作
無論是(shi)圖(tu)標(biao)(biao)還是(shi)大幅的插(cha)畫(hua)，都能幫助用(yong)(yong)戶理(li)解(jie)，更加(jia)直觀地知(zhi)道(dao)要看哪里(li)，要做什(shen)么。面對如(ru)今的數(shu)字界面，用(yong)(yong)戶的注意(yi)力持續的時間越(yue)來(lai)越(yue)短(duan)，而插(cha)畫(hua)則讓用(yong)(yong)戶更快(kuai)、更直接(jie)地獲取信息，并且決(jue)策下(xia)一(yi)步(bu)要做什(shen)么。如(ru)果(guo)插(cha)畫(hua)或者圖(tu)標(biao)(biao)內容(rong)不(bu)能被用(yong)(yong)戶一(yi)眼(yan)看出(chu)來(lai)，那(nei)么用(yong)(yong)戶就只能借助文本標(biao)(biao)簽來(lai)了解(jie)功能是(shi)什(shen)么。設計師可以通過測試來(lai)測試圖(tu)標(biao)(biao)和(he)插(cha)畫(hua)的可用(yong)(yong)性和(he)識別度。
值得思考的問題
當(dang)然(ran)，插畫(hua)的(de)(de)設(she)計(ji)是(shi)沒有門(men)檻的(de)(de)，在(zai)設(she)計(ji)的(de)(de)時候(hou)，要(yao)求也是(shi)比較高的(de)(de)。在(zai)使用和設(she)計(ji)插畫(hua)的(de)(de)時候(hou)，需要(yao)考慮以下的(de)(de)幾個方面：
目(mu)標受眾（身體能力，年齡，文化背(bei)景，教育水(shui)平等）
產品的使用環境
產品和內容的在全球范圍內和當地的傳播水平
所選圖形的隱喻以及是否容易被識(shi)別
插畫是否會讓人分心
在線客服1號
微信公眾賬號