起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)插畫如何助力UI多場(chǎng)景設(shè)計(jì)
編輯導(dǎo)語：近些年來，插畫不僅被廣泛運(yùn)用在雜志、圖書、海報(bào)等傳統(tǒng)載體之上，新的工具和技術(shù)使得它輕松地植根于數(shù)字化媒體當(dāng)中。插畫開始站在設(shè)計(jì)趨勢(shì)的最前列，而且連網(wǎng)頁、UI和動(dòng)效設(shè)計(jì)師都紛紛學(xué)習(xí)插畫設(shè)計(jì)。于是插畫在網(wǎng)頁和UI中的使用越來越多、越來越頻繁、越來越多樣，接下來，本文作者為我們分享了插畫如何助力UI多場(chǎng)景設(shè)計(jì)。
插畫目前在UI設(shè)計(jì)中已經(jīng)逐漸成為了較為重要甚至不可或缺的一部分，無論是在運(yùn)營UI還是在UX中，插畫設(shè)計(jì)以自己獨(dú)特的屬性魅力，成為了UI設(shè)計(jì)中的新趨勢(shì)，今天我們就來聊聊插畫對(duì)于不同需求與場(chǎng)景下的UI設(shè)計(jì)的助力。
1. 插畫是什么？
1.1 ?起源說
從起源的角度來分析插畫可以不妨參考它的詞義：西文統(tǒng)稱為「illustration」，源自于拉丁文「illustraio」，意指照亮之意。
也就是說插畫可以使文字意念變得更明確清晰，這里就很明確的標(biāo)定了插畫本身具有解釋信息、說文解字的功能性。
而落足于中文中看「插畫」二字，為何叫插畫？
——關(guān)鍵就是這“插”字，很明確的點(diǎn)出了插畫的使用場(chǎng)景很大情況是安插在信息流中，尤其是承載或伴隨于文字信息之中。
當(dāng)然嚴(yán)格意義上來說，插畫的形式也包括了獨(dú)立裝飾插畫這類概念，不僅僅局限于常見的伴隨信息流出現(xiàn)的形式。
1.2 在UI中的定義
插畫在UI中的使用可以被視為一個(gè)較為聚焦的使用方式，在這樣的場(chǎng)景限定下的插畫，我們不能以單獨(dú)的藝術(shù)畫作或是信筆涂鴉單獨(dú)視之，而是將其帶入整個(gè)界面、整個(gè)產(chǎn)品中去理解。
此時(shí)此刻插畫可以被理解為是UI中的控件，既然是控件那就那就一定會(huì)附帶功能、交互、產(chǎn)品等屬性服務(wù)于特殊的目的；同時(shí)，布局于UI之上那么一定要服從層級(jí)屬性的制約。
1.3 商業(yè)意圖
嚴(yán)謹(jǐn)?shù)恼f，我們目前已知的較為主流的出現(xiàn)在UI、互聯(lián)網(wǎng)產(chǎn)品中的插畫統(tǒng)統(tǒng)都屬于商業(yè)插畫的范疇。
那么也就是說在創(chuàng)作和使用插畫的時(shí)候一定要將需求方的價(jià)值主張、盈利點(diǎn)、品牌價(jià)值、產(chǎn)品定位、企業(yè)文化調(diào)性等納入重要考量標(biāo)準(zhǔn)同時(shí)還要思考用戶的期許需求、體驗(yàn)感、潮流喜好等。
這不僅是你創(chuàng)作插畫的核心出發(fā)點(diǎn)，同樣也是決定你的插畫是否能成功的關(guān)鍵性因素。
2. 插畫出現(xiàn)并流行的原因
插畫的出現(xiàn)與流行并非是偶然，其背后存在著眾多使之蔚然成風(fēng)的邏輯和理由，其中兩個(gè)最重要的原因需要?dú)w結(jié)為：插畫自身的優(yōu)勢(shì)；用戶和市場(chǎng)的需求。
2.1 插畫自身的優(yōu)勢(shì)
插畫本身自帶的優(yōu)勢(shì)其實(shí)就極為明顯，尤其是從視覺的角度來說，相比于文字，插畫對(duì)于信息傳遞的賦能是文字無法比擬的；具體體現(xiàn)在：信息傳遞效率、視覺隱喻、故事性、藝術(shù)性、包容性與與時(shí)俱進(jìn)性。
2.1.1 信息傳遞效率
談到插畫其實(shí)我們一直會(huì)以“一圖勝千言”這樣的評(píng)價(jià)來描述插畫的作用，具體來說主要是因?yàn)椴瀹嫷幕蛑写嬖谝韵聨c(diǎn)特性使之如此。
首先，選擇插畫是我們?nèi)祟惿硇缘倪x擇，實(shí)驗(yàn)心理學(xué)家赤瑞特拉曾在測(cè)試人類獲取信息來源的實(shí)驗(yàn)中表示，人類獲取的信息83%來自視覺、11%來自聽覺、3.5%來自嗅覺、1.5%來自觸覺、1%來自味覺，所以很明顯視覺是我們主要感知這個(gè)世界的方式。
所以在目前需要飛速獲取信息，講究直截了當(dāng)?shù)谋磉_(dá)意思的用戶需求的當(dāng)下，插畫本身相對(duì)于文字有更快的信息傳遞效率。
這主要是因?yàn)槲淖值膫鬟f特征是單一線性的，而且對(duì)于大多數(shù)人來說攝取鏈路過長并需要按部就班地經(jīng)過：閱讀——理解——想象——轉(zhuǎn)譯——吸收的過程。
尤其是在經(jīng)過閱讀這個(gè)過程的時(shí)候，你要獲取時(shí)間、地點(diǎn)、人物、情感……這些信息的時(shí)候只能一個(gè)一個(gè)逐一獲取，同一個(gè)場(chǎng)景描述可能需要花費(fèi)你至少三四分鐘的時(shí)間。
而圖片的信息傳遞特征是多線同時(shí)以一種匯總的方式進(jìn)行傳遞，同樣的一個(gè)場(chǎng)景也許你幾秒鐘就能清晰的抓取大部分的信息，相對(duì)于純文字來說，圖片（插畫）具有更高的視覺信息傳遞效率。
當(dāng)然這里并不是說文字傳遞就一定比圖片傳遞差，文字相比于圖片而言具有對(duì)想象的空間限制較小等優(yōu)勢(shì)，只是在產(chǎn)品中基于快速傳達(dá)、精準(zhǔn)接收的需求而言，圖片的效率在很大程度上是優(yōu)于文字的。
2.1.2 視覺隱喻
而插畫之所以能達(dá)到那么高的信息傳遞效率，比較重要的一點(diǎn)就是插畫是具有視覺隱喻性。
所謂的視覺隱喻性其實(shí)就是一種對(duì)于世間萬物的擬態(tài)、重組、再現(xiàn)，通過再現(xiàn)這些物像并作為符號(hào)傳遞，在畫面中以比喻、暗喻的方式來表達(dá)想傳遞的意思。
這不僅僅是在商業(yè)插畫領(lǐng)域，而是在除了抽象繪畫以外，基本上所有的具象繪畫都具有這個(gè)特性，這也是經(jīng)典的創(chuàng)作手法。
這些隱喻可能是以一個(gè)與所要表達(dá)事物相似的形狀去暗示一個(gè)具體的事物，也可以是以一種具體的事物去比喻另一種事物（因?yàn)樗麄兙哂泄餐c(diǎn)）。
比如用灌籃表現(xiàn)奮勇拼搏奪取目標(biāo)，用海燕表現(xiàn)剛畢業(yè)的年輕人，這也是最貼近我們基因中通過視覺認(rèn)知這個(gè)世界的方式，既生動(dòng)又讓人熟悉且容易接受。
2.1.3 故事性
每一幅插畫都可以理解為一個(gè)小情景，情境中包含了場(chǎng)景、角色這些概念。每個(gè)角色在這個(gè)場(chǎng)景中并不孤立而存在組成一個(gè)整體，在同一個(gè)場(chǎng)景的組織下會(huì)角色之間產(chǎn)生了屬于他們專屬的故事。
故事性不但能將界面中的每個(gè)部分串聯(lián)的更緊密，同時(shí)更能讓人產(chǎn)生親切感。
2.1.4 藝術(shù)性
插畫脫胎于藝術(shù)繪畫的范疇，也是傳統(tǒng)藝術(shù)繪畫的分支，所以其無論是出于什么目的被創(chuàng)作，都會(huì)不由自主的帶有一定的藝術(shù)氣質(zhì)，十分有利于格調(diào)感、品質(zhì)感、氛圍感、個(gè)性感的營造。
2.1.5 包容性、與時(shí)俱進(jìn)性
插畫的范圍比較廣泛，并不限于一兩種風(fēng)格之中，所以這就使得插畫具有很強(qiáng)的包容性，可以以較多的形式和種類出現(xiàn)在不同的場(chǎng)景，具有很高的普適性。
而且更重要的是插畫會(huì)隨著時(shí)代潮流的發(fā)展不斷更迭著自己的風(fēng)格以適應(yīng)每個(gè)時(shí)代的喜好，與時(shí)俱進(jìn)。
2.2 用戶和市場(chǎng)的需求
除了插畫本身的優(yōu)勢(shì)以外，能讓插畫如今大行其道的關(guān)鍵原因還是市場(chǎng)和用戶的選擇。
2.2.1 情感化需求
在目前被稱為UI設(shè)計(jì)的下半場(chǎng)的階段，用戶對(duì)于產(chǎn)品有了更深層次的訴求，不再是僅僅局限于產(chǎn)品的好用；同時(shí)也需要更有溫度的產(chǎn)品，更能彰顯自身品味的產(chǎn)品，基于這樣的需求，插畫無疑是承接這一需求較為優(yōu)秀的載體。
圖形化的表達(dá)會(huì)增加趣味性和情感連接屬性，豐富產(chǎn)品顏色基調(diào)，擴(kuò)大產(chǎn)品情感閾值。
2.2.2 品牌差異化需求
當(dāng)產(chǎn)品的功能已經(jīng)趨于完善，僅從功能性上來說，同類產(chǎn)品之間很難再拉開明顯的差距，這個(gè)時(shí)候新的增長需要依托于品牌的調(diào)性提升，建立自己獨(dú)有的IP屬性，此時(shí)一個(gè)產(chǎn)品代表了一個(gè)具有一定人格化的品牌形象。
想要在用戶的心中錨定出自己別具一格的Style，就需要營造出屬于自己的視覺語言及品牌元素，而選擇插畫進(jìn)行設(shè)計(jì)層面上的助力無疑是值得考慮的方向，同時(shí)這也是品牌感營造的重要組成部分。
3. 插畫對(duì)于UI的意義
談到插畫對(duì)于UI的意義時(shí)，我們需要思考的是UI本身對(duì)于產(chǎn)品的意義與主要作用，這對(duì)于UI工作者來說答案并不陌生，即：視覺傳達(dá)、交互引導(dǎo)、品牌價(jià)值。
3.1 視覺傳達(dá)
視覺傳達(dá)是最表層也是最直接作用影響于UI和用戶的一個(gè)層次維度，它通過視覺元素與用戶視覺感知的第一時(shí)間連接，直接決定用戶對(duì)于UI及其所屬產(chǎn)品的首次印象。
好的插畫設(shè)計(jì)在UI和產(chǎn)品中對(duì)于用戶的吸引會(huì)起到十分顯著的助力作用，具體表現(xiàn)為：滿足審美需求、更為生動(dòng)有趣的傳達(dá)、增大單位面積信息承載量。
3.1.1 滿足審美需求
就插畫本身而言，它屬于繪畫藝術(shù)作品的范疇，所以從插畫的基因之中是自帶藝術(shù)欣賞性在其中的。
而上文中也提到過，插畫的創(chuàng)作形式和風(fēng)格眾多，所以對(duì)于用戶而言，對(duì)插畫的喜好的不同體現(xiàn)了不同的受眾品味，對(duì)產(chǎn)品來說這也是彰顯企業(yè)文化的表征特性。
而這些需求從視覺的角度來看可以認(rèn)為是個(gè)人或集體審美的體現(xiàn)，無論是產(chǎn)品設(shè)計(jì)、環(huán)藝設(shè)計(jì)還是數(shù)字媒體設(shè)計(jì)等滿足審美的需求一直是設(shè)計(jì)追求的重要課題。
3.1.2 更為生動(dòng)與有趣
除了在上文中提到的插畫本身具有更高的信息傳遞效率外，相比于文字在很多方面能做到更為快速、準(zhǔn)確、直觀的意思傳達(dá)外。
因?yàn)椴瀹嫳旧韴D形化的表達(dá)方式就是具有親和力的，那么在傳遞同樣的意思的時(shí)候，插畫的表達(dá)和敘述方式會(huì)更為具有生動(dòng)性和趣味性。
如此，不僅讓用戶可以快速知曉需要被傳達(dá)的：功能更新、產(chǎn)品特點(diǎn)、差異屬性……還能讓用戶在第一眼看到的時(shí)刻就迅速拉近與產(chǎn)品之間的距離，消除陌生感。
3.1.3 增大固定面積信息承載量
這點(diǎn)來說，主要是針對(duì)動(dòng)態(tài)插畫而言。插畫在UI中雖然是以固定組件的形式而大量存在，但是在固定的面積內(nèi)，插畫可以通過動(dòng)態(tài)的展示形式（如：滾動(dòng)播放、微動(dòng)效、組件切換），不斷更新在固定面積內(nèi)的不同內(nèi)容。
這時(shí)插畫就如同短視頻一般，被賦予了時(shí)間這個(gè)新的維度，所能夠承載的信息量在有限面積內(nèi)便具有無限擴(kuò)張的可能總的來說，這一步需要做到悅目的地步
3.2 交互引導(dǎo)
除了在視覺層進(jìn)行第一眼的吸引作用外，因?yàn)椴瀹嫳旧砭哂幸欢ǖ墓适聰⑹鲂栽诶锩?，可以被安排入一些短小的情?jié)。所以利用這樣的故事敘述性，在頁面中插畫對(duì)于交互體驗(yàn)的提升同樣不可忽視，具體體現(xiàn)在：
3.2.1 狀態(tài)提示與引導(dǎo)操作
用戶在與UI進(jìn)行交互的時(shí)候，經(jīng)常會(huì)在很多操作的時(shí)候出現(xiàn)操作不可預(yù)知或是操作不明確的困擾。
這時(shí)為了提升用戶交互動(dòng)線的流暢程度、消除操作中不可預(yù)知性所帶來的不必要的困擾，插畫此時(shí)對(duì)于用戶操作的提示與引導(dǎo)作用就顯得非常重要。
3.2.2 情緒的緩解與肯定
從目前主流用戶的APP使用數(shù)量來說，一個(gè)用戶平均每天會(huì)與10—25個(gè)左右的APP發(fā)生交互使用關(guān)系。
除了因工作必要和生活必要需要打開并使用的APP外，其余的APP產(chǎn)品如果想要盡可能的吸引用戶更多的使用時(shí)間、使用頻率以提升更多的日活數(shù)據(jù)等，那么對(duì)用戶操作體驗(yàn)情緒的把控是至關(guān)重要的。
而在這個(gè)情緒化設(shè)計(jì)越來越被重視的年代，在操作體驗(yàn)中對(duì)于用戶出現(xiàn)情緒的正面、負(fù)面情緒的正確引導(dǎo)是提升用戶使用體驗(yàn)感、增加用戶粘性至關(guān)重要的點(diǎn)。
對(duì)于此更直白的說就是對(duì)負(fù)面情緒和操作未知恐懼進(jìn)行疏導(dǎo)和緩解，對(duì)正確操作進(jìn)行正向的肯定。
總的來說，這一步需要做到悅心的地步。
3.3 品牌價(jià)值
從產(chǎn)品的角度來說，無論是視覺吸引還是用戶體驗(yàn)其根本目的都是為了盈利這樣一個(gè)核心訴求來進(jìn)行服務(wù)，而當(dāng)產(chǎn)品的功能價(jià)值已經(jīng)無法顯現(xiàn)出明顯的優(yōu)勢(shì)的時(shí)候，品牌價(jià)值所帶來的巨大升值空間就是產(chǎn)品需要在新的階段需要努力的發(fā)力點(diǎn)。
本質(zhì)上來說品牌貫穿了所有設(shè)計(jì)內(nèi)容，它是一套體系，只不過最后的落腳點(diǎn)不同而已。
通過串聯(lián)這些落腳點(diǎn)，形成品牌記憶，最后把產(chǎn)品的價(jià)值達(dá)到最大化，而在設(shè)計(jì)內(nèi)容中將品牌進(jìn)行穿針引線，插畫無疑是十分適合的選擇。具體來說主要表現(xiàn)在：
3.3.1 品牌定位
如前文所說，產(chǎn)品的IP是一個(gè)產(chǎn)品的人格化形象，而這些人格化的面貌、內(nèi)核都會(huì)在設(shè)計(jì)中通過視覺的形式給予受眾第一時(shí)間的傳達(dá)。
通過這樣的傳達(dá)，受眾能迅速的被告知產(chǎn)品的產(chǎn)品定位、企業(yè)文化、氣質(zhì)屬性……這也是品牌在用戶心中錨定下自身特征的重要第一步。
舉個(gè)最簡(jiǎn)單的例子為什么很多人看到一個(gè)產(chǎn)品第一眼會(huì)有：“這個(gè)產(chǎn)品是做給年輕人的”、“這個(gè)產(chǎn)品應(yīng)該是服務(wù)潮人的”這樣的定論，都是因?yàn)榈谝谎郾粋鬟_(dá)了品牌的定位的緣故而插畫本身可以做到的是將上述信息以給予用戶一種“看圖說話”的模式來對(duì)產(chǎn)品進(jìn)行閱讀。
3.3.2 差異定制
錨定品牌形象只是后產(chǎn)品時(shí)代品牌打入用戶內(nèi)心的第一步，其底層邏輯是為了在高度同質(zhì)化的使用屬性中做出差異化競(jìng)爭(zhēng)，建立自己獨(dú)特的調(diào)性，從而在用戶心中烙印該產(chǎn)品的專屬記憶，而專屬的記憶的連接就需要獨(dú)一無二的符號(hào)語義。
如果說符號(hào)語義太抽象，那么不妨聯(lián)系插畫的藝術(shù)屬性：藝術(shù)風(fēng)格。
就如同每個(gè)畫家都擁有自己的畫風(fēng)一樣，每個(gè)產(chǎn)品的基因都是有其獨(dú)特屬性存在的，打造、定制自己的專屬插畫符號(hào)系統(tǒng)，其實(shí)就是將這種獨(dú)特基因?qū)傩酝饣?，找到自己的“畫風(fēng)”。
舉個(gè)例子，為什么大家每當(dāng)提到租房軟件也許腦中會(huì)有很多選擇，但是一旦給出年輕、潮流、插畫這些關(guān)鍵詞的時(shí)候第一時(shí)間就會(huì)想到自如，因?yàn)樽匀缫呀?jīng)在產(chǎn)品差異層面打造了自己的“畫風(fēng)”。
3.3.3 重復(fù)與衍生
除了差異化與定位錨定以外，插畫重大的意義在于能將一個(gè)產(chǎn)品整合一個(gè)套系，并且易于將品牌元素轉(zhuǎn)化為各種形式在產(chǎn)品的各個(gè)位面進(jìn)行復(fù)用，通過不斷地復(fù)用讓品牌形象能夠得到不斷的重復(fù)。
畢竟所謂的品牌價(jià)值最大化其本質(zhì)就是將品牌概念以一定頻率不斷的重復(fù)以達(dá)到廣而告之，進(jìn)而在用戶心中留下深刻、立體的形象，比如當(dāng)年電視上動(dòng)不動(dòng)就會(huì)聽到“收禮只收腦白金”的slogan一樣。
而在重復(fù)這個(gè)行為中對(duì)于具體產(chǎn)品而言更為實(shí)際的意義則是衍生，衍生在落地中具體表現(xiàn)在：
- 跨媒體、媒介的適配：電腦、手機(jī)、平板等多種客戶端、硬件中的匹配與嵌入；
- 品牌物料的多元化：產(chǎn)品因企業(yè)IP所產(chǎn)生的周邊、文創(chuàng)等一系列商業(yè)衍生物。
總的來說，這一步需要做到悅神的地步。
3.4 小結(jié)
插畫對(duì)UI的意義存在于：
- 視覺上，滿足審美的需求，更生動(dòng)的傳達(dá)信息以及擴(kuò)大單位面積內(nèi)信息的承載量；
- 交互上，引導(dǎo)用戶優(yōu)化操作并進(jìn)行情緒的疏導(dǎo)與控制；
- 品牌上，進(jìn)行品牌的定位，提升差異化競(jìng)爭(zhēng)力并創(chuàng)造重復(fù)與衍生的可行性。
4. 插畫實(shí)際應(yīng)用方法論
4.1 被需求的時(shí)機(jī)和場(chǎng)景
談到插畫落地的實(shí)際運(yùn)用時(shí)，很多人的慣性思路是對(duì)于各種風(fēng)格進(jìn)行具體的分析然后對(duì)應(yīng)具體的產(chǎn)品特性進(jìn)行篩選，這無可厚非。但是本文以為相對(duì)于討論風(fēng)格定位，從產(chǎn)品的層面去思考插畫在UI中被需要的場(chǎng)景和時(shí)機(jī)則更為重要。
經(jīng)過了大量的實(shí)際案例和優(yōu)秀產(chǎn)品調(diào)研，插畫在UI場(chǎng)景中被需求的時(shí)機(jī)與場(chǎng)景體現(xiàn)在：
4.1.1 活動(dòng)內(nèi)容的吸引
當(dāng)產(chǎn)品中出現(xiàn)新活動(dòng)、層級(jí)較高的信息需要告知用戶并有將用戶吸引誘導(dǎo)其點(diǎn)擊的需求時(shí)，就是插畫的作用需要發(fā)揮的時(shí)機(jī)，這也目前的主流運(yùn)營類UI設(shè)計(jì)中最為人所熟知的插畫適用場(chǎng)景之一，在此場(chǎng)景之中插畫的主要目的在于吸引用戶的關(guān)注和觸發(fā)點(diǎn)擊行為。
具體實(shí)際場(chǎng)景：Banner、啟動(dòng)頁、活動(dòng)頁面等。
4.1.2 主要內(nèi)容的概括
在用戶與UI界面的交互中會(huì)面臨在單個(gè)頁面中閱讀大量的信息流的情境，當(dāng)這些信息流呈現(xiàn)為較為繁雜冗長文字時(shí)，用戶需要快速被告知此信息流的主要內(nèi)容，并對(duì)此信息作出快速的內(nèi)容判斷。
除了干練的文字大標(biāo)題以外，在頭部用插畫進(jìn)行概括性敘述，也是一個(gè)非常適合的做法，這也是插畫被需要的重要的時(shí)機(jī)。
我們可以通過對(duì)信息流的主旨要義、核心關(guān)鍵點(diǎn)進(jìn)行提煉，并以此為出發(fā)點(diǎn)在插畫中置換上相關(guān)的人類行為、社會(huì)行為，最后以再現(xiàn)、隱喻、重構(gòu)的方式對(duì)文字信息進(jìn)行最精煉的概括性敘述，就能達(dá)到點(diǎn)題的效果。
具體實(shí)際場(chǎng)景：文章頭部、應(yīng)用功能介紹板塊等。
4.1.3 統(tǒng)一與整體感的需求
同樣立足于產(chǎn)品層，如前文所述，插畫因?yàn)楸旧碜詭У乃囆g(shù)屬性——風(fēng)格，所以具有將元素從視覺層面整合統(tǒng)一的能力形成一種套系感。
他們會(huì)在顏色、形態(tài)、藝術(shù)風(fēng)格方面體現(xiàn)出單一品牌獨(dú)有的基因特性，而越來越多的產(chǎn)品基于這樣的需求，需要插畫在各個(gè)層面打造出屬于自己的套系屬性。
具體實(shí)際場(chǎng)景：ICON設(shè)計(jì)、同品類等。
4.1.4 正負(fù)面狀態(tài)情緒接力
除了套系感的營造，插畫還具有對(duì)于用戶出現(xiàn)情緒的正面、負(fù)面情緒的正確引導(dǎo)以提升用戶使用體驗(yàn)感的效果，而在實(shí)際的用戶交互中經(jīng)常會(huì)出現(xiàn)從正向、負(fù)向兩個(gè)方面去影響用戶體驗(yàn)的系統(tǒng)狀態(tài)：
- 正向：任務(wù)完成、操作執(zhí)行成功等；
- 負(fù)向：空白狀態(tài)、功能無法執(zhí)行、調(diào)用失敗、網(wǎng)絡(luò)失去連接、等待與加載等。
插畫的在此時(shí)的作用就很明顯了，即將用戶在此時(shí)所產(chǎn)生的負(fù)面情緒進(jìn)行排解并配合文字給出合理的建議；反之對(duì)于正面情緒進(jìn)行再次肯定，以提升用戶在使用過程中的成就感，達(dá)到對(duì)于情緒的接力。
具體實(shí)際場(chǎng)景：狀態(tài)空白頁、操作成功狀態(tài)顯示、網(wǎng)絡(luò)斷開提示頁面等。
4.1.5 新手引導(dǎo)與新更新信息提示
每個(gè)人都有第一次接觸某款應(yīng)用或者面對(duì)使用的應(yīng)用升級(jí)帶來新功能的時(shí)候，而當(dāng)產(chǎn)品需要將這些新的信息準(zhǔn)確的告知用戶的時(shí)候，往往可以通過將插畫置入在界面的合理位置中進(jìn)行敘述，以達(dá)到與新用戶有效溝通、降低操作學(xué)習(xí)成本的目的。
具體實(shí)際場(chǎng)景：新上線功能提示遮罩、啟動(dòng)頁新功能解釋等。
4.1.6 核心內(nèi)容強(qiáng)調(diào)與輔助敘述
在用戶對(duì)較長的文字信息流進(jìn)行快速閱讀的時(shí)候，其核心表達(dá)含義很容易隨著文字信息密度的提升而產(chǎn)生閱讀核心丟失的可能性或者被混淆。
這個(gè)時(shí)候就需要插畫作為一個(gè)視覺照明彈將主旨進(jìn)行簡(jiǎn)潔明確的敘述及提煉，降低閱讀干擾并作為文字信息流的承擔(dān)輔助敘述功能，同時(shí)提升視覺透氣。
具體實(shí)際場(chǎng)景：工具類應(yīng)用網(wǎng)站主頁介紹等。
4.2 常規(guī)落地五步法
在這一步驟探討之前需要聲明和強(qiáng)調(diào)的是，這并不是指具體到一幅插畫創(chuàng)作作品上面的步驟教學(xué)演示（畢竟從繪畫的流程上來說千人千法，而畫本無定法貴在得法即可）。
而是基于插畫在項(xiàng)目中從提出到構(gòu)思再到最后產(chǎn)出與執(zhí)行的一整套實(shí)踐鏈路模型，具有普適性，當(dāng)然也并不是說只有這一種。
從大量的項(xiàng)目調(diào)研和項(xiàng)目經(jīng)驗(yàn)來說，插畫的落地大致可以分為這五步：基本規(guī)范——風(fēng)格探索——風(fēng)格確立——畫面繪制——檢查交付。
4.2.1 基本規(guī)范
這一步一般是出現(xiàn)在任務(wù)的早期（一般是最開端）設(shè)計(jì)師需要根據(jù)需求方（甲方或PM）提出的品牌訴求并結(jié)合產(chǎn)品的企業(yè)形象、市場(chǎng)定位、體量……
與需求方溝通協(xié)商出一套雙方都較為認(rèn)可的設(shè)計(jì)規(guī)范標(biāo)準(zhǔn)以便在后面的設(shè)計(jì)中作為參考的依據(jù)與憑借，這也是對(duì)后面一系列設(shè)計(jì)行為所進(jìn)行的約束。
這樣做的最大好處是能盡可能規(guī)避偏離設(shè)計(jì)目標(biāo)等類似風(fēng)險(xiǎn)，同時(shí)能有效提升整體的設(shè)計(jì)效率。
在這一步中可以但不一定需要具體到顏色的色值這種微觀的層面，而是在宏觀策略層面上規(guī)定其需要向受眾和開發(fā)者傳遞的核心詞匯如：一致、可控、效率、生長性等。
4.2.2 風(fēng)格探索
當(dāng)確立了插畫設(shè)計(jì)的基本規(guī)范就可以進(jìn)一步進(jìn)行風(fēng)格的探索，而風(fēng)格元素的探索依舊是圍繞品牌的基因?qū)傩赃M(jìn)行提取，這是為了給插畫中的元素賦予一個(gè)統(tǒng)一的世界觀，不會(huì)造成視覺上的割裂感。
首先，我們?cè)谶@一步進(jìn)行的時(shí)候需要先進(jìn)行風(fēng)格測(cè)試，即采用多版有明顯的差異但是又滿足以上約束的風(fēng)格進(jìn)行對(duì)比，很類似于設(shè)計(jì)中的比稿。
在此時(shí)并不需要將畫面面面俱到，但是一定要滿足第一眼就能感受到其中差異的這項(xiàng)條件，這就會(huì)很容易讓我們快速通過比較找到最為適合的大概風(fēng)格方向從而進(jìn)行決策。
在風(fēng)格測(cè)試中不可避免的思考在于用何種元素作為視覺傳達(dá)符號(hào)更凸顯其意味。
這個(gè)問題其實(shí)可以參照著名美學(xué)研究者李澤厚先生對(duì)于意味的來源的觀點(diǎn)，即“意味來自于原始的積淀、藝術(shù)的積淀和生活的積淀?！逼渲凶罹咧笇?dǎo)意義的就是對(duì)生活的積淀。
為什么這么說呢？
這是因?yàn)樵谀壳拔覀兇蟛糠值纳虡I(yè)插畫中很少有純抽象的創(chuàng)作形式，就算是有一定的夸張、解構(gòu)、變形其本質(zhì)還是對(duì)我們生活、工作、生存環(huán)境等現(xiàn)實(shí)物像的再現(xiàn)。
用藝術(shù)創(chuàng)作術(shù)語來說這是一種現(xiàn)實(shí)主義表現(xiàn)形式，而李澤厚先生所說的“對(duì)于生活的積淀”就明確指“包括了“對(duì)社會(huì)氛圍的捕捉對(duì)時(shí)代、潮流氣息、人們的命運(yùn)的感知”前后二者不謀而合。
所以面對(duì)元素的選擇我們更多的還是要對(duì)所需要表現(xiàn)的對(duì)象進(jìn)行生活化觀察聯(lián)系，以一個(gè)核心物品或詞匯進(jìn)行發(fā)散聯(lián)想，承接聯(lián)想的每一個(gè)節(jié)點(diǎn)都可以是一件與之相關(guān)的具象化物品，然后對(duì)這些元素進(jìn)行融合。
其次，統(tǒng)一的世界觀從視覺的層面來說主要表現(xiàn)為統(tǒng)一的造型風(fēng)格，統(tǒng)一的色彩風(fēng)格。
4.2.2.1 造型風(fēng)格
造型風(fēng)格是設(shè)計(jì)資產(chǎn)中的重要組成部分，具有高度的統(tǒng)一性，以人物素材為例，無論是進(jìn)行哪一版本風(fēng)格的測(cè)試都需要給起建立統(tǒng)一的比例構(gòu)造。
這是動(dòng)畫人物設(shè)計(jì)中老生常談的話題，就是統(tǒng)一世界觀下的頭身比例，人物與人物之間可以有高矮胖瘦的差異，但是一定不能在比例上失衡的太過，這樣的比例要求同樣適用于人物與景物的比例造型關(guān)系。
如果在組件化人物系統(tǒng)的繪制中，甚至還能為其準(zhǔn)備好統(tǒng)一的骨骼系統(tǒng)以適用與動(dòng)態(tài)應(yīng)用的擴(kuò)展。
4.2.2.2 色彩風(fēng)格
色彩風(fēng)格的探索也并不死板而單一，但其核心一定是各色相相互之間權(quán)重的控制，大致可分為：主色、輔色、點(diǎn)綴色三者比例從大到小（理論占比是70%、25%、5%當(dāng)然數(shù)值并不絕對(duì)）。
在主色的選取上我們可以以靠近品牌色本身或者通過“腦暴”找出關(guān)鍵詞。并根據(jù)關(guān)鍵詞聯(lián)想發(fā)散推導(dǎo)出主色的思路來進(jìn)行創(chuàng)作。
主色的選擇盡量在同一色系中選擇，不要超過三種，但是對(duì)于單幅的相對(duì)獨(dú)立的創(chuàng)作來說，只需要定好畫面的主導(dǎo)色相并做好色彩上的對(duì)立統(tǒng)一關(guān)系即可。
最后，在前幾步的基礎(chǔ)之上繼續(xù)深入細(xì)化思考，基于其最終大致使用的實(shí)際場(chǎng)景進(jìn)行篩選和調(diào)整，實(shí)際使用場(chǎng)景中需要考慮到的因素包括在整個(gè)界面中的視覺整體效果、開發(fā)層可行性的最小可行度、易用性、靈活性、可復(fù)用性……
通過這些更為落地的條件進(jìn)行約束、甄別出較為可行的方案。
4.2.3 風(fēng)格確立
當(dāng)經(jīng)過了一系列如上的對(duì)比、篩選、甄別之后，其實(shí)基本上的風(fēng)格走向就已經(jīng)確立了，這一步是對(duì)風(fēng)格的深入化打磨，就像對(duì)花草養(yǎng)護(hù)的修剪旁雜枝干，突出主干。
需要做的主要是兩件事：風(fēng)格的演化與延展性測(cè)試、大眾屬性的遷移。
風(fēng)格的演化與延展性其實(shí)比較好理解，就是將既定的風(fēng)格進(jìn)行更為接近于實(shí)際應(yīng)用層面的組合嘗試，探索該風(fēng)格下畫面元素的最大潛力，同時(shí)套用到比較接近于實(shí)際使用環(huán)境的Mockup中，反復(fù)確定其最小可行性。
而大眾屬性遷移其實(shí)際意義在于最大化的滿足受眾接受度，大部分的存在于UI中的商業(yè)插畫其受眾組成成分都相對(duì)而言都較為復(fù)合。
如果個(gè)性風(fēng)格過于強(qiáng)烈，那么會(huì)很容易引起一定的爭(zhēng)議性，對(duì)于此類插畫設(shè)計(jì)我們需要非?？酥?，保持美觀的同時(shí)避免過分鮮明的個(gè)性，達(dá)到所謂的平均風(fēng)格，這也一般會(huì)成為插畫設(shè)計(jì)的最優(yōu)解。
4.2.4 畫面繪制
畫面的繪制部分如果要嚴(yán)格意義來進(jìn)行每一種類別的劃分真的可以稱得上是千人千法，所以本文只是給出一些通用化的繪制思路供大家參考。
如果是大學(xué)、高中就是美術(shù)專業(yè)出身的設(shè)計(jì)師那么對(duì)于插畫的繪制流程一定并不陌生，其可以較為概括的分為：手稿——線稿——上色——塑造——調(diào)整五個(gè)階段。
在手稿的階段基本要確立的東西在于：
- 畫面整體的構(gòu)圖，物體與物體之間的比例關(guān)系；
- 整體透視關(guān)系；
- 畫面的疏密組織關(guān)系；
- 遠(yuǎn)、中、近景之間的虛實(shí)關(guān)系，在這一步中其實(shí)大致的畫面關(guān)系就已經(jīng)出來了。
而且這一步做得越詳細(xì)，對(duì)于后面的轉(zhuǎn)線稿工作就越有利。
基礎(chǔ)的手稿繪制完后下一步就是開始轉(zhuǎn)更為精確的電子稿，可以用到Illustrator、Photoshop等工具進(jìn)行分圖層轉(zhuǎn)稿，在這一步需要相對(duì)于手稿而言需要刻畫出更多的細(xì)節(jié)，使具體的線面表達(dá)更為明確，層次感更豐富，到這步造型工作就基本結(jié)束了。
當(dāng)造型結(jié)束后我們可以開始我們的上色階段，在上色階段沒有固定的套路，有直接鋪大調(diào)子然后再嵌入輔色、點(diǎn)綴色的方法，也有顏色直接一步鋪到位，由點(diǎn)及面、步步為營的進(jìn)行上色，符合自己的習(xí)慣就行。
但是在上色的過程中同樣需要時(shí)刻注意整體色調(diào)的比例協(xié)調(diào)，以免造成色調(diào)的跑偏。
深入塑造是一個(gè)相對(duì)的步驟，當(dāng)畫面整體的調(diào)性定格了后，由于每個(gè)創(chuàng)作者的習(xí)慣不一樣，就會(huì)導(dǎo)致畫面的深入程度不一樣，這一步是對(duì)于沒有完善或者說需要深入刻畫的細(xì)節(jié)而進(jìn)行繪制的。
當(dāng)然在深入塑造的時(shí)候還是要十分注意整體關(guān)系，不能因?yàn)槌撩杂谀程幖?xì)節(jié)塑造開始自嗨然后在主體中過于出跳，這是一個(gè)十分耐心且克制的過程（當(dāng)然對(duì)于整體把控感極強(qiáng)的老司機(jī)一切都隨意）。
作為整幅畫面的收官之舉調(diào)整是必不可少的一步，將畫面置于整體視角觀察，如果有十分搶主體的局部需要進(jìn)行適當(dāng)?shù)南鳒p；如果主體物的一些細(xì)節(jié)還不夠突出，那么可以再適當(dāng)?shù)呢S富豐富畫面，達(dá)到最佳效果，這一步是加法與減法之間的平衡。
這里需要再次強(qiáng)調(diào)的是，不是說一定需要按照上面按部就班得來，只是這種模式具有一定的普適性而且相對(duì)來說較為嚴(yán)謹(jǐn)，每個(gè)設(shè)計(jì)師都有自己獨(dú)特的繪畫流程，畫無定法，貴在得法。
一幅整體的作品完工后，在效率化設(shè)計(jì)需求的當(dāng)下，我們需要盡可能的提高單幅畫面的二次利用率，賦予畫面中每個(gè)元素能被替換和多次利用的能力，這就出現(xiàn)了我們耳熟能詳?shù)慕M件化繪制的設(shè)計(jì)方式，大大提升了設(shè)計(jì)效率。
所謂的組件化繪制其實(shí)就是將畫面中的分子元素，如：人物、樹、花甚至文字等物品進(jìn)行歸類化整理并內(nèi)置與一個(gè)單獨(dú)的庫中，也就是我們常說的組件庫，在我們需要將某個(gè)位置的具體元素進(jìn)行替換時(shí)就可以快速的用庫中的資源進(jìn)行快速替換。
當(dāng)然如果繼續(xù)進(jìn)行拆分那么分子庫可以被拆成更小的原子即：人物的某一個(gè)關(guān)鍵部位、花草樹木的花瓣、枝干等，以進(jìn)行更為細(xì)致化的組合和更多的可能性復(fù)用。
4.2.5 檢查交付
當(dāng)所需要的插畫繪制完成時(shí)就需要進(jìn)行最后的檢查交付階段，這個(gè)階段主要是將插畫置入最終的使用場(chǎng)景中進(jìn)行檢查，可以是高保真Mockup。
這一步與之前提到的置入Mockup的行為不同的地方在于這一步側(cè)重于糾錯(cuò)和調(diào)整，上一步則是側(cè)重于探索和驗(yàn)證。
如果面對(duì)一些即將上線的具有動(dòng)效的插畫時(shí)，設(shè)計(jì)師要特別注意與開發(fā)再次核實(shí)其最終實(shí)現(xiàn)效果和可行度。
在上線后可以通過數(shù)據(jù)埋點(diǎn)、用戶反饋、日活等數(shù)據(jù)信息反饋進(jìn)行反饋和復(fù)盤。檢測(cè)是否解決問題的標(biāo)準(zhǔn)還是可以分以以上提到的三個(gè)方面為標(biāo)準(zhǔn)進(jìn)行檢查：
- 是否優(yōu)化了視覺完成了對(duì)于用戶審美的滿足和興趣的吸引；
- 是否對(duì)用戶交互進(jìn)行了減負(fù)，提升了使用中的體驗(yàn)感；
- 是否在不同的層級(jí)上充當(dāng)了品牌的傳播工具，有利于品牌價(jià)值的最大化。
5. 拓展部分：日常修煉
感謝你耐心地看到現(xiàn)在，在文章的最后部分想和大家聊聊在插畫的日常練習(xí)中自己的一些心得體會(huì)。
5.1 良好的觀察習(xí)慣
首先就是要養(yǎng)好好觀察事物的習(xí)慣，我們目前從事的UI中的插畫作業(yè)大部分還是對(duì)生活中實(shí)物的再現(xiàn)。
如何能在被接到需求之時(shí)就能迅速的聯(lián)想出具體物體的具體狀態(tài)，那么離不開平日的大量觀察，觀察中需要特別注意物體的光色關(guān)系、光影關(guān)系、形狀區(qū)別，并且自己要有意識(shí)地去給雜亂無章的事物進(jìn)行主動(dòng)構(gòu)圖和景深式取舍。
主動(dòng)構(gòu)圖的意思就是學(xué)會(huì)從雜亂無章的自然、生活事物中去用畫框的概念去截取較為美觀的構(gòu)圖，通過大量的構(gòu)圖式思維來養(yǎng)成。
一旦畫畫就自然而然具備構(gòu)圖的意識(shí)，這點(diǎn)真的很重要，這是很多學(xué)了不短的繪畫時(shí)間的人仍就容易忽視的習(xí)慣，但這卻是你對(duì)于畫面的組織能力是決定性的習(xí)慣。
景深式取舍是指我們需要學(xué)會(huì)像照相機(jī)那樣觀看物體——懂得聚焦觀察，都說設(shè)計(jì)師需要像素眼。
但其實(shí)也同樣需要要聚焦眼，聚焦的意義在于我們會(huì)對(duì)物體的觀察有主次的概念，聚焦意味著一部分的虛化和另一部分的清晰，尤其是在視覺Z軸上形成這樣的層次感，而繪畫中前中后景的處理方式也大多類似于此，長此以往有助于我們對(duì)于畫面主次關(guān)系的處理能力。
5.2 勤奮與素材推薦
當(dāng)然了無論是什么技能與意識(shí)說到底還是那句老生常談的筆耕不輟，日積月累，畢竟長期的練習(xí)是磨合能力與意識(shí)的最好方式，推薦一些經(jīng)常去逛的插畫網(wǎng)站：
Behance：https://www.behance.net/
這個(gè)大家并不陌生了，設(shè)計(jì)師必備：Notefolio：https://www.notefolio.net
這是一個(gè)較為小眾的韓國的設(shè)計(jì)網(wǎng)站，有點(diǎn)像韓國的Behance但是風(fēng)格也更為別具一格，是很不錯(cuò)的插畫案例參考網(wǎng)站：Pinterest：https://www.pinterest.com
同樣是一個(gè)耳熟能詳?shù)乃夭木W(wǎng)站，除了瀑布流的分布外最方便的就是具有聯(lián)想推薦功能，而且會(huì)根據(jù)每個(gè)設(shè)計(jì)師自己的情緒版特征進(jìn)行更為精準(zhǔn)的定向推送，實(shí)時(shí)更新最新的相關(guān)內(nèi)容：Free illustrations：https://freeillustrations.xyz/
十分垂直的插畫素材集合型網(wǎng)站，可根據(jù)標(biāo)簽選擇自己需要的格式并且支持源文件下載，能得到最真實(shí)最還原的的插畫素材：Stories by Freepik：https://stories.freepik.com/
除了擁有大量的場(chǎng)景人物場(chǎng)景應(yīng)用插畫素材之外，這個(gè)網(wǎng)站最大的殺手锏在于他擁有線上的動(dòng)態(tài)現(xiàn)實(shí)功能，可通過對(duì)于腳本的設(shè)置對(duì)素材進(jìn)行動(dòng)態(tài)顯示查看。
5.3 創(chuàng)意思維
創(chuàng)意思維可以抽象的理解為想象力，考慮到這是一個(gè)很寬泛的概念的我僅以幾個(gè)我常用的思維訓(xùn)練方法來略作分享：
第一：針對(duì)于繪畫想象力延展來說，我們可以將生活中很多自然的帶有殘缺感東西（比如桌子上的被磕碰過的痕跡）通過拍照拍下，將其想象成一個(gè)完整的形的一部分，然后在這個(gè)殘缺的基礎(chǔ)之上慢慢通過腦補(bǔ)成一個(gè)完整的具象的形。
這個(gè)完整的形可以通過畫筆逐步繪畫成型，這是一個(gè)練習(xí)再創(chuàng)作衍生思維十分可靠的方法，有助于設(shè)計(jì)師對(duì)原素材的發(fā)散聯(lián)想能力。
第二：針對(duì)于形的舉一反三能力來說，可以以外形為一個(gè)共同點(diǎn)來進(jìn)行聯(lián)系式練習(xí)即通過形與形之間的相似來將這些形狀相似但是類型也許是千差萬別的物體進(jìn)行歸類，然后拆解在組合，很多時(shí)候會(huì)組合出完全意想不到的效果。
在完成一些視覺上的荒誕組合效果的插圖作業(yè)時(shí)，會(huì)起到出奇兵的效果。
第三：針對(duì)于發(fā)散思維想象來說，可以在閑碎的時(shí)間里沒事兒多畫兩筆，將這些涂鴉在空閑的時(shí)候不斷的如移花接木一般進(jìn)行補(bǔ)充，這很有利于進(jìn)行從0到1的創(chuàng)作，讓我們?cè)诮拥叫枨蟮臅r(shí)候不至于手足無措，腦海里空空如也。
當(dāng)然以上只是我的一點(diǎn)拙見，如果能夠?qū)δ阌幸欢ǖ膸椭敲床簧鯓s幸。
再次感謝你看到最后，對(duì)于插畫在UI中的助力探索還遠(yuǎn)不止于此，也歡迎留下你的見解和看法，祝每一個(gè)熱愛設(shè)計(jì)的你都能變得更強(qiáng)，加油！
本文由 @核糖 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自 Pexels，基于 CC0 協(xié)議
我說一句難聽的：很大一部分插畫并不是解釋，而且品牌形象，或是美觀