插畫的發展及在UI設計中的應用

概覽

01· 插畫的源起發展

02· 商業插畫被廣泛應用的原因

03· 插畫在UI設計中的優勢和應用場景

1-01. 插畫的源起發展

將其劃分為五個時間節點，分別為 源起，開端，探索，發展，變化 。在漫長的時間線裏插畫隨着時代、文明、科技的變化，以不同的創作形式傳遞創作者的思想。

插畫的源起，要從公元前15000年阿爾塔米拉洞穴彩色野牛頭繪畫説起，其次重要的是埃及的 《死者之書》 ，這是公元前332年發現的紙鈔草繪畫作品，為什麼説 它 很重要呢？因為它是最早以插畫形式完整展示的敍事性內容。

死者之書也稱為“通往光明之書”。 段落是依照死者生平而撰寫的，對其中畫面感興趣的也可以看看最近漫威新上映的英雄劇集 《月光騎士》 ，裏面後三集的一些情節和死亡之書有契合之處～，比如男主兩個人格（馬克和史蒂文）的心臟再和天平秤量的時候，因心臟都不完整無法在天平上保持平衡。這一設定死者之書中也有繪製，這源於古埃及神話：當一個人去世後，為了證明自己無罪，用瑪特的羽毛和死者的心臟稱量，如果心臟比羽毛輕即為無罪。反之則有罪。（Ma’at瑪特）【古埃及真理和正義的女神，其象徵物為鴕鳥羽毛。】

1-02. 插畫的開端

公元5-15世紀為插畫的開端，這裏主要着眼於兩處，一是 中國隋唐五代時期 出現的為印製而雕刻成版的 版畫 ，這也是世界上發現最早的版畫記錄，二是歐洲，此時 歐洲插畫 主要應用於 宗教領域 。呈現形式為刺繡和手抄本 .

1-03. 插畫的探索

15-17世紀，插畫進入了探索階段，上圖第一幅作品—火之聖母是歐洲記載最早的版畫。1440年從歐洲的角度而言標誌着插畫藝術的真正開始，緣由為德國人古騰堡發明和建造第一台活字印刷機由此插圖版畫在書籍中廣泛運用。

16世紀文藝復興時期，德國畫家丟勒，使得歐洲木刻達到了頂峯。

17世紀巴洛克時期的魯本斯對於木刻進行再次探索。

1-04. 插畫的發展

18-19世紀屬於插畫的發展階段，這裏首先提及英國18世紀的三位畫家，分別是： 威廉·霍加斯、托馬斯·比維克、詹姆斯·吉爾雷 。

第一幅《墮落過程》為霍加斯的系列作品，一共有8 幅 ，記錄了倫敦社會中一位年輕紳士的腐敗以及最終毀滅，諷刺當時英國貴族奢侈糜爛的生活。 整個系列也被稱之為敍事插畫最偉大的成就之一 。

第二幅為《四足動物史》，作者比維克一生都在為伊索寓言繪製插畫。

最後一幅作品描繪的是英國首相威廉皮特和拿破崙瓜分全球，作者吉爾雷，他的蝕刻版畫因其尖刻的政治諷刺而聞名。

比如説現在的微博大V烏合麒麟他的繪畫作品也多為社論和政治諷刺，最為大家所瞭解的是孟晚舟女士回國這張作品,在推特和ins上能看到很多相關社論插圖，以下幾張。

發展階段，縱觀日本和中國仍然偏愛木版印刷，並且保持極簡主義。葛飾北齋，是這一時期中最有成就的。簡約清晰的線條以及全綵製圖使他打破了木版繪畫的侷限性。代表作為 《富嶽三十六景》 。

此外在發展階段必須要提及 三次技術革新。

1· 一次是18世紀 平版印刷機 的發明，在整個印刷過程中，可以在印刷運行中單獨添加色彩以獲得全綵效果。

2· 第二次技術革新是 攝影技術 的發明，1826年尼埃普斯拍攝了現存最早的照片但實際上1839年由其合夥人達蓋爾才真正發明了攝影技術（這對古典藝術，寫實類肖像畫產生了一定的衝擊但由於最初的攝影技術只能拍攝黑白照片，所以對於彩色插圖而言並 沒 有形成太多的衝擊 。

3·  第三次革新為19世紀中葉， 報紙 在整個歐洲興起。插畫的敍事性為新聞增加戲劇性。由此出第一個標誌性的漫畫人物 Aly Sloper 【盟友斯洛珀】誕生，圍繞盟友斯洛珀塑造了很多新聞事件插圖，比如上圖的《李鴻章參觀霍根巷 》

1-05. 插畫的變化

20世紀插畫到了不斷變化的階段。

從兩個角度去看，一是變化的主要原因，二是不同風格的原因。

接下來重點看一下有哪些插畫風格在變化階段應運而生。

·復古懷舊浪漫

主要代表人物有  拉克姆 和  杜拉克 以及浪漫的鄉村主義  波特 （細緻的水彩插圖）波特筆下的兔子後期改編為電影，就是大家所熟知的《彼得兔》

·漫畫的革新

改變漫畫形式為【 喬治·赫裏曼 】。在他的創作中，線條鬆散。構圖上運用時間和空間的概念，表現出超現實的視覺幽默。上圖《瘋狂的凱特》通過洞的不同方向，以及夜晚白天來表達空間和時間的變化。

到了六七十年代，比利時插畫家  愛弗·米倫 ，他的風格更為時髦犀利 。

·戰爭宣傳海報

一戰期間，插畫被應用到戰爭中，比如招募男性士兵、保護婦女兒童。

二戰期間，插畫主題多為壓迫猶太人，以及美化德國的民族主義、慶祝反法西斯勝利 。

·裝飾現代主義

要提及四位著名的插畫師。

首先第一位新藝術運動的代表人物  穆夏 ，他拋棄傳統裝飾風格，使用大量自然元素作為裝飾，優美的曲線來描繪女性。

第二位  比亞茲萊  他的畫風受日本浮世繪等風格的影響，具有強烈的個人風格，尤其是對線條的出色運用和黑白畫的創造性成就。

第三位  卡桑德爾 ，第二次工業革命以後，人民對現代性發展有了廣泛的接受，卡桑德爾在他的作品中，打破了幾何邊界的界限，並且有較強的設計感。第四位是被譽為“發明了現代雜誌設計的整個構想”的  克里斯蒂安  ，他為當時的《星期六晚郵報》製作了三百多個封面。

1967年嬉皮文化到來。由時代音樂及地下生活方式的影響而創作的色彩鮮豔的的迷幻圖像（看起來像是一場對裝飾藝術風格的革命），但是並沒有轉化為主流，到七十年代初，就幾乎銷聲匿跡。

·極簡主義美學

代表風格為 薩普拉卡特風格 ，這種風格的先驅  霍爾温 ，作品中較少的幾何形體、醒目的字母、形狀最大簡化。對極簡主義美學和海報化做到了很好的探索 。

·電影和動畫

真人電影和動畫電影誕生於維多利亞時代晚期。

到了20年代，它們已經主宰了娛樂界，此時攝影技術還沒有很完善，所以製作海報的幾乎都是插畫。代表作品 《大都會》《爵士歌手》 。展示了插畫在電影海報中的妙用。

20年代，第一位動畫明星【 貓菲利克斯 】誕生，實際上後來很多的IP動畫形象都有參考其模版繪製，包括米老鼠、貓和老鼠。

1937年：迪士尼，發行了第一部 彩色長篇動畫《白雪公主》 此時除了動畫師，還有數百名的概念藝術家、角色設計師。

1938年最初創造的 超人形象登場 ——動畫也向全新的流行藝術發展。

·兒童繪本

1928年兒童插畫家  萬達·加格 出版的 《數百萬只貓》 被公認為是第一本（繪本）。打破了原有圖書文字排版和插圖之間的關係，取而代之的是更多的有趣的插圖，文字只是為了支撐圖像。但此時兒童繪本並沒有被更多用户接受和理解。

一直到1963年  森達克  創作的 《野生動物在哪裏》 強化了兒童繪本在用户心中的心智，這也是兒童繪本的里程碑。

·超現實主義幽默

第二次世界大戰以後，插畫師  阿茲巴舍夫 ，創作的圖形風格驚人，擬人化、在機器上顯示出明顯的人為屬性，有超現實的黑色幽默 。

·奇幻畫派

六七十年代，攝影逐漸取代插畫成為媒體視覺表達的主要方式，比如雜誌的封面多為攝影拍攝，但由於攝影不能拍攝不存在的東西，所以幻想藝術蓬勃發展（科幻小説、漫畫、兒童繪本）奇幻畫派的先驅  弗雷澤塔  創作了很多肌肉發達的英雄， 以 及奇幻元素。 當代遊戲概念藝術都受到他的 影響。

·數字藝術

80年代個人電腦革命興起——數字技術發展迅速。設備也不斷更新比如：手繪版、iPad。

綜上所述可以發現，插畫風格是多樣的，而背後的原因，除了插畫師本人的經歷、喜好、價值觀等主觀原因，更多的是受時代背景、流行文化、社會環境、歷史事件、以及繪畫技法、等客觀因素的影響。才慢慢演化為當下自由、多元、包容的插畫創作氛圍。

2. 商業插畫被廣泛應用的原因

從六個方面來看，分別是商業插畫的概念、應用場景、應用背景、插畫本身的優勢、市場和用户需求。

藝術創作沒有目的性，但是商業插畫的目的性非常強。商業業插畫一般承接了用户和市場的需求，深受當下的流行文化影響。

插畫的應用場景有很多，歸類來看分為以下六種：

從四個角度看插畫的應用背景

1·商業化的發展及視覺文化傳播方式的廣泛應用

2·人的思維模式從語言文字為主的理性主義形式轉變成以圖像為主的感性主義形式

3·文化形態的傳播方式從語言文字的生產、傳播、消費轉變成視覺圖像的創作、傳播和消費

4·信息時代的不斷髮展，電腦等電子設備已經成為時代發展的標誌

插畫本身的優勢有 以 下幾點

從市場需求的角度來看，市場需要通過插畫廣告刺激消費—提高經濟效益，其次強化宣傳提升品牌傳達

從用户需求的角度來看，互聯網信息時代，用户在接收復雜繁多的廣告信息的同時，需要更好的視覺體驗來提高審美，其次用户也希望從中產生一定的情感共鳴，獲取到情緒價值。

3.  插畫在UI設計中的優勢和應用場景

優勢有 以下幾點：

1·  信息可讀性與高記憶點

從用户角度來當前界面，可以簡潔直觀的通過插畫get到花不同的錢可以享受到的不同服務 。

2·  敍事性激發用户交互

美國的Mailchimp，網頁端用插畫的方式引導用户認識產品並如何使用產品，更好 地 激發了用户進行交互操作。

3·  強化品牌識別

通過IP的插畫設計，不斷夯實品牌的用户心智

4· 強化界面的美型，提升用户審美 。

5·插畫的定製感與獨特感增強用户的分享慾望

6·建立信任

插畫的表達方式更能與用户拉近距離建立信任。

插畫在UI設計中的應用場景，分別有以下這些 ：

1· 新手引導

比如轉轉知乎在新手引導時都選擇插畫的表現形式，提升用户對產品的好感度，以及降低對產品的學習成本 。

2·新功能提示

降低用户學習成本，拉近與用户之間的距離～

3· 品牌宣傳

Goole的web端每逢節日便會有圍繞goole logo來進行節日主題插畫的創作，很好的強化品牌的用户心智 。

4·登錄頁

眾多產品都在登錄頁使用插畫的表達形式，更容易與用户產生情感連接達到品牌觸達。

5·插畫組件

Ant Design、自如都構建了自己的插畫組件，有助於統一的視覺風格傳遞，提高設計效率——搭建設計資產——最後保證情感化觸達

6·IP設計

這可以很好的賦予品牌生命力提升品牌的温度，更好的觸達用户

7·獎勵機制和榜單

在一些獎勵交互動作時通過插畫形式傳達正向反饋，提升用户情緒價值 。

8·H5的主題分享

最近幾年產品都會有年度報告，有很多都以插畫的形式表現，插畫的定製感與獨特感增強用户的分享慾望。用户通過分享建立自己的社交貨幣，滿足用户的社交需要。

從插畫的發展、商業插畫、UI設計中插畫的應用三條脈絡做了簡單梳理。希望對您瞭解插畫應用插畫有一定的幫助。