萬字乾貨!插畫助力UI多場景設計

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

1.1 起源說

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

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

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

當然嚴格意義上來說，插畫的形式也包括了獨立裝飾插畫這類概念，不僅僅局限於常見的伴隨信息流出現的形式

1.2 在UI中的定義

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

此時此刻插畫可以被理解為是UI中的控制項，既然是控制項那就那就一定會附帶功能、交互、產品等屬性服務於特殊的目的，同時，布局於UI之上那麼一定要服從層級屬性的制約

1.3 商業意圖

嚴謹的說，我們目前已知的較為主流的出現在UI、網際網路產品中的插畫統統都屬於商業插畫的範疇，那麼也就是說在創作和使用插畫的時候一定要將需求方的價值主張、盈利點、品牌價值、產品定位、企業文化調性等納入重要考量標準

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

這不僅是你創作插畫的核心出發點，同樣也是決定你的插畫是否能成功的關鍵性因素

插畫的出現與流行並非是偶然，其背後存在著眾多使之蔚然成風的邏輯和理由，其中兩個最重要的原因需要歸結為：1.插畫自身的優勢 2.用戶和市場的需求

2.1 插畫自身的優勢

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

2.1.1 信息傳遞效率

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

首先，選擇插畫是我們人類生理性的選擇，實驗心理學家赤瑞特拉曾在測試人類獲取信息來源的實驗中表示，人類獲取的信息83%來自視覺，11%來自聽覺，3.5%來自嗅覺，1.5%來自觸覺，1%來自味覺，所以很明顯視覺是我們主要感知這個世界的方式

所以在目前需要飛速獲取信息，講究直截了當的表達意思的用戶需求的當下，插畫本身相對於文字有更快的信息傳遞效率

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

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

當然這裡並不是說文字傳遞就一定比圖片傳遞差，文字相比於圖片而言具有對想像的空間限制較小等優勢，只是在產品中基於快速傳達、精準接收的需求而言，圖片的效率在很大程度上是優於文字的

2.1.2 視覺隱喻

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

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

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

2.1.3 故事性

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

故事性不但能將界面中的每個部分串聯的更緊密，同時更能讓人產生親切感

2.1.4 藝術性

插畫脫胎於藝術繪畫的範疇，也是傳統藝術繪畫的分支，所以其無論是出於什麼目的被創作，都會不由自主的帶有一定的藝術氣質，十分有利于格調感、品質感、氛圍感、個性感的營造

2.1.5 包容性、與時俱進性

插畫的範圍比較廣泛，並不限於一兩種風格之中，所以這就使得插畫具有很強的包容性，可以以較多的形式和種類出現在不同的場景，具有很高的普適性

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

2.2 用戶和市場的需求

除了插畫本身的優勢以外，能讓插畫如今大行其道的關鍵原因還是市場和用戶的選擇

2.2.1 情感化需求

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

圖形化的表達會增加趣味性和情感連接屬性，豐富產品顏色基調，擴大產品情感閾值

2.2.2 品牌差異化需求

當產品的功能已經趨於完善，僅從功能性上來說，同類產品之間很難再拉開明顯的差距，這個時候新的增長需要依託於品牌的調性提升，建立自己獨有的IP屬性，此時一個產品代表了一個具有一定人格化的品牌形象

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

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

3.1 視覺傳達

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

3.1.1 滿足審美需求

就插畫本身而言，它屬於繪畫藝術作品的範疇，所以從插畫的基因之中是自帶藝術欣賞性在其中的，而上文中也提到過，插畫的創作形式和風格眾多，所以對於用戶而言，對插畫的喜好的不同體現了不同的受眾品味，對產品來說這也是彰顯企業文化的表徵特性

而這些需求從視覺的角度來看可以認為是個人或集體審美的體現，無論是產品設計、環藝設計還是數字媒體設計等滿足審美的需求一直是設計追求的重要課題

3.1.2 更為生動與有趣

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

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

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

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

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

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

3.2 交互引導

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

3.2.1 狀態提示與引導操作

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

3.2.2 情緒的緩解與肯定

從目前主流用戶的APP使用數量來說，一個用戶平均每天會與10—25個左右的APP發生交互使用關係，除了因工作必要和生活必要需要打開並使用的APP外，其餘的APP產品如果想要儘可能的吸引用戶更多的使用時間、使用頻率以提升更多的日活數據等，那麼對用戶操作體驗情緒的把控是至關重要的

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

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

3.3 品牌價值

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

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

3.3.1 品牌定位

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

舉個最簡單的例子為什麼很多人看到一個產品第一眼會有：「這個產品是做給年輕人的」「這個產品應該是服務潮人的」這樣的定論，都是因為第一眼被傳達了品牌的定位的緣故

而插畫本身可以做到的是將上述信息以給予用戶一種「看圖說話」的模式來對產品進行閱讀

3.3.2 差異定製

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

如果說符號語義太抽象，那麼不妨聯繫插畫的藝術屬性：藝術風格。就如同每個畫家都擁有自己的畫風一樣，每個產品的基因都是有其獨特屬性存在的，打造、定製自己的專屬插畫符號系統，其實就是將這種獨特基因屬性外化，找到自己的「畫風」

舉個例子，為什麼大家每當提到租房軟體也許腦中會有很多選擇，但是一旦給出年輕、潮流、插畫這些關鍵詞的時候第一時間就會想到自如，因為自如已經在產品差異層面打造了自己的「畫風」

3.3.3 重複與衍生

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

而在重複這個行為中對於具體產品而言更為實際的意義則是衍生，衍生在落地中具體表現在：

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

品牌物料的多元化：產品因企業IP所產生的周邊、文創等一系列商業衍生物

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

小結一下

插畫對UI的意義存在於：

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

交互上，引導用戶優化操作並進行情緒的疏導與控制

品牌上，進行品牌的定位，提升差異化競爭力並創造重複與衍生的可行性

4.1 被需求的時機和場景

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

經過了大量的實際案例和優秀產品調研，插畫在UI場景中被需求的時機與場景體現在：

4.1.1 活動內容的吸引

當產品中出現新活動、層級較高的信息需要告知用戶並有將用戶吸引誘導其點擊的需求時，就是插畫的作用需要發揮的時機，這也目前的主流運營類UI設計中最為人所熟知的插畫適用場景之一，在此場景之中插畫的主要目的在於吸引用戶的關注和觸發點擊行為

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

4.1.2 主要內容的概括

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

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

具體實際場景：文章頭部、應用功能介紹板塊等

4.1.3 統一與整體感的需求

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

具體實際場景：ICON設計、同品類等

4.1.4 正負面狀態情緒接力

除了套系感的營造，插畫還具有對於用戶出現情緒的正面、負面情緒的正確引導以提升用戶使用體驗感的效果，而在實際的用戶交互中經常會出現從正向、負向兩個方面去影響用戶體驗的系統狀態：

正向：任務完成、操作執行成功等

負向：空白狀態、功能無法執行、調用失敗、網絡失去連接、等待與加載等

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

具體實際場景：狀態空白頁、操作成功狀態顯示、網絡斷開提示頁面等

4.1.5 新手引導與新更新信息提示

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

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

4.1.6 核心內容強調與輔助敘述

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

具體實際場景：工具類應用網站主頁介紹等

4.2 常規落地五步法

在這一步驟探討之前需要聲明和強調的是，這並不是指具體到一幅插畫創作作品上面的步驟教學演示（畢竟從繪畫的流程上來說千人千法，而畫本無定法貴在得法即可），而是基於插畫在項目中從提出到構思再到最後產出與執行的一整套實踐鏈路模型，具有普適性，當然也並不是說只有這一種

從大量的項目調研和項目經驗來說，插畫的落地大致可以分為這五步：基本規範——風格探索——風格確立——畫面繪製——檢查交付

4.2.1 基本規範

這一步一般是出現在任務的早期（一般是最開端）設計師需要根據需求方（甲方或PM）提出的品牌訴求並結合產品的企業形象、市場定位、體量……與需求方溝通協商出一套雙方都較為認可的設計規範標準以便在後面的設計中作為參考的依據與憑藉，這也是對後面一系列設計行為所進行的約束

這樣做的最大好處是能儘可能規避偏離設計目標等類似風險，同時能有效提升整體的設計效率

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

4.2.2 風格探索

當確立了插畫設計的基本規範就可以進一步進行風格的探索，而風格元素的探索依舊是圍繞品牌的基因屬性進行提取，這是為了給插畫中的元素賦予一個統一的世界觀，不會造成視覺上的割裂感

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

在風格測試中不可避免的思考在於用何種元素作為視覺傳達符號更凸顯其意味。這個問題其實可以參照著名美學研究者李澤厚先生對於意味的來源的觀點，即「意味來自於原始的積澱、藝術的積澱和生活的積澱。」其中最具指導意義的就是對生活的積澱

為什麼這麼說呢？這是因為在目前我們大部分的商業插畫中很少有純抽象的創作形式，就算是有一定的誇張、解構、變形其本質還是對我們生活、工作、生存環境等現實物像的再現，用藝術創作術語來說這是一種現實主義表現形式，而李澤厚先生所說的「對於生活的積澱」就明確指「包括了「對社會氛圍的捕捉對時代、潮流氣息、人們的命運的感知」前後二者不謀而合

所以面對元素的選擇我們更多的還是要對所需要表現的對象進行生活化觀察聯繫，以一個核心物品或詞彙進行發散聯想，承接聯想的每一個節點都可以是一件與之相關的具象化物品，然後對這些元素進行融合

其次，統一的世界觀從視覺的層面來說主要表現為統一的造型風格，統一的色彩風格

造型風格：

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

如果在組件化人物系統的繪製中，甚至還能為其準備好統一的骨骼系統以適用與動態應用的擴展

色彩風格：

色彩風格的探索也並不死板而單一，但其核心一定是各色相相互之間權重的控制，大致可分為：主色、輔色、點綴色三者比例從大到小（理論佔比是70%、25%、5%當然數值並不絕對）在主色的選取上我們可以以靠近品牌色本身或者通過「腦暴」找出關鍵詞並根據關鍵詞聯想發散推導出主色的思路來進行創作，主色的選擇儘量在同一色系中選擇，不要超過三種，但是對於單幅的相對獨立的創作來說，只需要定好畫面的主導色相併做好色彩上的對立統一關係即可

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

4.2.3 風格確立

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

風格的演化與延展性其實比較好理解，就是將既定的風格進行更為接近於實際應用層面的組合嘗試，探索該風格下畫面元素的最大潛力，同時套用到比較接近於實際使用環境的Mockup中，反覆確定其最小可行性

而大眾屬性遷移其實際意義在於最大化的滿足受眾接受度，大部分的存在於UI中的商業插畫其受眾組成成分都相對而言都較為複合，如果個性風格過於強烈，那麼會很容易引起一定的爭議性，對於此類插畫設計我們需要非常克制，保持美觀的同時避免過分鮮明的個性，達到所謂的平均風格，這也一般會成為插畫設計的最優解

4.2.4 畫面繪製

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

如果是大學、高中就是美術專業出身的設計師那麼對於插畫的繪製流程一定並不陌生，其可以較為概括的分為：手稿——線稿——上色——塑造——調整五個階段

在手稿的階段基本要確立的東西在於1.畫面整體的構圖，物體與物體之間的比例關係2.整體透視關係3.畫面的疏密組織關係4.遠、中、近景之間的虛實關係，在這一步中其實大致的畫面關係就已經出來了，而且這一步做得越詳細，對於後面的轉線稿工作就越有利

基礎的手稿繪製完後下一步就是開始轉更為精確的電子稿，可以用到Illustrator、Photoshop等工具進行分圖層轉稿，在這一步需要相對於手稿而言需要刻畫出更多的細節，使具體的線面表達更為明確，層次感更豐富，到這步造型工作就基本結束

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

深入塑造是一個相對的步驟，當畫面整體的調性定格了後，由於每個創作者的習慣不一樣，就會導致畫面的深入程度不一樣，這一步是對於沒有完善或者說需要深入刻畫的細節而進行繪製的，當然在深入塑造的時候還是要十分注意整體關係，不能因為沉迷於某處細節塑造開始自嗨然後在主體中過於出跳，這是一個十分耐心且克制的過程（當然對於整體把控感極強的老司機一切都隨意）

作為整幅畫面的收官之舉調整是必不可少的一步，將畫面置於整體視角觀察，如果有十分搶主體的局部需要進行適當的削減，如果主體物的一些細節還不夠突出，那麼可以再適當的豐富豐富畫面，達到最佳效果，這一步是加法與減法之間的平衡

這裡需要再次強調的是，不是說一定需要按照上面按部就班得來，只是這種模式具有一定的普適性而且相對來說較為嚴謹，每個設計師都有自己獨特的繪畫流程，畫無定法，貴在得法

一幅整體的作品完工後，在效率化設計需求的當下，我們需要儘可能的提高單幅畫面的二次利用率，賦予畫面中每個元素能被替換和多次利用的能力，這就出現了我們耳熟能詳的組件化繪製的設計方式，大大提升了設計效率

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

當然如果繼續進行拆分那麼分子庫可以被拆成更小的原子即：人物的某一個關鍵部位、花草樹木的花瓣、枝幹等，以進行更為細緻化的組合和更多的可能性復用

4.2.5 檢查交付

當所需要的插畫繪製完成時就需要進行最後的檢查交付階段，這個階段主要是將插畫置入最終的使用場景中進行檢查，可以是高保真Mockup，這一步與之前提到的置入Mockup的行為不同的地方在於這一步側重於糾錯和調整，上一步則是側重於探索和驗證

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

在上線後可以通過數據埋點、用戶反饋、日活等數據信息反饋進行反饋和復盤。檢測是否解決問題的標準還是可以分以以上提到的三個方面為標準進行檢查：

1.是否優化了視覺完成了對於用戶審美的滿足和興趣的吸引

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

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

感謝你耐心地看到現在，在文章的最後部分想和大家聊聊在插畫的日常練習中自己的一些心得體會

5.1 良好的觀察習慣

首先就是要養好好觀察事物的習慣，我們目前從事的UI中的插畫作業大部分還是對生活中實物的再現，如何能在被接到需求之時就能迅速的聯想出具體物體的具體狀態，那麼離不開平日的大量觀察，觀察中需要特別注意物體的光色關係、光影關係、形狀區別，並且自己要有意識地去給雜亂無章的事物進行主動構圖和景深式取捨

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

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

5.2 勤奮與素材推薦

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

Behancehttps://www.behance.net/

這個大家並不陌生了，設計師必備

Notefolio：https://www.notefolio.net

這是一個較為小眾的韓國的設計網站，有點像韓國的Behance但是風格也更為別具一格，是很不錯的插畫案例參考網站

Pinteresthttps://www.pinterest.com

同樣是一個耳熟能詳的素材網站，除了瀑布流的分布外最方便的就是具有聯想推薦功能，而且會根據每個設計師自己的情緒版特徵進行更為精準的定向推送，實時更新最新的相關內容

Free illustrations：https://freeillustrations.xyz/

十分垂直的插畫素材集合型網站，可根據標籤選擇自己需要的格式並且支持源文件下載，能得到最真實最還原的的插畫素材

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

除了擁有大量的場景人物場景應用插畫素材之外，這個網站最大的殺手鐧在於他擁有線上的動態現實功能，可通過對於腳本的設置對素材進行動態顯示查看

5.3 創意思維

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

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

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

第三，針對於發散思維想像來說，可以在閒碎的時間裡沒事兒多畫兩筆，將這些塗鴉在空閒的時候不斷的如移花接木一般進行補充，這很有利於進行從0到1的創作，讓我們在接到需求的時候不至於手足無措，腦海裡空空如也

當然以上只是我的一點拙見，如果能夠對你有一定的幫助那麼不甚榮幸

再次感謝你看到最後，對於插畫在UI中的助力探索還遠不止於此，也歡迎留下你的見解和看法，祝每一個熱愛設計的你都能變得更強，加油！

· The End ·

點個「 在看 」下期更精彩哦。