【插畫二三事】插畫初識（一）

來自專欄花不爺雜談22 人贊了文章

一、插畫在UI中的應用

過去的插畫在狹義上是指畫與圖，穿插在書刊當中起到補充說明或者藝術欣賞的作用。而如今的互聯網時代，插畫已經越來越多的延伸應用在更多的app場景中，成為極具視覺表現力、不可或缺的表達形式，是視覺傳達的重要工具。

1.增強視覺效果，吸引用戶；

優秀的插畫能夠在打開產品的第一時間，給用戶深刻的視覺感受，激發他們的想像力，插畫的創意讓產品友好、好用、可信、極富探索、具有新鮮感。

2.強化品牌屬性，加深印象。

在app中，企業的吉祥物形象經常是以插畫的形式來表現的，作為品牌外化表現，插畫能夠給用戶信賴感，保持用戶持續的注意力，提升用戶的參與度；

3.提供視覺引導；

插畫能夠將複雜的概念簡化為易於理解的視覺信息，用戶在大腦中處理圖像要比文字更加快速高效，因此插畫會常常運用到新手教程和新用戶引導流程中來。

4.情感化設計，增添趣味性，增強用戶體驗

讓用戶在使用產品的過程中，獲得成就感和喜悅感。通過積極的情緒來建立與用戶之間的親密聯繫。有時候，有趣的插畫甚至會減輕用戶對app缺陷部分的注意力，減輕用戶焦慮。（參考無網路狀態的頁面設計）

總結：

插畫更多的運用在app的啟動頁、歡迎頁、banner、專題推薦、icon、彈窗、loading、h5、背景圖等等，也是一種設計流行趨勢。

二、常見插畫的種類

常見的有：扁平插畫、漸變插畫、肌理插畫、2.5d插畫、光影插畫、mbe插畫、cg原畫、手繪插畫、剪紙插畫等等

1.扁平插畫

一種較為概括的圖形化設計，也叫矢量插畫。這種插畫人物形象簡單突出、用色鮮明。很多互聯網產品都在使用此類簡約插畫作為宣傳推廣、物料製作上。

2.漸變插畫

在圖形概括的基礎上，加上漸變色使視覺更突出。運用鄰近色、對比色、前後虛實關係的手法使得畫面視覺衝擊力強、氛圍感烘托到位。一些顏色對比強烈的插圖可以在用色上非常大膽，提升畫面感染力，可以發揮更多設計師的創意。

3.肌理插畫

在扁平的基礎上，添加各種筆刷肌理、疊加材質，畫面層次更豐富，能夠表現更多細節

4.2.5d插畫

等距測軸圖，英文名叫isometric。風格起源於早起的2.5d遊戲，如今應用在很多app的圖標設計、h5設計、bannner推廣頁、小遊戲界面中。一般在AI、sketch、AF裡面打好參考網格繪製。

5.光影插畫

很多光影實際上並沒有用太多筆墨去刻畫細節，在足夠優美的構圖和簡單的圖形中，通過建立光影的關係，來烘托重要的氛圍。

6.mbe插畫

矢量斷點插畫。最初來自dribbble上設計師MBE，在扁平化發展中越來越多的設計師響應，成為過去一段時間的潮流。

7.CG插畫

常見於遊戲類應用

8.手繪插畫

需要一定的美術功底，手繪的肌理干、隨意感更強，畫面輕鬆靈動

9.剪紙插畫

一種特殊的視覺表現，也不是很常用。

這一次先大概介紹一下插畫的應用及分類～

以後再給大家分享常用插畫的畫法、插畫構圖色彩要素、插畫常用網站、素材的積累、插畫應用很贊的app。

喜歡就麻煩點小心心支持一下嗷～

微博ID：花不爺

站酷ID：花不爺

Dribbble：weiqi

公眾號：藍胖子