UI界面設(shè)計

插畫對于不同需求與場景下的UI設(shè)計有什么幫助？

?插畫目前在UI設(shè)計中已經(jīng)逐漸成為了較為重要甚至不可或缺的一部分，今天我們就來聊聊插畫對于不同需求與場景下的UI設(shè)計的助力。

1598

插畫目前在UI設(shè)計中已經(jīng)逐漸成為了較為重要甚至不可或缺的一部分，無論是在運營UI還是在UX中，插畫設(shè)計以自己獨特的屬性魅力，成為了UI設(shè)計中的新趨勢，今天我們就來聊聊插畫對于不同需求與場景下的UI設(shè)計的助力。

1.1 起源說

從起源的角度來分析插畫可以不妨參考它的詞義：西文統(tǒng)稱為「illustration」，源自于拉丁文「illustraio」，意指照亮之意。

也就是說插畫可以使文字意念變得更明確清晰，這里就很明確的標(biāo)定了插畫本身具有解釋信息、說文解字的功能性。

而落足于中文中看「插畫」二字，為何叫插畫？關(guān)鍵就是這“插”字。他很明確的點出了插畫的使用場景很大情況是安插在信息流中，尤其是承載或伴隨于文字信息之中。

當(dāng)然嚴(yán)格意義上來說，插畫的形式也包括了獨立裝飾插畫這類概念，不僅僅局限于常見的伴隨信息流出現(xiàn)的形式。

1.2 在UI中的定義

插畫在UI中的使用可以被視為一個較為聚焦的使用方式，在這樣的場景限定下的插畫，我們不能以單獨的藝術(shù)畫作或是信筆涂鴉單獨視之，而是將其帶入整個界面、整個產(chǎn)品中去理解。

此時此刻插畫可以被理解為是UI中的控件，既然是控件那就那就一定會附帶功能、交互、產(chǎn)品等屬性服務(wù)于特殊的目的，同時，布局于UI之上那么一定要服從層級屬性的制約。

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)作和使用插畫的時候一定要將需求方的價值主張、盈利點、品牌價值、產(chǎn)品定位、企業(yè)文化調(diào)性等納入重要考量標(biāo)準(zhǔn)。

同時還要思考用戶的期許需求、體驗感、潮流喜好等。

這不僅是你創(chuàng)作插畫的核心出發(fā)點，同樣也是決定你的插畫是否能成功的關(guān)鍵性因素。

插畫的出現(xiàn)與流行并非是偶然，其背后存在著眾多使之蔚然成風(fēng)的邏輯和理由，其中兩個最重要的原因需要歸結(jié)為：1.插畫自身的優(yōu)勢 2.用戶和市場的需求

2.1 插畫自身的優(yōu)勢

插畫本身自帶的優(yōu)勢其實就極為明顯，尤其是從視覺的角度來說，相比于文字，插畫對于信息傳遞的賦能是文字無法比擬的，具體體現(xiàn)在：信息傳遞效率、視覺隱喻、故事性、藝術(shù)性、包容性與與時俱進性。

2.1.1 信息傳遞效率

談到插畫其實我們一直會以“一圖勝千言”這樣的評價來描述插畫的作用，具體來說主要是因為插畫的基因中存在以下幾點特性使之如此。

首先，選擇插畫是我們?nèi)祟惿硇缘倪x擇，實驗心理學(xué)家赤瑞特拉曾在測試人類獲取信息來源的實驗中表示，人類獲取的信息83%來自視覺，11%來自聽覺，3.5%來自嗅覺，1.5%來自觸覺，1%來自味覺，所以很明顯視覺是我們主要感知這個世界的方式。

所以在目前需要飛速獲取信息，講究直截了當(dāng)?shù)谋磉_意思的用戶需求的當(dāng)下，插畫本身相對于文字有更快的信息傳遞效率。

這主要是因為文字的傳遞特征是單一線性的，而且對于大多數(shù)人來說攝取鏈路過長并需要按部就班地經(jīng)過：閱讀——理解——想象——轉(zhuǎn)譯——吸收的過程，尤其是在經(jīng)過閱讀這個過程的時候，你要獲取時間、地點、人物、情感……這些信息的時候只能一個一個逐一獲取，同一個場景描述可能需要花費你至少三四分鐘的時間。

而圖片的信息傳遞特征是多線同時以一種匯總的方式進行傳遞，同樣的一個場景也許你幾秒鐘就能清晰的抓取大部分的信息，相對于純文字來說，圖片（插畫）具有更高的視覺信息傳遞效率。

當(dāng)然這里并不是說文字傳遞就一定比圖片傳遞差，文字相比于圖片而言具有對想象的空間限制較小等優(yōu)勢，只是在產(chǎn)品中基于快速傳達、精準(zhǔn)接收的需求而言，圖片的效率在很大程度上是優(yōu)于文字的。

2.1.2 視覺隱喻

而插畫之所以能達到那么高的信息傳遞效率，比較重要的一點就是插畫是具有視覺隱喻性。

所謂的視覺隱喻性其實就是一種對于世間萬物的擬態(tài)、重組、再現(xiàn)，通過再現(xiàn)這些物像并作為符號傳遞，在畫面中以比喻、暗喻的方式來表達想傳遞的意思。這不僅僅是在商業(yè)插畫領(lǐng)域，而是在除了抽象繪畫以外，基本上所有的具象繪畫都具有這個特性，這也是經(jīng)典的創(chuàng)作手法。

這些隱喻可能是以一個與所要表達事物相似的形狀去暗示一個具體的事物，也可以是以一種具體的事物去比喻另一種事物（因為他們具有共同點），比如用灌籃表現(xiàn)奮勇拼搏奪取目標(biāo)，用海燕表現(xiàn)剛畢業(yè)的年輕人，這也是最貼近我們基因中通過視覺認(rèn)知這個世界的方式，既生動又讓人熟悉且容易接受。

2.1.3 故事性

每一幅插畫都可以理解為一個小情景，情境中包含了場景、角色這些概念。每個角色在這個場景中并不孤立而存在組成一個整體，在同一個場景的組織下會角色之間產(chǎn)生了屬于他們專屬的故事。

故事性不但能將界面中的每個部分串聯(lián)的更緊密，同時更能讓人產(chǎn)生親切感。

2.1.4 藝術(shù)性

插畫脫胎于藝術(shù)繪畫的范疇，也是傳統(tǒng)藝術(shù)繪畫的分支，所以其無論是出于什么目的被創(chuàng)作，都會不由自主的帶有一定的藝術(shù)氣質(zhì)，十分有利于格調(diào)感、品質(zhì)感、氛圍感、個性感的營造。

2.1.5 包容性、與時俱進性

插畫的范圍比較廣泛，并不限于一兩種風(fēng)格之中，所以這就使得插畫具有很強的包容性，可以以較多的形式和種類出現(xiàn)在不同的場景，具有很高的普適性。

而且更重要的是插畫會隨著時代潮流的發(fā)展不斷更迭著自己的風(fēng)格以適應(yīng)每個時代的喜好，與時俱進。

2.2 用戶和市場的需求

除了插畫本身的優(yōu)勢以外，能讓插畫如今大行其道的關(guān)鍵原因還是市場和用戶的選擇。

2.2.1 情感化需求

在目前被稱為UI設(shè)計的下半場的階段，用戶對于產(chǎn)品有了更深層次的訴求，不再是僅僅局限于產(chǎn)品的好用，同時也需要更有溫度的產(chǎn)品，更能彰顯自身品味的產(chǎn)品，基于這樣的需求，插畫無疑是承接這一需求較為優(yōu)秀的載體。

圖形化的表達會增加趣味性和情感連接屬性，豐富產(chǎn)品顏色基調(diào)，擴大產(chǎn)品情感閾值。

2.2.2 品牌差異化需求

當(dāng)產(chǎn)品的功能已經(jīng)趨于完善，僅從功能性上來說，同類產(chǎn)品之間很難再拉開明顯的差距，這個時候新的增長需要依托于品牌的調(diào)性提升，建立自己獨有的IP屬性，此時一個產(chǎn)品代表了一個具有一定人格化的品牌形象。

想要在用戶的心中錨定出自己別具一格的Style，就需要營造出屬于自己的視覺語言及品牌元素，而選擇插畫進行設(shè)計層面上的助力無疑是值得考慮的方向，同時這也是品牌感營造的重要組成部分。

談到插畫對于UI的意義時，我們需要思考的是UI本身對于產(chǎn)品的意義與主要作用，這對于UI工作者來說答案并不陌生，即：視覺傳達、交互引導(dǎo)、品牌價值。

3.1 視覺傳達

視覺傳達是最表層也是最直接作用影響于UI和用戶的一個層次維度，它通過視覺元素與用戶視覺感知的第一時間連接，直接決定用戶對于UI及其所屬產(chǎn)品的首次印象，好的插畫設(shè)計在UI和產(chǎn)品中對于用戶的吸引會起到十分顯著的助力作用，具體表現(xiàn)為：滿足審美需求、更為生動有趣的傳達、增大單位面積信息承載量。

3.1.1 滿足審美需求

就插畫本身而言，它屬于繪畫藝術(shù)作品的范疇，所以從插畫的基因之中是自帶藝術(shù)欣賞性在其中的，而上文中也提到過，插畫的創(chuàng)作形式和風(fēng)格眾多，所以對于用戶而言，對插畫的喜好的不同體現(xiàn)了不同的受眾品味，對產(chǎn)品來說這也是彰顯企業(yè)文化的表征特性。

而這些需求從視覺的角度來看可以認(rèn)為是個人或集體審美的體現(xiàn)，無論是產(chǎn)品設(shè)計、環(huán)藝設(shè)計還是數(shù)字媒體設(shè)計等滿足審美的需求一直是設(shè)計追求的重要課題。

3.1.2 更為生動與有趣

除了在上文中提到的插畫本身具有更高的信息傳遞效率外，相比于文字在很多方面能做到更為快速、準(zhǔn)確、直觀的意思傳達外，因為插畫本身圖形化的表達方式就是具有親和力的，那么在傳遞同樣的意思的時候，插畫的表達和敘述方式會更為具有生動性和趣味性。

如此，不僅讓用戶可以快速知曉需要被傳達的：功能更新、產(chǎn)品特點、差異屬性……還能讓用戶在第一眼看到的時刻就迅速拉近與產(chǎn)品之間的距離，消除陌生感。

3.1.3 增大固定面積信息承載量

這點來說，主要是針對動態(tài)插畫而言。插畫在UI中雖然是以固定組件的形式而大量存在，但是在固定的面積內(nèi)，插畫可以通過動態(tài)的展示形式（如：滾動播放、微動效、組件切換），不斷更新在固定面積內(nèi)的不同內(nèi)容。

這時插畫就如同短視頻一般，被賦予了時間這個新的維度，所能夠承載的信息量在有限面積內(nèi)便具有無限擴張的可能。

總的來說，這一步需要做到悅目的地步。

3.2 交互引導(dǎo)

除了在視覺層進行第一眼的吸引作用外，因為插畫本身具有一定的故事敘述性在里面，可以被安排入一些短小的情節(jié)，所以利用這樣的故事敘述性，在頁面中插畫對于交互體驗的提升同樣不可忽視，具體體現(xiàn)在：

3.2.1 狀態(tài)提示與引導(dǎo)操作

用戶在與UI進行交互的時候，經(jīng)常會在很多操作的時候出現(xiàn)操作不可預(yù)知或是操作不明確的困擾，這時為了提升用戶交互動線的流暢程度、消除操作中不可預(yù)知性所帶來的不必要的困擾，插畫此時對于用戶操作的提示與引導(dǎo)作用就顯得非常重要。

3.2.2 情緒的緩解與肯定

從目前主流用戶的APP使用數(shù)量來說，一個用戶平均每天會與10—25個左右的APP發(fā)生交互使用關(guān)系，除了因工作必要和生活必要需要打開并使用的APP外，其余的APP產(chǎn)品如果想要盡可能的吸引用戶更多的使用時間、使用頻率以提升更多的日活數(shù)據(jù)等，那么對用戶操作體驗情緒的把控是至關(guān)重要的。

而在這個情緒化設(shè)計越來越被重視的年代，在操作體驗中對于用戶出現(xiàn)情緒的正面、負(fù)面情緒的正確引導(dǎo)是提升用戶使用體驗感、增加用戶粘性至關(guān)重要的點。對于此更直白的說就是對負(fù)面情緒和操作未知恐懼進行疏導(dǎo)和緩解，對正確操作進行正向的肯定。

總的來說，這一步需要做到悅心的地步。

3.3 品牌價值

從產(chǎn)品的角度來說，無論是視覺吸引還是用戶體驗其根本目的都是為了盈利這樣一個核心訴求來進行服務(wù)，而當(dāng)產(chǎn)品的功能價值已經(jīng)無法顯現(xiàn)出明顯的優(yōu)勢的時候，品牌價值所帶來的巨大升值空間就是產(chǎn)品需要在新的階段需要努力的發(fā)力點。

本質(zhì)上來說品牌貫穿了所有設(shè)計內(nèi)容，它是一套體系，只不過最后的落腳點不同而已。通過串聯(lián)這些落腳點，形成品牌記憶，最后把產(chǎn)品的價值達到最大化，而在設(shè)計內(nèi)容中將品牌進行穿針引線，插畫無疑是十分適合的選擇。具體來說主要表現(xiàn)在：

3.3.1 品牌定位

如前文所說，產(chǎn)品的IP是一個產(chǎn)品的人格化形象，而這些人格化的面貌、內(nèi)核都會在設(shè)計中通過視覺的形式給予受眾第一時間的傳達，通過這樣的傳達，受眾能迅速的被告知產(chǎn)品的產(chǎn)品定位、企業(yè)文化、氣質(zhì)屬性……這也是品牌在用戶心中錨定下自身特征的重要第一步。

舉個最簡單的例子為什么很多人看到一個產(chǎn)品第一眼會有：“這個產(chǎn)品是做給年輕人的”“這個產(chǎn)品應(yīng)該是服務(wù)潮人的”這樣的定論，都是因為第一眼被傳達了品牌的定位的緣故。

而插畫本身可以做到的是將上述信息以給予用戶一種“看圖說話”的模式來對產(chǎn)品進行閱讀。

3.3.2 差異定制

錨定品牌形象只是后產(chǎn)品時代品牌打入用戶內(nèi)心的第一步，其底層邏輯是為了在高度同質(zhì)化的使用屬性中做出差異化競爭，建立自己獨特的調(diào)性，從而在用戶心中烙印該產(chǎn)品的專屬記憶，而專屬的記憶的連接就需要獨一無二的符號語義。

如果說符號語義太抽象，那么不妨聯(lián)系插畫的藝術(shù)屬性：藝術(shù)風(fēng)格。就如同每個畫家都擁有自己的畫風(fēng)一樣，每個產(chǎn)品的基因都是有其獨特屬性存在的，打造、定制自己的專屬插畫符號系統(tǒng)，其實就是將這種獨特基因?qū)傩酝饣?，找到自己的“畫風(fēng)”。

舉個例子，為什么大家每當(dāng)提到租房軟件也許腦中會有很多選擇，但是一旦給出年輕、潮流、插畫這些關(guān)鍵詞的時候第一時間就會想到自如，因為自如已經(jīng)在產(chǎn)品差異層面打造了自己的“畫風(fēng)”。

3.3.3 重復(fù)與衍生

除了差異化與定位錨定以外，插畫重大的意義在于能將一個產(chǎn)品整合一個套系，并且易于將品牌元素轉(zhuǎn)化為各種形式在產(chǎn)品的各個位面進行復(fù)用，通過不斷地復(fù)用讓品牌形象能夠得到不斷的重復(fù)。畢竟所謂的品牌價值最大化其本質(zhì)就是將品牌概念以一定頻率不斷的重復(fù)以達到廣而告之，進而在用戶心中留下深刻、立體的形象，比如當(dāng)年電視上動不動就會聽到“收禮只收腦白金”的slogan一樣

而在重復(fù)這個行為中對于具體產(chǎn)品而言更為實際的意義則是衍生，衍生在落地中具體表現(xiàn)在：

跨媒體、媒介的適配：電腦、手機、平板等多種客戶端、硬件中的匹配與嵌入；

品牌物料的多元化：產(chǎn)品因企業(yè)IP所產(chǎn)生的周邊、文創(chuàng)等一系列商業(yè)衍生物。

總的來說，這一步需要做到悅神的地步。

小結(jié)一下

插畫對UI的意義存在于：

視覺上，滿足審美的需求，更生動的傳達信息以及擴大單位面積內(nèi)信息的承載量；

交互上，引導(dǎo)用戶優(yōu)化操作并進行情緒的疏導(dǎo)與控制；

品牌上，進行品牌的定位，提升差異化競爭力并創(chuàng)造重復(fù)與衍生的可行性。

4.1 被需求的時機和場景

談到插畫落地的實際運用時，很多人的慣性思路是對于各種風(fēng)格進行具體的分析然后對應(yīng)具體的產(chǎn)品特性進行篩選，這無可厚非，但是本文以為相對于討論風(fēng)格定位，從產(chǎn)品的層面去思考插畫在UI中被需要的場景和時機則更為重要。

經(jīng)過了大量的實際案例和優(yōu)秀產(chǎn)品調(diào)研，插畫在UI場景中被需求的時機與場景體現(xiàn)在：

4.1.1 活動內(nèi)容的吸引

當(dāng)產(chǎn)品中出現(xiàn)新活動、層級較高的信息需要告知用戶并有將用戶吸引誘導(dǎo)其點擊的需求時，就是插畫的作用需要發(fā)揮的時機，這也目前的主流運營類UI設(shè)計中最為人所熟知的插畫適用場景之一，在此場景之中插畫的主要目的在于吸引用戶的關(guān)注和觸發(fā)點擊行為。

具體實際場景：Banner、啟動頁、活動頁面等。

4.1.2 主要內(nèi)容的概括

在用戶與UI界面的交互中會面臨在單個頁面中閱讀大量的信息流的情境，當(dāng)這些信息流呈現(xiàn)為較為繁雜冗長文字時，用戶需要快速被告知此信息流的主要內(nèi)容，并對此信息作出快速的內(nèi)容判斷，除了干練的文字大標(biāo)題以外，在頭部用插畫進行概括性敘述，也是一個非常適合的做法，這也是插畫被需要的重要的時機。

我們可以通過對信息流的主旨要義、核心關(guān)鍵點進行提煉，并以此為出發(fā)點在插畫中置換上相關(guān)的人類行為、社會行為，最后以再現(xiàn)、隱喻、重構(gòu)的方式對文字信息進行最精煉的概括性敘述，就能達到點題的效果。

具體實際場景：文章頭部、應(yīng)用功能介紹板塊等。

4.1.3 統(tǒng)一與整體感的需求

同樣立足于產(chǎn)品層，如前文所述，插畫因為本身自帶的藝術(shù)屬性——風(fēng)格，所以具有將元素從視覺層面整合統(tǒng)一的能力形成一種套系感，他們會在顏色、形態(tài)、藝術(shù)風(fēng)格方面體現(xiàn)出單一品牌獨有的基因特性，而越來越多的產(chǎn)品基于這樣的需求，需要插畫在各個層面打造出屬于自己的套系屬性。

具體實際場景：ICON設(shè)計、同品類等。

4.1.4 正負(fù)面狀態(tài)情緒接力

除了套系感的營造，插畫還具有對于用戶出現(xiàn)情緒的正面、負(fù)面情緒的正確引導(dǎo)以提升用戶使用體驗感的效果，而在實際的用戶交互中經(jīng)常會出現(xiàn)從正向、負(fù)向兩個方面去影響用戶體驗的系統(tǒng)狀態(tài)：

正向：任務(wù)完成、操作執(zhí)行成功等；

負(fù)向：空白狀態(tài)、功能無法執(zhí)行、調(diào)用失敗、網(wǎng)絡(luò)失去連接、等待與加載等。

插畫的在此時的作用就很明顯了，即將用戶在此時所產(chǎn)生的負(fù)面情緒進行排解并配合文字給出合理的建議，反之對于正面情緒進行再次肯定，以提升用戶在使用過程中的成就感，達到對于情緒的接力。

具體實際場景：狀態(tài)空白頁、操作成功狀態(tài)顯示、網(wǎng)絡(luò)斷開提示頁面等。

4.1.5 新手引導(dǎo)與新更新信息提示

每個人都有第一次接觸某款應(yīng)用或者面對使用的應(yīng)用升級帶來新功能的時候，而當(dāng)產(chǎn)品需要將這些新的信息準(zhǔn)確的告知用戶的時候，往往可以通過將插畫置入在界面的合理位置中進行敘述，以達到與新用戶有效溝通、降低操作學(xué)習(xí)成本的目的。

具體實際場景：新上線功能提示遮罩、啟動頁新功能解釋等。

4.1.6 核心內(nèi)容強調(diào)與輔助敘述

在用戶對較長的文字信息流進行快速閱讀的時候，其核心表達含義很容易隨著文字信息密度的提升而產(chǎn)生閱讀核心丟失的可能性或者被混淆，這個時候就需要插畫作為一個視覺照明彈將主旨進行簡潔明確的敘述及提煉，降低閱讀干擾并作為文字信息流的承擔(dān)輔助敘述功能，同時提升視覺透氣。

具體實際場景：工具類應(yīng)用網(wǎng)站主頁介紹等。

4.2 常規(guī)落地五步法

在這一步驟探討之前需要聲明和強調(diào)的是，這并不是指具體到一幅插畫創(chuàng)作作品上面的步驟教學(xué)演示（畢竟從繪畫的流程上來說千人千法，而畫本無定法貴在得法即可），而是基于插畫在項目中從提出到構(gòu)思再到最后產(chǎn)出與執(zhí)行的一整套實踐鏈路模型，具有普適性，當(dāng)然也并不是說只有這一種。

從大量的項目調(diào)研和項目經(jīng)驗來說，插畫的落地大致可以分為這五步：基本規(guī)范——風(fēng)格探索——風(fēng)格確立——畫面繪制——檢查交付

4.2.1 基本規(guī)范

這一步一般是出現(xiàn)在任務(wù)的早期（一般是最開端）設(shè)計師需要根據(jù)需求方（甲方或PM）提出的品牌訴求并結(jié)合產(chǎn)品的企業(yè)形象、市場定位、體量……與需求方溝通協(xié)商出一套雙方都較為認(rèn)可的設(shè)計規(guī)范標(biāo)準(zhǔn)以便在后面的設(shè)計中作為參考的依據(jù)與憑借，這也是對后面一系列設(shè)計行為所進行的約束。

這樣做的最大好處是能盡可能規(guī)避偏離設(shè)計目標(biāo)等類似風(fēng)險，同時能有效提升整體的設(shè)計效率。

在這一步中可以但不一定需要具體到顏色的色值這種微觀的層面，而是在宏觀策略層面上規(guī)定其需要向受眾和開發(fā)者傳遞的核心詞匯如：一致、可控、效率、生長性等。

4.2.2 風(fēng)格探索

當(dāng)確立了插畫設(shè)計的基本規(guī)范就可以進一步進行風(fēng)格的探索，而風(fēng)格元素的探索依舊是圍繞品牌的基因?qū)傩赃M行提取，這是為了給插畫中的元素賦予一個統(tǒng)一的世界觀，不會造成視覺上的割裂感。

首先，我們在這一步進行的時候需要先進行風(fēng)格測試即采用多版有明顯的差異但是又滿足以上約束的風(fēng)格進行對比，很類似于設(shè)計中的比稿，在此時并不需要將畫面面面俱到，但是一定要滿足第一眼就能感受到其中差異的這項條件，這就會很容易讓我們快速通過比較找到最為適合的大概風(fēng)格方向從而進行決策。

在風(fēng)格測試中不可避免的思考在于用何種元素作為視覺傳達符號更凸顯其意味。這個問題其實可以參照著名美學(xué)研究者李澤厚先生對于意味的來源的觀點，即“意味來自于原始的積淀、藝術(shù)的積淀和生活的積淀。”其中最具指導(dǎo)意義的就是對生活的積淀。

為什么這么說呢？這是因為在目前我們大部分的商業(yè)插畫中很少有純抽象的創(chuàng)作形式，就算是有一定的夸張、解構(gòu)、變形其本質(zhì)還是對我們生活、工作、生存環(huán)境等現(xiàn)實物像的再現(xiàn)，用藝術(shù)創(chuàng)作術(shù)語來說這是一種現(xiàn)實主義表現(xiàn)形式，而李澤厚先生所說的“對于生活的積淀”就明確指“包括了“對社會氛圍的捕捉對時代、潮流氣息、人們的命運的感知”前后二者不謀而合。

所以面對元素的選擇我們更多的還是要對所需要表現(xiàn)的對象進行生活化觀察聯(lián)系，以一個核心物品或詞匯進行發(fā)散聯(lián)想，承接聯(lián)想的每一個節(jié)點都可以是一件與之相關(guān)的具象化物品，然后對這些元素進行融合；

其次，統(tǒng)一的世界觀從視覺的層面來說主要表現(xiàn)為統(tǒng)一的造型風(fēng)格，統(tǒng)一的色彩風(fēng)格。

造型風(fēng)格：

造型風(fēng)格是設(shè)計資產(chǎn)中的重要組成部分，具有高度的統(tǒng)一性，以人物素材為例，無論是進行哪一版本風(fēng)格的測試都需要給起建立統(tǒng)一的比例構(gòu)造，這是動畫人物設(shè)計中老生常談的話題，就是統(tǒng)一世界觀下的頭身比例，人物與人物之間可以有高矮胖瘦的差異，但是一定不能在比例上失衡的太過，這樣的比例要求同樣適用于人物與景物的比例造型關(guān)系。

如果在組件化人物系統(tǒng)的繪制中，甚至還能為其準(zhǔn)備好統(tǒng)一的骨骼系統(tǒng)以適用與動態(tài)應(yīng)用的擴展。

色彩風(fēng)格：

色彩風(fēng)格的探索也并不死板而單一，但其核心一定是各色相相互之間權(quán)重的控制，大致可分為：主色、輔色、點綴色三者比例從大到小（理論占比是70%、25%、5%當(dāng)然數(shù)值并不絕對）在主色的選取上我們可以以靠近品牌色本身或者通過“腦暴”找出關(guān)鍵詞并根據(jù)關(guān)鍵詞聯(lián)想發(fā)散推導(dǎo)出主色的思路來進行創(chuàng)作，主色的選擇盡量在同一色系中選擇，不要超過三種，但是對于單幅的相對獨立的創(chuàng)作來說，只需要定好畫面的主導(dǎo)色相并做好色彩上的對立統(tǒng)一關(guān)系即可。

最后，在前幾步的基礎(chǔ)之上繼續(xù)深入細(xì)化思考，基于其最終大致使用的實際場景進行篩選和調(diào)整，實際使用場景中需要考慮到的因素包括在整個界面中的視覺整體效果、開發(fā)層可行性的最小可行度、易用性、靈活性、可復(fù)用性……通過這些更為落地的條件進行約束、甄別出較為可行的方案。

4.2.3 風(fēng)格確立

當(dāng)經(jīng)過了一系列如上的對比、篩選、甄別之后，其實基本上的風(fēng)格走向就已經(jīng)確立了，這一步是對風(fēng)格的深入化打磨，就像對花草養(yǎng)護的修剪旁雜枝干，突出主干。需要做的主要是兩件事：風(fēng)格的演化與延展性測試、大眾屬性的遷移。

風(fēng)格的演化與延展性其實比較好理解，就是將既定的風(fēng)格進行更為接近于實際應(yīng)用層面的組合嘗試，探索該風(fēng)格下畫面元素的最大潛力，同時套用到比較接近于實際使用環(huán)境的Mockup中，反復(fù)確定其最小可行性。

而大眾屬性遷移其實際意義在于最大化的滿足受眾接受度，大部分的存在于UI中的商業(yè)插畫其受眾組成成分都相對而言都較為復(fù)合，如果個性風(fēng)格過于強烈，那么會很容易引起一定的爭議性，對于此類插畫設(shè)計我們需要非?？酥疲３置烙^的同時避免過分鮮明的個性，達到所謂的平均風(fēng)格，這也一般會成為插畫設(shè)計的最優(yōu)解。

4.2.4 畫面繪制

畫面的繪制部分如果要嚴(yán)格意義來進行每一種類別的劃分真的可以稱得上是千人千法，所以本文只是給出一些通用化的繪制思路供大家參考。

如果是大學(xué)、高中就是美術(shù)專業(yè)出身的設(shè)計師那么對于插畫的繪制流程一定并不陌生，其可以較為概括的分為：手稿——線稿——上色——塑造——調(diào)整五個階段

在手稿的階段基本要確立的東西在于1.畫面整體的構(gòu)圖，物體與物體之間的比例關(guān)系2.整體透視關(guān)系3.畫面的疏密組織關(guān)系4.遠(yuǎn)、中、近景之間的虛實關(guān)系，在這一步中其實大致的畫面關(guān)系就已經(jīng)出來了，而且這一步做得越詳細(xì)，對于后面的轉(zhuǎn)線稿工作就越有利。

基礎(chǔ)的手稿繪制完后下一步就是開始轉(zhuǎn)更為精確的電子稿，可以用到Illustrator、Photoshop等工具進行分圖層轉(zhuǎn)稿，在這一步需要相對于手稿而言需要刻畫出更多的細(xì)節(jié)，使具體的線面表達更為明確，層次感更豐富，到這步造型工作就基本結(jié)束。

當(dāng)造型結(jié)束后我們可以開始我們的上色階段，在上色階段沒有固定的套路，有直接鋪大調(diào)子然后再嵌入輔色、點綴色的方法，也有顏色直接一步鋪到位，由點及面、步步為營的進行上色，符合自己的習(xí)慣就行，但是在上色的過程中同樣需要時刻注意整體色調(diào)的比例協(xié)調(diào)，以免造成色調(diào)的跑偏。

深入塑造是一個相對的步驟，當(dāng)畫面整體的調(diào)性定格了后，由于每個創(chuàng)作者的習(xí)慣不一樣，就會導(dǎo)致畫面的深入程度不一樣，這一步是對于沒有完善或者說需要深入刻畫的細(xì)節(jié)而進行繪制的，當(dāng)然在深入塑造的時候還是要十分注意整體關(guān)系，不能因為沉迷于某處細(xì)節(jié)塑造開始自嗨然后在主體中過于出跳，這是一個十分耐心且克制的過程（當(dāng)然對于整體把控感極強的老司機一切都隨意）。

作為整幅畫面的收官之舉調(diào)整是必不可少的一步，將畫面置于整體視角觀察，如果有十分搶主體的局部需要進行適當(dāng)?shù)南鳒p，如果主體物的一些細(xì)節(jié)還不夠突出，那么可以再適當(dāng)?shù)呢S富豐富畫面，達到最佳效果，這一步是加法與減法之間的平衡。

這里需要再次強調(diào)的是，不是說一定需要按照上面按部就班得來，只是這種模式具有一定的普適性而且相對來說較為嚴(yán)謹(jǐn)，每個設(shè)計師都有自己獨特的繪畫流程，畫無定法，貴在得法。

一幅整體的作品完工后，在效率化設(shè)計需求的當(dāng)下，我們需要盡可能的提高單幅畫面的二次利用率，賦予畫面中每個元素能被替換和多次利用的能力，這就出現(xiàn)了我們耳熟能詳?shù)慕M件化繪制的設(shè)計方式，大大提升了設(shè)計效率。

所謂的組件化繪制其實就是將畫面中的分子元素如：人物、樹、花甚至文字等物品進行歸類化整理并內(nèi)置與一個單獨的庫中，也就是我們常說的組件庫，在我們需要將某個位置的具體元素進行替換時就可以快速的用庫中的資源進行快速替換。

當(dāng)然如果繼續(xù)進行拆分那么分子庫可以被拆成更小的原子即：人物的某一個關(guān)鍵部位、花草樹木的花瓣、枝干等，以進行更為細(xì)致化的組合和更多的可能性復(fù)用。

4.2.5 檢查交付

當(dāng)所需要的插畫繪制完成時就需要進行最后的檢查交付階段，這個階段主要是將插畫置入最終的使用場景中進行檢查，可以是高保真Mockup，這一步與之前提到的置入Mockup的行為不同的地方在于這一步側(cè)重于糾錯和調(diào)整，上一步則是側(cè)重于探索和驗證。

如果面對一些即將上線的具有動效的插畫時設(shè)計師要特別注意與開發(fā)再次核實其最終實現(xiàn)效果和可行度。

在上線后可以通過數(shù)據(jù)埋點、用戶反饋、日活等數(shù)據(jù)信息反饋進行反饋和復(fù)盤。檢測是否解決問題的標(biāo)準(zhǔn)還是可以分以以上提到的三個方面為標(biāo)準(zhǔn)進行檢查：

1.是否優(yōu)化了視覺完成了對于用戶審美的滿足和興趣的吸引

2.是否對用戶交互進行了減負(fù)，提升了使用中的體驗感

3.是否在不同的層級上充當(dāng)了品牌的傳播工具，有利于品牌價值的最大化

感謝你耐心地看到現(xiàn)在，在文章的最后部分想和大家聊聊在插畫的日常練習(xí)中自己的一些心得體會：

5.1 良好的觀察習(xí)慣

首先就是要養(yǎng)好好觀察事物的習(xí)慣，我們目前從事的UI中的插畫作業(yè)大部分還是對生活中實物的再現(xiàn)，如何能在被接到需求之時就能迅速的聯(lián)想出具體物體的具體狀態(tài)，那么離不開平日的大量觀察，觀察中需要特別注意物體的光色關(guān)系、光影關(guān)系、形狀區(qū)別，并且自己要有意識地去給雜亂無章的事物進行主動構(gòu)圖和景深式取舍。

主動構(gòu)圖的意思就是學(xué)會從雜亂無章的自然、生活事物中去用畫框的概念去截取較為美觀的構(gòu)圖，通過大量的構(gòu)圖式思維來養(yǎng)成，一旦畫畫就自然而然具備構(gòu)圖的意識，這點真的很重要，這是很多學(xué)了不短的繪畫時間的人仍就容易忽視的習(xí)慣，但這卻是你對于畫面的組織能力是決定性的習(xí)慣。

景深式取舍是指我們需要學(xué)會像照相機那樣觀看物體——懂得聚焦觀察，都說設(shè)計師需要像素眼，但其實也同樣需要要聚焦眼，聚焦的意義在于我們會對物體的觀察有主次的概念，聚焦意味著一部分的虛化和另一部分的清晰，尤其是在視覺Z軸上形成這樣的層次感，而繪畫中前中后景的處理方式也大多類似于此，長此以往有助于我們對于畫面主次關(guān)系的處理能力

5.2 勤奮與素材推薦

當(dāng)然了無論是什么技能與意識說到底還是那句老生常談的筆耕不輟，日積月累，畢竟長期的練習(xí)是磨合能力與意識的最好方式，推薦一些經(jīng)常去逛的插畫網(wǎng)站：

Behance：https://www.behance.net/

這個大家并不陌生了，設(shè)計師必備。

Notefolio：https://www.notefolio.net

這是一個較為小眾的韓國的設(shè)計網(wǎng)站，有點像韓國的Behance但是風(fēng)格也更為別具一格，是很不錯的插畫案例參考網(wǎng)站。

Pinterest：https://www.pinterest.com

同樣是一個耳熟能詳?shù)乃夭木W(wǎng)站，除了瀑布流的分布外最方便的就是具有聯(lián)想推薦功能，而且會根據(jù)每個設(shè)計師自己的情緒版特征進行更為精準(zhǔn)的定向推送，實時更新最新的相關(guān)內(nèi)容。

Free illustrations：https://freeillustrations.xyz/

十分垂直的插畫素材集合型網(wǎng)站，可根據(jù)標(biāo)簽選擇自己需要的格式并且支持源文件下載，能得到最真實最還原的的插畫素材。

Stories by Freepik ：https://stories.freepik.com/

除了擁有大量的場景人物場景應(yīng)用插畫素材之外，這個網(wǎng)站最大的殺手锏在于他擁有線上的動態(tài)現(xiàn)實功能，可通過對于腳本的設(shè)置對素材進行動態(tài)顯示查看。

5.3 創(chuàng)意思維

創(chuàng)意思維可以抽象的理解為想象力，考慮到這是一個很寬泛的概念的我僅以幾個我常用的思維訓(xùn)練方法來略作分享：

第一，針對于繪畫想象力延展來說，我們可以將生活中很多自然的帶有殘缺感東西（比如桌子上的被磕碰過的痕跡）通過拍照拍下，將其想象成一個完整的形的一部分，然后在這個殘缺的基礎(chǔ)之上慢慢通過腦補成一個完整的具象的形，這個完整的形可以通過畫筆逐步繪畫成型，這是一個練習(xí)再創(chuàng)作衍生思維十分可靠的方法，有助于設(shè)計師對原素材的發(fā)散聯(lián)想能力。

第二，針對于形的舉一反三能力來說，可以以外形為一個共同點來進行聯(lián)系式練習(xí)即通過形與形之間的相似來將這些形狀相似但是類型也許是千差萬別的物體進行歸類，然后拆解在組合，很多時候會組合出完全意想不到的效果，在完成一些視覺上的荒誕組合效果的插圖作業(yè)時，會起到出奇兵的效果。