2018-10-30 用心設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里
在過去幾年當(dāng)中，插畫開始以一種堅(jiān)挺的姿勢，站在設(shè)計(jì)趨勢的最前列。不止是原本身處各個領(lǐng)域的畫手和插畫師開始越來越受追捧，而且連網(wǎng)頁、UI和動效設(shè)計(jì)師都紛紛學(xué)習(xí)插畫設(shè)計(jì)。當(dāng)然，更顯著的變化，是插畫在網(wǎng)頁和UI中的使用越來越多，越來越頻繁，甚至越來越多樣。
多年來，插畫被廣泛地運(yùn)用在雜志、圖書、報(bào)紙、海報(bào)、傳單等不同的傳統(tǒng)載體之上，新的工具和技術(shù)使得它更加輕松地植根于數(shù)字化媒體當(dāng)中。
作為設(shè)計(jì)中，最具有表現(xiàn)力的元素，一張插畫所傳遞的信息比文字更多更豐富。在UI和網(wǎng)頁中，使用插畫來輔助傳達(dá)信息，無疑更加直接到位。而插畫的可定制性之強(qiáng)，猶在圖片之上。
插畫在UI界面中的運(yùn)用，可以說相當(dāng)廣泛了，它更清晰，更時尚，也可以更加精準(zhǔn)，甚至更有表現(xiàn)力，為什么不用呢？就適用范疇而言，我們可以觀察到，它可以運(yùn)用到這些地方：
頁面主題圖
網(wǎng)頁首圖和Banner
吉祥物和形象插畫
博客文章配圖
新用戶引導(dǎo)教程
工具提示
獎勵頁面和成就頁面
游戲化設(shè)計(jì)的頁面
通知和系統(tǒng)消息
聊天表情
講故事的輔助配圖
信息圖
營銷和廣告圖
圖標(biāo)和裝飾性內(nèi)容
社交媒體頁面
支持性內(nèi)容的頁面
插畫的適用范圍之廣，這些總結(jié)出來的使用場景，并不是全部。插畫本身的屬性很有意思，它連接了設(shè)計(jì)，作為內(nèi)容呈現(xiàn)，還帶著明顯的藝術(shù)化的屬性。今天的文章，我們總結(jié)一下在設(shè)計(jì)中使用插畫的10個理由和注意事項(xiàng)。
1. 插畫是設(shè)計(jì)的原創(chuàng)性和藝術(shù)性的基礎(chǔ)
無論是印刷品、品牌設(shè)計(jì)還是UI界面，更加風(fēng)格化的插畫能夠?qū)⒉煌娘L(fēng)格和創(chuàng)意加入其中，在激烈的競爭中更容易因此脫穎而出。留下用戶才有轉(zhuǎn)化。
同樣的，在博客、新聞和Banner 中使用插畫，也是看準(zhǔn)了插畫可以根據(jù)內(nèi)容進(jìn)行深度定制的優(yōu)勢，這種微調(diào)能讓內(nèi)容更加統(tǒng)一一致，更加符合產(chǎn)品目標(biāo)，借助色彩、角色、環(huán)境甚至暗藏的隱喻，來吸引特定的用戶。
2. 插畫是視覺觸發(fā)器，瞬間傳達(dá)大量信息
我們常說「一圖勝千言」不是沒有道理的。人的視覺感知能力很強(qiáng)，看到圖片的一瞬間，也許還沒有來得及進(jìn)行邏輯思考，但是大腦已經(jīng)接收到大量的信息和內(nèi)容。
心理學(xué)研究表明，人類只需要大概1/10秒就可以感知到場景中絕大多數(shù)的元素和基本視覺信息。
視覺信息可以更快傳遞到大腦，而重要的信息，人類也通常會被固化為視覺圖像，而非文本化的記憶。
文本需要依托可讀性設(shè)計(jì)，而圖片和插畫則會被直接識別。
圖片和插畫更容易打破文化和語言隔閡，傳遞內(nèi)容含義。
對于視障用戶、閱讀障礙用戶和兒童，圖片插畫更容易被理解。
3. 插畫是標(biāo)題和文本的重要支撐
雖然圖片一瞬間傳遞的信息很多，但是圖片在很多時候是無法提供精準(zhǔn)而詳細(xì)的內(nèi)容。用戶依然需要文本來呈現(xiàn)清晰而可以被閱讀和記錄的內(nèi)容，所以文本依然是不可或缺的。在另外一方面，文本和標(biāo)題已經(jīng)具備的情況下，經(jīng)過定制的插畫能夠輔助用戶理解，更清晰的記憶。
在很多特定的領(lǐng)域，舉個例子比如說金融，插畫能夠借助色彩、圖形和形象來講述故事，讓用戶更清晰的理解復(fù)雜的金融功能，甚至強(qiáng)化信任感，而這是文本所不具備的。插畫能帶來強(qiáng)烈的情感連接。
4. 插畫更適宜呈現(xiàn)故事
故事是最令人難忘的內(nèi)容，劇情的走向和起承轉(zhuǎn)合會給人留下深刻的印象。而插畫則以清晰的形象將文字和意象勾連起來，無論是在網(wǎng)頁、UI設(shè)計(jì)還是內(nèi)容和體驗(yàn)上，都有著足夠突出的體現(xiàn)。
營造氛圍，渲染情緒，描摹環(huán)境，呈現(xiàn)角色，插畫讓故事更加鮮活、易于理解。在內(nèi)容制造上，有著難以替代的作用。
5. 插畫獨(dú)有的情感吸引力
人是情感動物，看似理性的皮囊之下，幾乎每個決定都是在情感和情緒的驅(qū)動下完成的。如果某個設(shè)計(jì)除了能夠幫你達(dá)成某個目標(biāo)，還能讓你感到愉悅，會心一笑，那么通常下一步就是將它收藏起來并且分享給朋友。而在諸多設(shè)計(jì)因素當(dāng)中，插畫在撬動用戶情緒這一點(diǎn)上，有著無與倫比的效用——從線條、色彩到面部表情和曲線和動效，都在竭盡全力地為你闡述故事，營造氛圍，將你拉到故事和場景當(dāng)中去。
6. 插畫賦予設(shè)計(jì)以美學(xué)價(jià)值，更容易被接受
即使所有人都在分析和爭論產(chǎn)品的可用性和易用性，大家在對美的追求上，始終保持著一致的態(tài)度。一個設(shè)計(jì)是否具備可取性，是否能夠通過甲方、客戶和實(shí)際用戶，是每個設(shè)計(jì)人都需要面對，都力求做到最好的事情。精心設(shè)計(jì)的插畫在美學(xué)和風(fēng)格上更加扎實(shí)，風(fēng)格化的設(shè)計(jì)不弱于現(xiàn)成設(shè)計(jì)素材所提供的價(jià)值。
7. 插畫能讓品牌識別度更高
和文本相比，插畫的視覺化屬性無疑是更強(qiáng)的。圖片插畫所提供的定制化內(nèi)容能夠從各個方面來貼合品牌的需求，更加到位地表達(dá)品牌所需呈現(xiàn)的信息。這也使得插畫不僅僅在品牌宣傳的時候，運(yùn)用在廣告、海報(bào)等顯而易見的地方，而且也成了品牌 APP 中新用戶引導(dǎo)和教程中必不可少的元素。
就像 Perfect Recipes 這個應(yīng)用的新用戶引導(dǎo)屏中，就借助插畫來呈現(xiàn)。而 Toonie 這個可愛的鬧鐘應(yīng)用當(dāng)中，甚至借助游戲化的設(shè)計(jì)，集成了大量有趣的表情和貼紙，當(dāng)然，它們都是使用定制化的插畫來呈現(xiàn)的。
8. 數(shù)字插畫還能強(qiáng)化交互，應(yīng)用在短視頻中
數(shù)字化的好處就在這里，通過不同的數(shù)字軟件，合理的處理之后，不僅能夠變成動態(tài)的，運(yùn)用于視頻當(dāng)中，還能夠作為微交互，強(qiáng)化產(chǎn)品的整體體驗(yàn)。
一旦涉及到的動效和短視頻，整個數(shù)字插畫就開始具備更多的可能性了，不同的動效能帶來截然不同的感覺和體驗(yàn)，更不用說這種玩法正貼合時下的流行趨勢。
Whizzly 這個動態(tài)圖標(biāo)就是基于插畫，給一個創(chuàng)意分享社區(qū)所準(zhǔn)備的。
9. 插畫的獨(dú)特性來自于其中的隱喻和引人入勝的視覺
和藝術(shù)一樣，設(shè)計(jì)中同樣需要借助隱喻來傳達(dá)一些相對更有趣、更深刻、更有意思的信息。插畫的獨(dú)特性也是借此來構(gòu)成，包含的隱喻使得其中的價(jià)值更加復(fù)合，值得反復(fù)咂摸，而不是一眼就可以完全看穿。
在這個約會應(yīng)用的網(wǎng)頁當(dāng)中，插畫無疑傳遞出了多重的信息，暗含的隱喻告知了用戶產(chǎn)品的功能和屬性。而下面這幅插畫則是為一篇如何找到原創(chuàng)風(fēng)格的文章所準(zhǔn)備的，圖中的金魚指代的則是難以被抓住的靈感和風(fēng)格。
10. 插畫讓用戶可以更快理解和操作
無論是圖標(biāo)還是大幅的插畫，都能幫助用戶理解，更加直觀地知道要看哪里，要做什么。面對如今的數(shù)字界面，用戶的注意力持續(xù)的時間越來越短，而插畫則讓用戶更快、更直接地獲取信息，并且決策下一步要做什么。如果插畫或者圖標(biāo)內(nèi)容不能被用戶一眼看出來，那么用戶就只能借助文本標(biāo)簽來了解功能是什么。設(shè)計(jì)師可以通過測試來測試圖標(biāo)和插畫的可用性和識別度。
當(dāng)然，插畫的設(shè)計(jì)是沒有門檻的，在設(shè)計(jì)的時候，要求也是比較高的。在使用和設(shè)計(jì)插畫的時候，需要考慮以下的幾個方面：
目標(biāo)受眾（身體能力，年齡，文化背景，教育水平等）
產(chǎn)品的使用環(huán)境
產(chǎn)品和內(nèi)容的在全球范圍內(nèi)和當(dāng)?shù)氐膫鞑ニ?/span>
所選圖形的隱喻以及是否容易被識別
插畫是否會讓人分心
藍(lán)藍(lán)設(shè)計(jì)( www.ocunn.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.ocunn.cn